Créer une page de destination marketing.

Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

Créez ici une page de destination pour une offre : un héros photo avec un bouton Request a demo, trois fonctionnalités avec icônes, deux témoignages et un appel à l’action final. Utilisez-la pour une page de campagne ou de produit avec un seul objectif. Pour un site entier sur une seule page à défilement, suivez plutôt Créer un site one-page à défilement.

La vidéo crée une page pour un produit d’analyse appelé Insight.

Avant de commencer

  • Votre rôle dispose de l’autorisation Edit with DXPR Builder.
  • La médiathèque contient une photo large pour le héros.
  • La page est ouverte dans le builder. Pour une nouvelle page, accédez à Content > Add content > Landing Page (/node/add/landing_page) et cliquez sur Save.
  • Les nouveaux éléments arrivent en haut de leur section ou colonne. Ajoutez les éléments d’une colonne dans l’ordre inverse, ou glissez-les ensuite à leur place.

Étape 1 : ajouter le héros

  1. Cliquez sur Add Elements sur la page vide et choisissez Section dans l’onglet Layout. Survolez-la et ouvrez Plus > Paramètres.
  2. Sous HTML classes, choisissez Align text center.
  3. Ouvrez le panneau Style. Sous Background image, cliquez sur Select Image, cochez une photo et cliquez sur Insert selected. Réglez Background style sur Cover.
  4. Choisissez un Background bleu marine foncé et un Font color blanc, puis cliquez sur Save.
  5. Cliquez sur + sur la section et choisissez Button. Définissez Title sur « Request a demo », Link sur /demo, Type sur Light et Size sur Large, puis cliquez sur Save.
  6. Cliquez à nouveau sur + et choisissez Text ; il arrive au-dessus du bouton. Saisissez le titre comme Heading 2 et le sous-titre en dessous. Réglez Font color sur blanc dans le panneau Style et cliquez sur Save. Le thème affiche le titre de la page comme Heading 1 de la page. Pour faire de ce titre le Heading 1 à la place, voir Créer des pages optimisées pour le référencement.

Étape 2 : ajouter les fonctionnalités

  1. Survolez le héros et cliquez sur Add Section Below. Donnez à la nouvelle section la classe Align text center.
  2. Cliquez sur + sur la section et choisissez Row. Cliquez sur son icône de grille (Column layout), choisissez le préréglage 1/3 + 1/3 + 1/3 et cliquez sur Save.
  3. Cliquez sur + dans la première colonne et choisissez Text. Saisissez le nom de la fonctionnalité comme Heading 3, ajoutez une ligne et cliquez sur Save.
  4. Cliquez sur + dans la même colonne et choisissez Icon ; l’icône arrive au-dessus du texte. Choisissez le jeu Font Awesome Free Solid, recherchez bolt et cliquez sur l’icône. Réglez Size sur Very Large (3x), ouvrez Icon utilities, réglez Style sur Circle et cliquez sur Save.
  5. Répétez pour la deuxième colonne avec chart-line et la troisième avec shield.

Étape 3 : ajouter les témoignages

  1. Ajoutez une troisième section avec Add Section Below. Ouvrez ses Plus > Paramètres, choisissez un Background gris clair dans le panneau Style et cliquez sur Save.
  2. Cliquez sur + sur la section et choisissez Row ; elle arrive avec deux colonnes égales.
  3. Cliquez sur + dans chaque colonne et choisissez Block quote. Saisissez la citation, renseignez Cite avec le nom et la fonction de la personne, et cliquez sur Save.

Étape 4 : ajouter l’appel à l’action

  1. Ajoutez une quatrième section et ouvrez ses Plus > Paramètres. Choisissez Align text center sous HTML classes, puis le Background violet et le Font color blanc dans le panneau Style. Cliquez sur Save.
  2. Cliquez sur + sur la section et choisissez Button. Définissez Title sur « Book a walkthrough », Link sur /demo, Type sur Light et Size sur Large, puis cliquez sur Save.
  3. Cliquez à nouveau sur + et choisissez Text ; il arrive au-dessus du bouton. Saisissez « See Insight on your own data » comme Heading 2 et ajoutez une ligne. Réglez Font color sur blanc et cliquez sur Save.

Étape 5 : enregistrer et prévisualiser

  1. Cliquez sur Save dans la barre d’outils du builder.
  2. Ouvrez le menu d’affichage (l’eye icon) et choisissez Preview.

Aller plus loin

Non montré dans la vidéo :

  • Lead form : insérez un bloc de formulaire web depuis l’onglet Drupal Blocks au lieu du dernier bouton ; voir Ajouter des formulaires aux pages
  • Darker photo : dans le panneau Background effects du héros, réglez Background effect sur Gradient. Choisissez la même couleur foncée à environ 60 % d’opacité comme Start color et End color
  • Taller hero : donnez à la section héros 100 pixels de marge intérieure en haut et en bas dans le panneau Style
  • Start from a template : sur une page vide, cliquez sur Choose a template et choisissez une mise en page de page de destination ; voir Créer une page à partir d’un modèle

Ce que vous voyez

Le titre, le sous-titre et le bouton Request a demo sont centrés en blanc sur la photo. Trois fonctionnalités suivent, chacune une icône cerclée sur un titre court et une ligne. Deux citations se tiennent côte à côte sur un bandeau gris, et un bandeau violet conclut la page avec Book a walkthrough.

Si la page ne s’affiche pas comme montré

  • Les icônes n’ont pas de cercle. Style se trouve dans le panneau Icon utilities, pas dans General. Ouvrez les réglages de l’icône, ouvrez Icon utilities et réglez Style sur Circle.
  • La photo du héros ne remplit pas la section. Background style est encore sur Theme defaults. Ouvrez le panneau Style de la section et réglez-le sur Cover.
  • Une icône se trouve sous le texte de sa fonctionnalité. L’icône est arrivée avant le texte, et les nouveaux éléments arrivent en haut de leur colonne. Glissez l’icône au-dessus du texte par la poignée de glissement de sa barre de contrôle.
  • Vos modifications ont disparu après un rechargement. Vous avez quitté la page avant de cliquer sur Save dans la barre d’outils du builder. Si Save affiche une erreur, voir Les modifications ne s’enregistrent pas.

Et ensuite ?