Comment créer des sections de héros époustouflantes avec Divi

Sections de héros ; ils servent à toutes sortes de fins. Ils sont la première chose que les visiteurs voient lorsqu'ils visitent votre site Web, ils montrent immédiatement le style de votre site Web et ils influencent la façon dont vos visiteurs se sentent et se comportent sur votre site. Nous sommes déjà habitués à toutes sortes de sections de héros, mais la plupart d'entre elles incluent une image de héros, un slogan et un appel à l'action. Il y a aussi d'autres possibilités, cependant. Dans cet article, nous vous montrerons une autre approche sur les sections de héros et nous la suivrons avec un exemple que vous pouvez recréer à l'aide de Divi.

Exemple

L'exemple que nous allons vous montrer comment recréer avec Divi ressemble à ceci sur desktop :

Et comme ça sur mobile :

Comment faire ressortir votre section de héros

Avant de vous montrer comment recréer l'exemple, examinons certains des facteurs qui différencient cette section de héros des autres.

1. Logo large, descriptif et centralisé

La première chose que nous utilisons dans notre exemple, pour aider à faire ressortir notre section héros, est un format d'en-tête centré au lieu du format par défaut. Parallèlement à cela, nous utilisons également un menu transparent qui aidera à chevaucher les éléments de menu avec la conception de la section des héros. Le lien entre le logo, le menu et le site Web est plus clair lors de l'utilisation d'un fond transparent car il y a une division de moins dans la section héros.

2. Concentrez le contenu écrit

Une autre chose que vous pouvez faire pour que votre section héros se démarque est de concentrer le contenu écrit que vous avez. De cette façon, vous attirerez l'attention des visiteurs sur un endroit de l'écran, ce qui augmentera leurs chances de le lire. Si, d'un autre côté, vous divisez le contenu écrit dans toute votre section de héros, les changements sont plus susceptibles de manquer une partie du message que vous essayez de faire passer.

3. Mettez en évidence les propositions de vente uniques

Habituellement, une section de héros contient des modules de texte normaux qui partagent le slogan d'un produit ou d'une entreprise. Cependant, vous pouvez également utiliser les modules Blurb dans la section héros. Ces modules Blurb sont parfaits si vous souhaitez partager immédiatement les propositions de vente uniques de votre produit ou service. En plus de cela, vous pouvez également choisir si vous souhaitez ou non y inclure des appels à l'action immédiatement. Dans notre exemple, ces appels à l'action sont intégrés aux modules de présentation eux-mêmes.

4. Nettoyer l'image du produit

Pour couronner le tout et pour équilibrer le contenu écrit que vous avez fourni, nous vous recommandons d'utiliser une image de produit propre comme image d'arrière-plan de votre section héros. Vous voulez que votre image de héros soit aussi qualitative et explicite que possible sans prendre en charge toute la section des héros.

Comment créer des sections de héros époustouflantes avec Divi

Abonnez-vous à notre chaîne Youtube

Recréer un exemple avec Divi

Maintenant que nous avons abordé le côté théorique, il est temps de commencer à le recréer.

Format d'en-tête

La première chose que vous devrez faire est de choisir « Centré » comme style d'en-tête en accédant à votre tableau de bord WordPress > Personnaliser > En-tête et navigation > Format d'en-tête > Et choisissez « Centré » comme style d'en-tête ».

Paramètres de la barre de menus principale

Ensuite, revenez à En - tête et navigation > Barre de menu principal > Et effectuez les ajustements suivants :

• Hauteur du menu : 211 pixels
• Hauteur maximale du logo : 100 pixels
• Taille du texte : 16
• Espacement des lettres : 2
• Police : Lato Light
• Style de police : majuscule
• Couleur du texte : #FFFFFF
• Couleur du lien actif : #FFFFFF
• Couleur d'arrière-plan : rgba(255,255,255,0)
• Couleur d'arrière-plan du menu déroulant : rgba(255,255,255,0)

Ajouter une nouvelle section

Une fois cela fait, ajoutez une nouvelle page, activez le Divi Builder, activez Visual Builder et ajoutez une nouvelle section standard.

Fond dégradé

Utilisez l'arrière-plan dégradé suivant pour cette section :

• Première couleur : #e2e2e2
• Deuxième couleur : rgba (255,255,255,0)
• Type de dégradé : Linéaire
• Direction du gradient : 180 deg
• Position de départ : 40 %
• Position finale : 40 %

Image de fond

Ensuite, téléchargez l'image d'arrière-plan et choisissez « Multiplier » comme mélange d'images d'arrière-plan.

Ajouter une ligne à deux colonnes

Couleur de l'arrière plan

