Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 901.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits.

Voudriez vous savoir comment créer une section Hero avec le module Fullwidth Header de Divi ?

Construire une section Hero est un excellent moyen d’attirer l’attention sur le contenu important de votre page. Il s’agit d’un contenu de grande taille que vous pouvez utiliser pour raconter votre histoire, partager des informations sur votre travail ou mettre en évidence 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 du module au lieu d’avoir à basculer entre plusieurs modules d’image, de texte et de bouton.

Dans ce tutoriel, nous allons vous montrer comment créer une section Hero attrayante et accrocheuse à l’aide du module Fullwidth Header de Divi.

C’est parti !

Aperçu

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

comment créer une section Hero à l'aide du module Fullwidth Header de Divi
comment créer une section Hero à l'aide du module Fullwidth Header de Divi

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 Hero avec le module Fullwidth Header de Divi

Lire également : Divi : Comment utiliser le « Gradient Builder » pour embellir vos images

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 d’accueil pack de mise en page veterinarian.

A partir du tableau de bord de Worpress, ajoutez une nouvelle page à votre site Web

Divi

Donnez-lui un titre, puis sélectionnez l’option Use Divi Builder.

Divi

Nous allons utiliser une mise en page prédéfinie de la bibliothèque Divi pour cet exemple. Alors, sélectionnez Browse Layouts.

Recherchez et sélectionnez la mise en page Dog Breeder.

Sélectionnez Use This Layout pour ajouter la mise en page à votre page.

Nous sommes maintenant prêts à concevoir.

Ajouter le module Fullwidth Header

Nous allons recréer la section héros à l’aide du module Fullwidth Header. Ajoutez une nouvelle section pleine largeur à la page, sous l’en-tête existant.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer Facilement et Gratuitement n'importe quel design de site Web ou blog avec un look professionnel. Arrêtez de payer cher pour un site internet que pouvez faire vous-même.

Ajoutez un module Fullwidth Header à la section.

module Fullwidth Header

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

Personnaliser le module Fullwidth Header

Ajouter du contenu

Ouvrez les paramètres du module et ajoutez le contenu suivant au module :

  • Title : Vétérinaire
  • Subtitle : DiviVet. Servir nos meilleurs amis
  • Button #1 : Tous les services
  • Button #2 : Prendre rendez-vous
  • Body : 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 une image d’en-tête.

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%: rgba(255,170,205,0.48)
  • 40%: rgba(110,66,255,0.24)
  • 87 % : rgba(124,239,255,0.71)
  • Gradient Type: Elliptical
  • Gradient Position : Right

Ensuite, sélectionnez l’onglet Background Mask et ajoutez un masque d’arrière-plan.

  • Mask Background : Corner Blob
  • Mask Color : #FFFFFF
  • Transform : verticale

Personnaliser le texte

Passez à l’onglet Design et modifiez les paramètres du titre

  • Title Font: Nunito
  • Title Font Weight: Ultra Bold
  • Font Style: TT (Majuscule)
  • Title Text Color : #a9cb6b
  • Text Size : 14px
  • Title Letter Spacing : 2px

Accédez à la section de Body Text et personnalisez la police.

  • Text Color: #000000
  • Body Text Size :
    • Desktop : 18px
    • Phone : 14px
  • Body Line Height : 1.8em

Consulter également : Divi : Comment personnaliser les icônes de panier et de recherche du module « Fullwidth Menu »

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

  • Subtitle Font : Nunito
  • Subtitle Font Weight : gras
  • Text Color : #000000

Enfin, modifiez la taille du text

  • Subtitle Text Size :
    • Desktop : 56px
    • Mobile : 32px
  • Subtitle Line Height : 1.2em

Personnaliser le bouton #1

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

  • Use Custom Styles For Button : YES
  • Button One Text Size : 14px

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

  • 58 % : #316EFF
  • 100 % : #1D2B60
  • Gradient Direction : 90deg

Voulez-vous vendre vos produits sur internet ?

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress et créez facilement votre boutique en ligne. Parfait pour les débutants.

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

  • Button One :
    • Border Width : 0px
    • Border Radius : 80px
    • Letter Spacing : 2px
    • Font : Nunito
    • Font Weight : Ultra Bold
    • Style : TT (Capitalized)
  • Show Button One Icon : NO

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

  • Button One Margin
    • Top : 200px
    • Bottom : 0px
  • Button One Padding :
    • Top : 16px
    • Bottom: 16px
    • Left : 2em
    • Right : 50em
  • Box Shadow : Voir Capture

Utilisez les paramètres responsifs pour définir différentes valeurs de marge et de remplissage sur les appareils mobiles.

  • Button One Margin-Top-Mobile : 25px
  • Button One Padding-Right-Mobile : 10em

Personnaliser le bouton #2

Tout d’abord, faites un clic droit sur le bouton #1 et cliquez sur Copy Button One Styles.

Ensuite, faites un clic droit sur le bouton deux et collez les styles du boutton #1.

Maintenant, nous pouvons personnaliser le bouton deux. Modifiez la couleur du texte.

  • Button Two Text Color: #121F60

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

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

Utilisez les paramètres responsifs pour ajuster le dégradé d’arrière-plan pour les appareils mobiles.

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

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

  • Button Two Margin :
    • Top: 0px
    • Bottom : 0px
    • Left : 30%
  • Button Two Padding :
    • Top : 16px
    • Bottom : 16px
    • Left : 48em
    • Right : 2em

Utilisez les paramètres responsifq pour définir différentes valeurs de marge et de remplissage pour la conception mobile.

  • Button Two Margin-Left-Mobile: 5%
  • Button Two Padding :
    • Left-Mobile: 35%
    • Right-Mobile: 5%

CSS personnalisé

Enfin, l’essentiel du travail de conception est effectué. Maintenant, nous devons ajouter du CSS personnalisé pour compléter la conception. Passez à l’onglet Advanced et ouvrez la section Custom CSS.

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é au titre. Nous définirons des valeurs différentes pour les vues de bureau et mobiles à l’aide des paramètres réactifs.

Pour ordinateur de bureau :

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

Pour mobile :

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

Enfin, ajoutez le CSS suivant au bouton un et au bouton deux.

white-space: nowrap;

Résultat final

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

Lire aussi : Divi : Comment créer une section membres de l’équipe sous forme de carrousel

comment créer une section Hero à l'aide du module Fullwidth Header de Divi
comment créer une section Hero à l'aide du module Fullwidth Header de Divi

Télécharger DIVI Maintenant !!!

Conclusion

Le module Fullwidth Header vous permet de créer facilement une belle section Héro pour annoncer vos services et dire à vos visiteurs de quoi parle votre site Web.

Les paramètres intégrés facilitent la personnalisation de chaque aspect de l’en-tête, et tout est au même endroit, donc pas besoin de basculer entre plusieurs modules pour construire votre section Hero.

Nous espérons que ce tutoriel vous inspirera pour vos prochains projets Divi. Si vous avez un quelconque souci ou des suggestions, retrouvons nous dans la section commentaires pour en discuter.

Vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.

Mais en attendant, partagez cet article sur vos différents réseaux sociaux.

%d blogueurs aiment cette page :