5 styles de modules d'en-tête Divi créatifs que vous pouvez obtenir à l'aide des paramètres intégrés

Prêt à l'emploi, le module d'en-tête Divi peut créer des designs d'en-tête saisissants avec seulement quelques ajustements. Cela en fait un module extrêmement populaire lors de la conception des en-têtes de votre site Web dans Divi. Et avec un peu de réflexion originale, vous pouvez créer des designs vraiment uniques en utilisant uniquement les paramètres intégrés (pas de CSS personnalisé). Donc, pour ceux d'entre vous qui souhaitent explorer de nouvelles conceptions d'en-tête, je vais vous montrer 5 styles de module d'en-tête Divi qui pourraient vous inspirer.

Prendre plaisir!

Aperçu des 5 styles de modules d'en-tête Divi

Style n°1 : le dégradé abstrait

Commencez à concevoir le style n°1

Style #2 : La triple menace

Commencez à concevoir le style #2

Style #3 : Le cadre arrondi

Commencez à concevoir le style #3

Style # 4: Le gaucher mélangé

Commencez à concevoir le style n°4

Style #5 : Le type à grande échelle

Commencez à concevoir le style #5

Ce dont vous avez besoin pour commencer

Pour commencer, vous aurez besoin du thème Divi. J'utiliserai le Divi Builder pour créer les designs sur le front-end. Vous aurez également besoin de quelques images pour terminer le didacticiel. N'oubliez pas que vous pouvez toujours importer les images d'une mise en page prédéfinie. En fait, pour ce didacticiel, j'utiliserai des images du pack de mise en page de l'entreprise de nettoyage, du pack de mise en page Business Coach et du pack de mise en page Web Freelancer.

Commençons!

Abonnez-vous à notre chaîne Youtube

Style #1 : Le Gadient abstrait

Cette première conception de module d'en-tête Divi est une conception simple et polyvalente qui utilise des arrière-plans dégradés de manière créative.

Pour commencer, ajoutez une nouvelle section pleine largeur avec un module d'en-tête pleine largeur.

Mettez à jour le contenu des paramètres d'en-tête avec un nouveau titre et une image d'en-tête.

Mettez ensuite à jour les paramètres de conception comme suit :

Police du titre : Lato
Taille du texte du titre : 6vw
Couleur d'arrière-plan du bouton 1 : #0c71c3
Largeur de la bordure du bouton Un : 0px
Rembourrage personnalisé : haut 8vw, bas 8vw

Avant d'ajouter notre arrière-plan de section, nous devons d'abord rendre l'arrière-plan du module d'en-tête transparent et lui donner un dégradé personnalisé pour créer notre forme de cercle dans le coin inférieur droit. Revenez à l'onglet contenu et mettez à jour l'arrière-plan comme suit :

Couleur d'arrière-plan : rgba(255,255,255,0)
Couleur d'arrière-plan du dégradé de gauche : #0096eb
Dégradé d'arrière-plan à droite : rgba(255,255,255,0)
Type de dégradé : Radial
Direction radiale : en bas à droite
Position de départ : 25 %
Position finale : 0%

Enregistrer les paramètres

Ensuite, nous devons ajouter nos conceptions d'arrière-plan à la section qui se trouvera derrière notre module d'en-tête. Pour ce faire, ouvrez les paramètres de la section et mettez à jour les éléments suivants :

Couleur d'arrière-plan du dégradé de gauche : #0096eb
Dégradé d'arrière-plan à droite : #007ea1
Type de dégradé : Radial
Direction radiale : en haut à gauche
Position de départ : 43 %
Position finale : 0%

Conseil de conception : si vous recherchez des couleurs à essayer pour vos propres dégradés d'en-tête, je vous suggère de tirer les couleurs utilisées dans l'image/le graphique d'en-tête que vous utilisez peut-être.

Pour ajouter un autre élément de design subtil à notre arrière-plan abstrait, nous pouvons ajouter un séparateur de section supérieure et inférieure. Pour ce faire, allez dans l'onglet design et ajoutez les séparateurs suivants :

Style de séparateur supérieur : voir capture d'écran
Couleur du séparateur supérieur : rgba(150,210,210,0.2)
Hauteur du diviseur supérieur : 8vw
Répétition horizontale du diviseur supérieur : 0,7 x
Haut diviseur Flip: Vertical

Style de séparateur inférieur : voir capture d'écran
Couleur du diviseur inférieur : rgba (150,210,210,0.2)
Hauteur du diviseur inférieur : 10vw
Répétition horizontale du diviseur inférieur : 0,5 x
Basculement du diviseur inférieur : vertical

C'est ça! Découvrez la conception finale.

Style #2 : La triple menace

Ce prochain style de module d'en-tête Divi comprend trois appels à l'action, y compris les deux boutons et l'icône de défilement vers le bas. Faire correspondre les icônes des boutons avec l'icône de défilement aide à l'aspect symétrique de la conception. Et les diviseurs de section créent un joli design triangulaire abstrait qui conduit les utilisateurs vers le bas de la page.