Ajoutez une ligne à deux colonnes à la section que vous venez de créer et utilisez « #b7afa1 » comme couleur d'arrière-plan.

Colonne 1 Fond dégradé

Faites défiler vers le bas et utilisez le fond dégradé suivant pour la première colonne :

• Première couleur : rgba (255,255,255,0.43)
• Deuxième couleur : rgba (255,255,255,0)
• Type de dégradé de la colonne 1 : radial
• Colonne 1 Direction du dégradé : en haut à gauche
• Position de départ de la colonne 1 : 49 %
• Position finale de la colonne 1 : 49 %

Colonne 2 Fond dégradé

Et utilisez le fond dégradé suivant pour la deuxième colonne :

• Première couleur : rgba (255,255,255,0.43)
• Deuxième couleur : rgba (255,255,255,0)
• Type de dégradé de la colonne 2 : radial
• Direction radiale de la colonne 2 : en bas à droite
• Position de départ de la colonne 2 : 49 %
• Position finale de la colonne 2 : 49 %

Dimensionnement

Accédez à l'onglet Conception, activez l'option "Utiliser la largeur de gouttière personnalisée" et utilisez "1" pour la largeur de la gouttière.

Espacement

Ouvrez la sous-catégorie Espacement et utilisez le remplissage et la marge suivants :

• Rembourrage supérieur : 0 pixels (ordinateur de bureau), 20 pixels (tablette et téléphone)
• Rembourrage droit : 25 px
• Rembourrage inférieur : 20px
• Remplissage gauche : 25px
• Marge inférieure : 200px

Premier module de présentation

Activer l'icône

Ajoutez un module Blurb à la première colonne de la ligne, activez l'option "Utiliser l'icône" et choisissez une icône.

Paramètres des icônes

Ensuite, accédez aux paramètres de conception et apportez les modifications suivantes à la sous-catégorie Image et icône :

• Couleur de l'icône : #FFFFFF
• Placement des images/icônes : à gauche
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône : 40 px

Paramètres de texte d'en-tête

Ensuite, faites en sorte que les paramètres suivants s'appliquent à la sous-catégorie Texte d'en-tête :

• Police d'en-tête : Roboto Light
• Style de police : gras
• Taille de la police d'en-tête : 25px
• Couleur du texte de l'en-tête : #FFFFFF
• Hauteur de la ligne d'en-tête : 1,5 em

Paramètres du corps du texte

La sous-catégorie Corps de texte nécessitera les modifications suivantes :

• Police de caractère : Lato Light
• Taille du corps de la police : 13 px
• Couleur du corps du texte : #FFFFFF

Dimensionnement

Ensuite, utilisez '300px' comme largeur de contenu.

Espacement

Enfin, utilisez la marge et le remplissage suivants pour le module Blurb :

• Marge supérieure : -50px (ordinateur de bureau), 0px (tablette et téléphone)
• Rembourrage supérieur : 100 pixels
• Rembourrage droit : 10px
• Rembourrage inférieur : 30px
• Rembourrage gauche : 10px

Cloner le module Blurb et le placer dans la deuxième colonne

Continuez en clonant le module Blurb précédemment créé et en le plaçant également dans l'autre colonne.

Changer la couleur d'arrière-plan

La première chose que vous devrez changer dans ce module Blurb cloné est la couleur d'arrière-plan. Changez-le en 'rgba(89,60,31,0,5)'.

Changer l'icône

La prochaine et dernière chose que vous devrez changer est l'icône dans l'onglet contenu.

Extra: Ajoutez la nouvelle option Box Shadow de Divi à Row

Avec la récente mise à jour, vous pouvez désormais également ajouter des ombres de boîte aux lignes, modules et sections. Pour cet exemple, nous allons ajouter une ombre de boîte à la ligne. Cela aidera à créer de la profondeur et à mettre en valeur le contenu écrit dans notre section héros.

• Position horizontale de l'ombre de la boîte : -3px
• Position verticale de l'ombre de la boîte : 31 px
• Force du flou d'ombre de la boîte: 79px
• Force de propagation de l'ombre de la boîte: -4px
• Couleur de l'ombre : #424242
• Position de l'ombre de la boîte : ombre extérieure

Résultat

Prenons un autre résultat rapide sur le résultat que vous devriez pouvoir obtenir sur le bureau après avoir suivi ce post :

Et sur mobile :

Dernières pensées

Dans cet article, nous vous avons montré une approche différente des sections de héros. Nous vous avons donné quelques conseils et élaboré ces conseils en vous montrant comment recréer un exemple que nous avons réalisé en amont avec Divi. Si vous avez des questions ou des suggestions ; assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image en vedette par Ellagrin / shutterstock.com