Comment créer une section héros avec le module d'en-tête pleine largeur de Divi

Construire une section héros est un excellent moyen d'attirer l'attention sur le contenu important de votre page. Il s'agit d'un contenu de très grande taille que vous pouvez utiliser pour raconter votre histoire, partager des informations sur votre travail ou mettre en avant un produit ou un service. Avec le module Fullwidth Header de Divi, vous pouvez ajouter un titre, un sous-titre, deux boutons, un corps de texte, une image de logo et une image d'en-tête. Bien sûr, vous pouvez également utiliser les options d'arrière-plan pour ajouter et combiner des images, des dégradés, des couleurs, des motifs et des masques. Vous pouvez modifier tous ces paramètres dans les paramètres d'un module d'en-tête pleine largeur au lieu d'avoir à basculer entre plusieurs modules d'image, de texte et de bouton.

Dans ce didacticiel, nous allons vous montrer comment créer une section héros attrayante et accrocheuse à l'aide du module d'en-tête pleine largeur de Divi.

Commençons!

Aperçu

Voici un aperçu de ce que nous allons concevoir.

Ce dont vous avez besoin pour commencer

Avant de commencer, assurez-vous d'avoir la dernière version de Divi sur votre site Web.

Maintenant, vous êtes prêt à commencer !

Comment créer une section héros avec le module d'en-tête pleine largeur de Divi

Créer une nouvelle page avec une mise en page prédéfinie

Commençons par utiliser une mise en page prédéfinie de la bibliothèque Divi. Pour cette conception, nous utiliserons la page de destination vétérinaire du pack de mise en page vétérinaire.

Ajoutez une nouvelle page à votre site Web et donnez-lui un titre, puis sélectionnez l'option Utiliser Divi Builder.

Nous utiliserons une mise en page prédéfinie de la bibliothèque Divi pour cet exemple, alors sélectionnez Parcourir les mises en page.

Recherchez et sélectionnez la mise en page de la page d'accueil vétérinaire.

Sélectionnez Utiliser cette mise en page pour ajouter la mise en page à votre page.

Nous sommes maintenant prêts à construire notre conception.

Ajouter le module d'en-tête pleine largeur

Nous allons recréer la section héros en utilisant le module d'en-tête pleine largeur. Ajoutez une nouvelle section pleine largeur à la page, sous l'en-tête existant.

Ajoutez un module d'en-tête pleine largeur à la section.

Ensuite, supprimez la section d'en-tête d'origine.

Personnaliser le module d'en-tête pleine largeur

Ajouter du contenu

Ouvrez les paramètres du module d'en-tête pleine largeur et ajoutez le contenu suivant au module :

• Titre : Vétérinaire
• Sous-titre : DiviVet. Servir nos meilleurs amis
• Bouton n° 1 : Afficher tous les services
• Bouton #2 : Prendre rendez-vous
• Corps : Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta.

Ensuite, ajoutez l'image d'en-tête des vétérinaires avec les animaux.

Paramètres d'arrière-plan dégradé

Accédez aux paramètres d'arrière-plan. Supprimez la couleur d'arrière-plan d'origine, puis ajoutez un dégradé d'arrière-plan.

• 0 % : RVB(255,170,205,0,48)
• 40 % : RVB(110,66,255,0,24)
• 87 % : RVB (124 239 255, 0,71)
• Type de dégradé : Elliptique
• Position du dégradé : droite

Ensuite, sélectionnez l'onglet Masque d'arrière-plan et ajoutez un masque d'arrière-plan à l'arrière-plan.

• Masque d'arrière-plan : Blob d'angle
• Couleur du masque : #FFFFFF
• Transformation de masque : verticale

Personnaliser les styles de texte

Avec notre contenu d'en-tête et notre arrière-plan en place, passons à l'onglet de conception pour personnaliser les styles de texte. Tout d'abord, ouvrez les paramètres du titre et personnalisez le texte comme suit :

• Police du titre : Nunito
• Poids de la police du titre : ultra gras
• Style de police du titre : TT ​​(en majuscule)

Modifiez la couleur, la taille et l'espacement du texte du titre.

• Couleur du texte du titre : #a9cb6b
• Taille du texte du titre : 14 px
• Espacement des lettres de titre : 2px

Accédez à la section du corps du texte et personnalisez la police. Utilisez les paramètres réactifs de Divi pour ajouter une taille de texte plus petite pour les appareils mobiles.

• Couleur du corps du texte : #000000
• Taille du corps du texte - Bureau : 18 px
• Taille du corps du texte : mobile : 14 px
• Hauteur de la ligne du corps : 1,8 em

Ensuite, ouvrez les paramètres de sous-titres et personnalisez la police.

• Police des sous-titres : Nunito
• Poids de la police des sous-titres : Gras
• Couleur du texte des sous-titres : #000000

Enfin, modifiez la taille du texte pour ordinateur et mobile (encore une fois, utilisez les paramètres réactifs pour ajouter une taille de texte plus petite sur mobile) et ajustez la hauteur de la ligne.

• Taille du texte des sous-titres – Bureau : 56 px
• Taille du texte des sous-titres - Mobile : 32px
• Hauteur de la ligne de sous-titre : 1,2 em

Personnaliser les styles du bouton un

