Créer une section héros.

Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

Ici, vous construisez un héros plein écran : une photo de fond, un titre, une ligne d’appui et un bouton, avec la photo qui bouge moins vite que la page au défilement. Utilisez-le en haut de toute page. Pour construire toute la page autour, suivez Créer une page de destination marketing ensuite.

La vidéo construit le héros d’un produit de reporting.

Avant de commencer

  • Votre rôle a la permission Edit with DXPR Builder.
  • La médiathèque contient une photo large, d’au moins 1920 pixels de large.
  • La page est ouverte dans le builder. Pour une nouvelle, accédez à Content > Add content > Landing Page (/node/add/landing_page) et cliquez sur Save.

Étape 1 : ajouter la section

  1. Cliquez sur Ajouter des éléments sur la page vide et choisissez Section depuis l’onglet Mise en page. Survolez-la et ouvrez Plus > Paramètres.
  2. Sous HTML classes, choisissez Align text center, pour que le titre, le texte et le bouton se centrent ensemble.
  3. Activez 100% height pour que le héros remplisse l’écran, et Vertical centering pour que le contenu se place au milieu.
  4. Ouvrez le panneau Style. Sous Background image, cliquez sur Select Image, cochez une photo large et cliquez sur Insert selected.
  5. Réglez Background style sur Cover pour que la photo remplisse la section.
  6. Choisissez une couleur Background sombre, qui s’affiche pendant le chargement de la photo. Réglez Font color sur blanc, puis cliquez sur Save.

Astuce

Compressez la photo sous 500 Ko pour que le héros charge vite.

Étape 2 : ajouter le bouton

  1. Cliquez sur + sur la section et choisissez Bouton depuis l’onglet Contenu.
  2. Réglez Title sur « Start free trial », Link sur /trial, Type sur Light pour le contraste sur la photo et Size sur Large, puis cliquez sur Save.

Étape 3 : ajouter le titre

  1. Cliquez à nouveau sur + sur la section et choisissez Texte depuis l’onglet Contenu. Il atterrit au-dessus du bouton, car les nouveaux éléments atterrissent en haut.
  2. Tapez votre titre, « Reporting that keeps up with your team », et choisissez Heading 2 dans la liste des titres. Le thème imprime 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.
  3. Ajoutez une ligne d’appui : « Dashboards, alerts and integrations in one workspace. Set up in minutes, no developers required. »
  4. Dans le panneau Style, réglez Font color sur blanc, puis cliquez sur Save.

Étape 4 : ajouter la parallaxe

  1. Survolez la section et ouvrez à nouveau Plus > Paramètres.
  2. Ouvrez le panneau Background effects et réglez Background effect sur Parallax image. Parallax speed démarre à 20 ; glissez-le à 35 pour un effet plus fort et cliquez sur Save.

Étape 5 : ajouter du contenu sous le héros

  1. Survolez le héros et cliquez sur Add Section Below, pour que la page ait du contenu à défiler.
  2. Cliquez sur + sur la nouvelle section et choisissez Texte depuis l’onglet Contenu. Tapez un titre et un court paragraphe, réglez la première ligne sur Heading 2 et cliquez sur Save.

Étape 6 : enregistrer et prévisualiser

  1. Cliquez sur Save dans la barre d’outils du builder.
  2. Ouvrez le menu d’affichage (l’icône en forme d’œil), choisissez Preview et défilez vers le bas.

Aller plus loin

Non montré dans la vidéo :

  • Superposition : réglez Background effect sur Gradient et choisissez un Start color et un End color sombres à environ 50 % d’opacité. Le texte reste lisible sur toute photo. L’effet ne tient qu’une valeur, donc une superposition remplace la parallaxe.
  • Héros plus court : désactivez 100% height et donnez à la section son propre remplissage haut et bas dans le panneau Style, par exemple 100 pixels.
  • Bouton large : activez Block button pour un bouton aussi large que sa colonne.

Variantes

Alternatives à la construction de la vidéo :

Héros à fond vidéo

  1. Dans le panneau Background effects, réglez Background effect sur YouTube video.
  2. Collez l’URL de la vidéo dans YouTube video URL.
  3. Sous Video options, cochez Loop et Disable on mobile devices ; laissez l’audio coupé.

Héros en seul dégradé

Sautez l’image de fond et utilisez l’effet Gradient avec deux couleurs de marque unies pour un héros qui charge vite.

Héros divisé

  1. Ajoutez une Ligne dans la section ; elle arrive avec deux colonnes égales.
  2. Placez le texte et le bouton dans la colonne gauche et une image dans la colonne droite.

Ce que vous voyez

La photo remplit l’écran avec votre titre, votre ligne d’appui et le bouton Start free trial centrés en blanc dessus. Quand vous défilez vers la deuxième section, la photo bouge moins vite que la page.

Si le héros ne s’affiche pas comme montré

  • Le héros n’a que la hauteur de son texte. 100% height est désactivé. Activez-le dans les réglages de la section et cliquez sur Save.
  • La photo reste fixe au défilement. Background effect est encore sur Simple image, Parallax speed est à 0, ou rien ne se trouve sous le héros vers quoi défiler. Réglez Parallax image, glissez Parallax speed au-dessus de 0 et ajoutez la deuxième section de l’étape 5.
  • Le titre reste sombre sur la photo. L’élément Texte n’a pas de Font color à lui. Ouvrez son panneau Style et réglez Font color sur blanc.

Et ensuite ?