Comment ajouter une étiquette de coin « nouvelle » ou « en vedette » à un élément de menu dans votre en-tête Divi personnalisé

Lors de la création de l'en-tête de votre site Web, porter une attention particulière au comportement de vos visiteurs peut aider à augmenter les taux de clics. Non seulement votre en-tête doit être beau, mais il doit également aider à guider les visiteurs vers les pages les plus importantes de votre site Web. Une technique fréquemment utilisée consiste à ajouter un appel à l'action dans votre en-tête global, mais ce n'est pas la seule option disponible. Vous pouvez également opter pour une étiquette d'angle sur les éléments de menu que vous souhaitez mettre en valeur. Dans ce didacticiel, nous allons vous montrer comment ajouter une étiquette « en vedette » ou « nouvelle » à des éléments de menu spécifiques. Ces étiquettes de coin aideront à mettre en valeur les éléments de menu de la liste, ce qui augmente le changement de vos visiteurs curieux et cliquant dessus. Vous pourrez également télécharger le modèle d'en-tête global !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, examinons rapidement le concept du didacticiel sur différentes tailles d'écran.

Téléchargez GRATUITEMENT le modèle d'en-tête global

Pour mettre la main sur le modèle d'en-tête global gratuit, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

1. Ajouter des étiquettes aux éléments de menu WordPress

Aller aux menus dans l'apparence

La première partie de ce tutoriel est consacrée à la configuration des étiquettes dans votre menu WordPress. Pour ce faire, accédez à votre tableau de bord WordPress > Menus > Ouvrez le menu principal que vous utilisez ou créez-en un nouveau.

Ajouter une étiquette à l'élément de menu en vedette

Ensuite, nous ajouterons une étiquette vedette à un élément de menu de notre choix en plaçant les balises HTML d'étiquette devant l'élément de menu.

• <label class="menu-label featured-label">Featured</label>

  Prestations de service

Ajouter une étiquette à un nouvel élément de menu

Nous ferons la même chose pour un autre élément de menu de notre choix et modifierons la classe CSS à l'intérieur des balises ainsi que la copie de l'étiquette.

• <label class="menu-label new-label">New</label>

  Cours gratuits

2. Accédez à Divi Theme Builder

Accédez à Divi Theme Builder et ajoutez un en-tête global

Maintenant que les étiquettes ont été mises en place, il est temps de passer à Divi. Accédez au générateur de thèmes Divi de votre site Web et cliquez sur « Ajouter un en-tête global ».

Commencez à construire à partir de zéro

Ensuite, sélectionnez « Build Global Header » pour être redirigé vers l'éditeur de modèles.

3. Construire un en-tête global

Paramètres de section

Couleur de l'arrière plan

Une fois dans l'éditeur de modèles, vous remarquerez une section. Ouvrez cette section et ajoutez une couleur d'arrière-plan. La conception d'en-tête que nous allons créer va bien avec le Tutor Layout Pack, mais n'hésitez pas à créer n'importe quelle conception d'en-tête que vous souhaitez, tant que vous y incluez le module de code (plus tard).

• Couleur de fond : #2a3749

Espacement

Passez à l'onglet de conception de la section et supprimez tous les rembourrages supérieur et inférieur par défaut dans les paramètres d'espacement.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Visibilité

En raison du chevauchement que nous ajouterons à notre ligne (comme vous pouvez le remarquer dans l'aperçu), nous devrons rendre les débordements de la section visibles.

• Débordement horizontal : Visible
• Débordement vertical : visible

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Couleur de l'arrière plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne et appliquez une couleur d'arrière-plan blanche.

• Couleur d'arrière-plan : #FFFFFF

Dimensionnement

Passez à l'onglet Conception et modifiez les paramètres de dimensionnement en conséquence :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Nous appliquerons également des valeurs de remplissage personnalisées aux paramètres d'espacement.

• Rembourrage supérieur : 25px
• Rembourrage inférieur : 25px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Frontière

Avec quelques coins arrondis.

• Tous les coins : 6px

Boîte ombre

Et une subtile ombre de boîte.

• Position verticale de l'ombre de la boîte : 16px
• Couleur de l'ombre : rgba(0,0,0,0.07)

Transformer Traduire

Ensuite, nous allons repositionner la ligne à l'aide des paramètres de conversion de transformation dans l'onglet Conception.

• Transformer traduire à droite : 50px

Débordements

Pour nous assurer que nos listes déroulantes apparaissent sur des tailles d'écran plus petites, nous allons compléter les paramètres de ligne en définissant les débordements sur visibles.

• Débordement horizontal : Visible
• Débordement vertical : visible

Ajouter un module de menu à la colonne

Sélectionnez le menu

Il est temps d'ajouter le module de menu. Sélectionnez le menu que vous avez modifié dans la première partie de ce didacticiel.

Télécharger le logo

Téléchargez un logo ensuite.

Paramètres du texte du menu

Ensuite, passez à l'onglet Conception et modifiez les paramètres du texte du menu comme suit :

• Police du menu : PT Sans
• Couleur du texte du menu : #000000
• Taille du texte du menu : 16px
• Alignement du texte : à droite

Paramètres du menu déroulant

Modifiez également la couleur de la ligne du menu déroulant.

• Couleur de la ligne du menu déroulant : #007aff

Icônes

Continuez en changeant la couleur de l'icône du menu hamburger dans les paramètres des icônes.

• Couleur de l'icône du menu Hamburger : #007aff

Dimensionnement

Et complétez les paramètres du module en attribuant une largeur maximale de logo aux paramètres de dimensionnement.

• Largeur maximale du logo : 40 %

Ajouter un module de code à la colonne

Une fois que vous avez terminé l'apparence générale de votre module de menu, continuez en ajoutant un module de code juste en dessous.

Ajouter un code CSS

Le code CSS suivant nous aidera à styliser les étiquettes de menu individuellement et à créer un design réactif :

<style>
 
.menu-label {
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;   
border-radius: 5px;    
font-size: 10px;  
padding: 5px 10px;  
}  
  
.featured-label {
background-color: #F9654D;
}
.new-label {
background-color: #007AFF;
}
 
.et_pb_menu .et_pb_menu__menu, 
.et_pb_menu .et_pb_menu__menu>nav, 
.et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu>nav>ul {
width: 100% !important;
}

.et_pb_menu .et_pb_menu__menu>nav>ul>li
{
padding-left: 15px !important;
padding-right: 15px !important;
}

@media all and (min-width: 980px) {
.menu-label {  
position: absolute;
top: -10px;  
padding: 8px 15px;
}

}
@media all and (max-width: 980px) {  
.menu-label {
position: relative;
float: right;
font-size: 12px;  
padding: 5px 20px;   
}
}
  
</style>

4. Enregistrez toutes les modifications apportées au générateur de thèmes et prévisualisez le résultat

Une fois que vous avez terminé la conception de l'en-tête, assurez-vous d'enregistrer toutes les modifications apportées à Divi Theme Builder avant de visualiser le résultat sur votre site Web !

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Dernières pensées

Dans cet article, nous vous avons montré comment mettre en évidence des éléments de menu spécifiques dans votre en-tête global construit par Divi. Plus précisément, nous avons inclus des étiquettes de coin dans notre menu WordPress, qui sont affichées dans un module de menu. C'est un excellent moyen de mettre en évidence différents éléments de menu dans votre menu sans créer un parcours de navigation écrasant. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.