Ensuite, nous allons personnaliser les styles de boutons. Commencez par activer les styles personnalisés pour Button One, puis ajustez la taille du texte.

• Utiliser des styles personnalisés pour le bouton 1 : Oui
• Taille du texte du bouton 1 : 14 px

Ajoutez un dégradé d'arrière-plan au bouton. Les valeurs de dégradé sont les suivantes :

• 58% : #316EFF
• 100 % : #1D2B60
• Direction du dégradé : 90 degrés

Ensuite, personnalisez les paramètres de bordure et les paramètres de police.

• Largeur de la bordure du bouton 1 : 0 pixel
• Rayon de la bordure du bouton 1 : 80 pixels
• Espacement d'une lettre du bouton : 2px
• Police du bouton un : Nunito
• Poids de la police du bouton un : ultra gras
• Style de police du bouton un : TT ​​(en majuscule)

Désactivez l'icône du bouton un.

• Afficher l'icône du bouton 1 : Non

Ensuite, personnalisez les paramètres de marge et de remplissage pour la conception du bureau et ajoutez une ombre de boîte.

• Bouton One Margin-Top-Desktop : 200px
• Bouton One Margin-Bottom-Desktop : 0px
• Rembourrage du bouton un-dessus-bureau : 16px
• Rembourrage du bouton un-bas-bureau : 16px
• Rembourrage du bouton 1 - Bureau gauche : 2 em
• Rembourrage du bouton un-droit-bureau : 50 em
• Ombre de la boîte à boutons : bas

Utilisez les paramètres réactifs pour définir différentes valeurs de marge et de rembourrage sur les appareils mobiles.

• Button One Margin-Top-Mobile: 25px
• Rembourrage Bouton Un-Droit-Mobile: 10em

Il y a quelques problèmes d'habillage de texte avec notre bouton que nous corrigerons plus tard avec du CSS personnalisé.

Personnaliser le bouton deux styles

Le bouton deux a des couleurs et un espacement différents, mais il est assez similaire au bouton un. Pour économiser certaines étapes de conception répétitives, copions les styles du module du bouton un dans le module du bouton deux, puis personnalisons ce que nous devons changer.

Tout d'abord, cliquez avec le bouton droit sur la section du bouton un et copiez les styles du bouton un.

Ensuite, cliquez avec le bouton droit sur la section du bouton deux et collez les styles du bouton un.

Nous pouvons maintenant personnaliser les deux styles de bouton. Changez la couleur du texte.

• Couleur du texte du bouton deux : #121F60

Personnalisez le dégradé d'arrière-plan pour le bouton deux.

• 30 % : RVB(0,229,198,0)
• 100% : #00e5c6

Utilisez les paramètres réactifs pour ajuster le dégradé d'arrière-plan pour les appareils mobiles.

• 0 % : RVB(0,229,198,0)
• 100% : #00e5c6

Ensuite, ajustez la marge et le rembourrage pour la conception du bureau.

• Bouton Deux Marge-Haut-Desktop : 0px
• Bouton Deux Marge-Bottom-Desktop : 0px
• Bouton Deux Marge-Gauche-Bureau : 30 %
• Rembourrage du bouton deux-dessus-bureau : 16px
• Bouton Deux Rembourrage-Bas-Desktop : 16px
• Bouton Deux Rembourrage-Gauche-Desktop: 48em
• Rembourrage du bouton deux-droit-bureau : 2 em

Utilisez les paramètres réactifs pour définir différentes valeurs de marge et de rembourrage pour la conception mobile.

• Bouton Deux Marge-Gauche-Mobile : 5 %
• Rembourrage du bouton deux-gauche-mobile : 35 %
• Bouton Deux Rembourrage-Droit-Mobile : 5 %

CSS personnalisé

Enfin, le gros du travail de conception est fait. Nous devons maintenant ajouter du CSS personnalisé pour compléter la conception. Passez à l'onglet Avancé et ouvrez la section CSS personnalisée.

Tout d'abord, commençons par le CSS de l'image d'en-tête. Ce CSS permet à l'image d'en-tête de s'afficher au-dessus du bouton.

z-index: 1;
position:relative;

Ensuite, CSS personnalisé pour le titre. Nous définirons différentes valeurs pour les vues de bureau et mobiles à l'aide des paramètres réactifs.

Pour le bureau :

padding-top:50px;
padding-bottom:30px;

Pour mobile :

padding-top:5px;
padding-bottom:10px;

Enfin, ajoutez le CSS suivant à Button One et Button Two.

white-space: nowrap;

Résultat final

Voici la conception finale de notre section de héros d'en-tête pleine largeur.

Dernières pensées

Le module d'en-tête pleine largeur vous permet de créer facilement une belle section héros pour annoncer vos services et dire à vos visiteurs de quoi parle votre site Web. Les paramètres intégrés facilitent la personnalisation de la conception de chaque aspect de l'en-tête, et tout est au même endroit, donc pas besoin de basculer entre plusieurs modules pour créer votre section héros. Pour des conceptions de section de héros plus uniques, consultez ce tutoriel : Comment utiliser les masques et motifs d'arrière-plan de Divi pour une section de héros. Utilisez-vous le module d'en-tête pleine largeur pour créer vos sections de héros ? Nous serions ravis de vous entendre dans les commentaires !