Créez une nouvelle section pleine largeur avec un en-tête pleine largeur.

Mettez ensuite à jour le texte du titre, du texte du lien du bouton n°1 et du texte du lien du bouton n°2.

Ensuite, mettez à jour le reste de la conception comme suit :

Couleur d'arrière-plan : #1a1844
Orientation du texte et du logo : Centre
Icône : voir capture d'écran
Taille de l'icône de défilement vers le bas : 20 px
Police du titre : Lato
Poids de la police du titre : lourd
Taille du texte du titre : 5vw (ordinateur de bureau), 40 px (tablette), 30 px (smartphone)
Hauteur de la ligne de titre : 1,3 em
Couleur d'arrière-plan du bouton deux : #fe4943
Largeur de la bordure du bouton deux : 0px
Icône du bouton deux : flèche vers la droite (voir capture d'écran)
Couleur d'arrière-plan du bouton 1 : #fe4943
Largeur de la bordure du bouton Un : 0px
Bouton One Icon : flèche vers la gauche (voir capture d'écran)
Placement de l'icône du bouton 1 : gauche
Rembourrage personnalisé : 10vw en haut, 10vw à gauche

Maintenant, tout ce que nous avons à faire est d'ajouter nos diviseurs de section pour créer le design d'arrière-plan triangulaire. Ouvrez les paramètres de la section et mettez à jour les paramètres de conception suivants :

Style de séparateur supérieur : voir capture d'écran
Couleur du séparateur supérieur : rgba (255,255,255,0.3)
Hauteur du diviseur supérieur: 45vw

Style de séparateur supérieur : voir capture d'écran
Couleur du séparateur supérieur : rgba (255,255,255,0.1)
Hauteur du diviseur supérieur: 45vw

Voyons maintenant la conception finale :

Astuce de conception bonus : Ajustements mobiles pour les boutons

Je sais que j'ai dit pas de CSS personnalisé, mais c'est un épanouissement supplémentaire non essentiel que je pensais que certains d'entre vous apprécieraient. Vous remarquerez peut-être que pour les en-têtes avec deux boutons, le deuxième bouton a une marge gauche qui fait oublier le design sur les smartphones. Pour un design plus propre sur les smartphones, vous pouvez ajouter un extrait de CSS personnalisé aux paramètres de votre page afin de donner aux boutons la même largeur et sans la marge du deuxième bouton.

Ouvrez les paramètres de la page dans le Divi Builder et ajoutez le CSS suivant

@media (max-width: 550px){
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button {
  display: block;
  width: 100%;
margin-left: 0px;    
  }
}

Maintenant, regardez le design sur mobile.

Style #3 : Le cadre arrondi

Cette conception arrondie du module d'en-tête Divi est un excellent moyen de cadrer votre image d'arrière-plan et votre contenu d'en-tête pour mettre encore plus l'accent sur votre appel à l'action. Tout ce qu'il faut, c'est quelques ajustements au rayon de la bordure de votre en-tête, une ombre de boîte et un espacement personnalisé.

Pour commencer, créez une nouvelle section pleine largeur avec un en-tête pleine largeur.

Tout d'abord, mettons à jour les éléments de contenu de l'en-tête en ajoutant le titre, le texte du lien du bouton n°1 et une image de logo.

Ajoutez ensuite une image d'arrière-plan suffisamment grande pour couvrir la hauteur et la largeur de l'en-tête. Comme ce sera un en-tête arrondi, essayez d'utiliser une image avec la même hauteur et la même largeur (comme 1000px par 1000px).

Mettez ensuite à jour le reste des paramètres de conception comme suit :

Enregistrer les paramètres.

Ensuite, ouvrez les paramètres de la section pour ajouter la couleur d'arrière-plan et l'espacement comme suit :

Couleur d'arrière-plan : #000000
Rembourrage personnalisé : haut 5vw, bas 5vw

Vérifiez maintenant la conception finale.

Le gaucher mélangé

Cette conception d'en-tête a quelques caractéristiques de conception uniques. Le module d'en-tête est en fait redimensionné et aligné à gauche pour exposer la moitié droite de l'image d'arrière-plan de la section. Et le contenu du module d'en-tête a un effet de fusion qui expose l'image d'arrière-plan à travers le contenu. Pour y parvenir, vous aurez besoin du bon type d'image d'arrière-plan pour votre section. En règle générale, vous souhaiterez que l'image ait des éléments plus sombres afin que le contenu mélangé soit plus visible.

Commençons.

Tout d'abord, créez une nouvelle section pleine largeur avec un en-tête pleine largeur.

Avant de commencer à mettre à jour nos styles d'en-tête, passez d'abord aux paramètres de la section et ajoutez l'arrière-plan suivant :

Ajoutez une image d'arrière-plan avec le point focal de l'image à droite.

Couleur d'arrière-plan du dégradé gauche : rgba(0,0,0,0.54)
Dégradé d'arrière-plan à droite : rgba(255,255,255,0)
Direction du gradient : 90 degrés
Direction radiale : en bas à droite
Position de départ : 50 %
Position finale : 0%
Placer le dégradé au-dessus de l'image d'arrière-plan : OUI

Le but du dégradé est de rendre le côté gauche de l'image plus sombre afin que lorsque nous mélangeons le contenu du module d'en-tête, il soit plus lisible. De plus, vous ne pourrez pas voir l'arrière-plan de la section pour le moment car la couleur d'arrière-plan par défaut de l'en-tête est toujours active. Nous allons changer cela ensuite.

Ouvrez les paramètres d'en-tête et mettez à jour le contenu avec un titre, le texte du lien du bouton n ° 1 et un logo sombre.

Changez maintenant la couleur de fond en blanc.

Ensuite, mettez à jour les éléments suivants :

Poids de la police du titre : ultra gras
Couleur du texte du titre : #000000
Texte du titre Taille : 8vw
Hauteur de la ligne de titre : 1,1 em
Bouton ONUn texte Taille: 2.7vw
Bouton One Couleur du texte : #000000
Bouton Un Bordure Largeur: 0.2em
Couleur de la bordure du bouton 1 : #edf000
Poids de la police : Ultra gras
Largeur : 50 % (ordinateur de bureau, tablette et smartphone)
Mode de fusion : écran

Voici la conception finale.

Style #5 : Le type à grande échelle

Cette conception de module d'en-tête Divi présente un moyen simple et efficace de créer un texte volumineux qui s'adapte à la fenêtre du navigateur sans compromettre la conception. Puisque nous utilisons un module d'en-tête pleine largeur, nous devrons étendre un peu notre zone de contenu. Ensuite, nous devons utiliser l'unité de longueur vw pour dimensionner notre texte. Cette conception serait idéale pour les en-têtes de section.

Pour commencer, créez une nouvelle section pleine largeur avec un en-tête pleine largeur.

Dans les paramètres d'en-tête pleine largeur, mettez à jour les éléments suivants :

Titre : Consultation
Texte du sous-titre : Services
Texte du lien du bouton n° 1 : Commencer maintenant

Supprimez le texte par défaut dans la zone de contenu.

Ajoutez ensuite une image de logo clair.

Ensuite, nous allons augmenter la largeur maximale par défaut de notre conteneur d'en-tête afin de créer plus d'espace horizontal pour votre en-tête. Pour ce faire, allez dans l'onglet avancé et ajoutez le CSS suivant sous Conteneur d'en-tête :

width: 100% ;
max-width: 100% ;

Mettez maintenant à jour le reste des paramètres de conception comme suit :

Ajoutez une image de fond.
Orientation du texte et du logo : Centre
Police du titre : Cuprum
Poids de la police du titre : gras
Style de police du titre : TT
Couleur du texte du titre : #bfbfbf
Texte du titre Taille : 10vw
Espacement des lettres du titre : 0,1 em
Police du sous-titre : Cuprum
Alignement du texte du sous-titre : à droite (cela permet de centrer le texte avec l'espacement des lettres)
Taille du texte du sous-titre : 3vw
Espacement des lettres des sous-titres : 7.8vw
Largeur de la bordure du bouton Un : 0px
Police du bouton One : Cuprum
Bouton One Icon : voir capture d'écran

L'astuce consiste à utiliser l'unité de longueur vw pour le texte. Ajustez ensuite l'espacement des lettres du sous-titre pour l'aligner le mieux possible avec le texte du titre.

Afin de maximiser notre espacement horizontal, nous devons ajouter une largeur personnalisée à notre contenu d'en-tête comme suit :

Largeur du contenu : 80 % ;

Même si c'est moins que la valeur par défaut de 100 %, la modification du paramètre remplacera la valeur par défaut et s'ajustera avec le css personnalisé que nous avons ajouté précédemment.

Enfin, ajoutez une ombre de boîte pour terminer la conception :

Box Shadow : voir capture d'écran
Force du flou de l'ombre de la boîte : 0px
Force de propagation de l'ombre de la boîte: 60px

Découvrez maintenant le résultat final.

Transformez-les en en-têtes plein écran !

Les conceptions ci-dessus peuvent facilement être créées en plein écran en cliquant sur un bouton. Il s'agit d'une fonctionnalité puissante du module d'en-tête pleine largeur. Accédez simplement aux paramètres de conception de l'en-tête et sélectionnez l'option "Créer le plein écran".

En outre, vous devrez supprimer le rembourrage personnalisé pour ces conceptions afin que l'en-tête s'intègre parfaitement dans la fenêtre du navigateur.

Dernières pensées

Ce ne sont là que quelques-unes des possibilités de conception d'en-tête disponibles avec le module d'en-tête Divi. Et expérimenter avec tous les paramètres de conception peut être très amusant. Si quoi que ce soit, j'espère que ces exemples serviront de petite inspiration pour votre prochain projet.

J'ai hâte de vous entendre dans les commentaires ci-dessous.

À votre santé!