Tu t’es déjà demandé comment tu allais insérer TOUS tes liens dans le menu de navigation de ton site WordPress ? Nous oui 😛 Et on a trouvé la solution : le Mega Menu de Divi ! Adieu le menu à rallonge qui déborde et fait passer ta barre de navigation sur 2 lignes ou plus 😉 Avec un peu d’organisation et ce tutoriel (adressé à tous, et parfaitement accessible aux débutants), tu vas pouvoir créer un menu complet, canon, avec une hiérarchie visible par tes visiteurs au premier coup d’œil ! Sympa non ?

C’est quoi un méga menu, au fait ?

Très bonne question 😛 Et pour y répondre, rien de plus simple qu’une démonstration en image !

Un menu classique avec Divi

Dans un menu dit “classique”, les sous-menus apparaissent les uns en dessous des autres au survol, comme dans l’exemple ci-dessous :

Menu classique créé avec Divi pour WordPress

Un mega menu avec Divi

Le même menu qu’au-dessus mais version “Mega Menu“, réalisé avec Divi :

Mega menu créé avec le thème Divi pour WordPress

Ici on voit bien que les sous-menus sont rangés les uns à côté des autres et les sous-menus qu’ils contiennent sont positionnés juste en dessous. L’ensemble des sous-menus est visible d’un seul coup d’œil : ici par exemple, pas besoin de repasser la souris sur “Frais” pour voir toutes les catégories que ce sous-menu contient !

 

Comment intégrer un mega menu à ma barre de navigation

C’est le moment du tutoriel ! Simple, rapide, efficace : je t’invite à te munir de ton identifiant et de ton mot de passe et à connecter à ton tableau de bord wordpress pour commencer 🙂

Tout d’abord, rendez-vous dans le menu latéral gauche. Passe ta souris sur l’onglet “Apparence”, puis clique sur “Menus” :

 

Gérer ses menus sous WordPress

Étape 1 : Construire son menu

Assure-toi que tu travailles bien sur ton Menu Principal (celui que contient ta barre de navigation). Pour cela il suffit de vérifier que le bon menu est bien sélectionné (et de sélectionner le bon, si ce n’est pas le cas) :  

Modifier les menus sur WordPress

Le mieux est d’avoir réfléchi la hiérarchie du site auparavant. Tu dois savoir comment tu veux organiser ton menu principal.

Pour construire un menu comme celui présenté plus haut, il faut compter au moins 3 niveaux de liens :

Liens de 1er niveau

Il s’agit des liens de menu principaux, ceux qui sont visibles au premier coup d’œil, et constituent ta “barre de navigation“.

 

Barre de navigation WordPress avec les liens de premier niveau

Si ce n’est pas déjà fait, tu peux donc ajouter les liens de premier niveau à ton menu.

Ajouter des liens à mon menu wordpress

Pour ceux qui ne sauraient pas encore faire, il suffit de sélectionner dans l’encart de gauche les pages (cela peut aussi se faire avec des articles, des catégories, des liens personnalisés, etc.) que tu souhaites voir apparaître dans ta barre de navigation. 

Ajouter des liens à mon menu WordPress

Ici (voir la capture d’écran ci-contre), j’ai coché les 5 pages principales que je veux ajouter à mon menu. Je clique ensuite sur “Ajouter”, et mes pages apparaissent sous forme d’étiquettes dans l’encart de droite (voir la capture d’écran ci-dessous).

 

Structure d'un menu WordPress

Par glisser-déposer, tu peux organiser tes liens de menu dans l’ordre que tu souhaites. Il suffit de cliquer sur une étiquette, et de la faire glisser au dessus ou en dessous d’une autre jusqu’à obtenir l’ordre voulu 😉

Une fois fait, n’oublie pas de cliquer sur le bouton “Enregistrer le menu“.

 

Liens de 2ème niveau (sous-menus)

Il s’agit des sous-menus directs. Dans notre exemple, ce sont tous les sous-menus du lien “Nos produits”.

Si ce n’est pas déjà fait, tu peux donc ajouter les liens de 2ème niveau à ton menu (si tu ne rappelles plus comment ajouter ces liens, je t’invite à remonter légèrement cet article sur le chapitre “Ajouter des liens à mon menu wordpress” ;).

Une fois fait, tu peux ranger tes liens de 2ème niveau (qu’on appelle aussi “sous-menus“) sous le lien de 1er niveau auquel ils appartiennent. Pour cela, il suffit de glisser-déposer les étiquettes sous le lien visé en les plaçant légèrement en décalé comme dans la capture d’écran animée ci-dessous :

 

Comment créer des sous-menus sur WordPress

Enfin, on n’oublie pas d’enregistrer en cliquant sur le bouton bleu “Enregistrer le menu” 😉

 

Liens de 3ème niveau (sous-menus)

Il s’agit des sous-menus d’un sous-menu (là, il faut suivre un peu 😉 ).  Dans notre exemple, nous allons ajouter tous les liens du sous-menu “Frais”.

Tu peux donc toi aussi ajouter les liens de 3ème niveau à ton menu (si tu ne rappelles plus comment ajouter ces liens, je t’invite à remonter légèrement cet article sur le chapitre “Ajouter des liens à mon menu wordpress” 😉 ).

Une fois fait, tu peux ranger tes liens de 3ème niveau sous le lien de 2ème niveau auquel ils sont reliés. Pour cela, même opération que précédemment : il suffit de glisser-déposer les étiquettes sous le lien visé en les plaçant légèrement en décalé comme dans la capture d’écran animée ci-dessous :

 

Comment créer des sous-menus avec WordPress

Une fois que tu as ajouté tous les liens de 3ème niveau dont tu as besoin, tu peux cliquer sur “Enregistrer le Menu” et aller voir le résultat sur une page de ton site. Pour nous, ça donne ça :

 

 

Menu classique avec le thème Divi pour WordPress

C’est encore un menu classique, mais tous nos liens de menu sont prêts. Il n’y a plus qu’à transformer ce menu classique en mega menu !

Étape 2 : Transformer son menu classique en mega menu

Retour dans le tableau de bord wordpress “Apparence > Menu”.

Il va maintenant falloir ajouter une classe css pour indiquer au sous-menu qu’on veut le voir prendre le comportement d’un mega menu.

Surtout pas de panique, c’est un jeu d’enfant 😉 

Activer les Classes CSS pour les éléments du menu

Il faut cependant activer une option qui est masquée par défaut. Pour cela, ouvre le menu “Options de l’écran” qui se trouve tout en haut de la page :

 

Options de l'écran WordPress

 

Sous “Afficher les propriétés avancées du menu”  se trouve une case à cocher “Classes CSS“. Pour activer l’option, il faut la sélectionner : 

 

Activer les classes CSS dans WordPress

Ajouter la classe css “mega-menu”

Maintenant, il n’y a plus qu’à ajouter la classe CSS “mega-menu” aux liens de 2ème niveau pour leur indiquer qu’ils doivent se comporter comme des mega menus. Dans notre exemple, on ajoute la classe sur l’élement “Nos produits” (puis sur tous les liens de 2ème niveau qui contiennent des sous-menus) : on clique sur la petite flèche en haut à gauche de l’étiquette pour afficher les options de l’élément, et on remplit le champ “Classes css” :

 

Ajout d'une classe CSS "mega-menu"

On n’oublie pas d’enregistrer en cliquant sur le bouton “Enregistrer le menu“.

On peut maintenant admirer le résultat sur une page du site 😉

 

Mega menu créé avec Divi sans CSS

Notre mega menu est là ! On peut l’embellir encore plus en rajoutant un peu de CSS, histoire de rendre les liens de 2ème niveau plus visibles et d’espacer un peu tout ça 🙂

Bonus : un peu de CSS pour embellir son mega menu

Retour dans le tableau de bord wordpress : “Apparence > Personnaliser”.

 

Personnaliser son thème Divi

On atterit sur la page de personnalisation du thème. On veut ajouter un peu de CSS, il faut donc se rendre dans l’onglet “CSS Additionnel” qui se situe tout en bas du menu :

 

Personnaliser son thème enfant Divi

Copie-colle le CSS suivant dans le partie appropriée, puis clique sur “Publier” tout en haut :

 

/****mega menu****/
/*on souligne les liens de 2ème niveau et on met la police en gras*/
 #top-menu li.mega-menu>ul>li>a:first-child {
 font-weight:bold;
 border-bottom:1px solid;
 }
/*on rajoute un peu d'espace*/
 #top-menu li.mega-menu>ul>li {
 padding-bottom:20px !important;
 }
Ajout de CSS pour embellir un mega menu

Tu peux enfin admirer le résultat sur ton site :

 

Mega menu réalisé avec Divi et sans plugin

Bravo : tu sais désormais comment créer un mega menu avec Divi

Et voilà ! Ce n'était pas si compliqué 😀 Tu peux maintenant créer de beaux menus pratiques pour tes visiteurs. Amuse-toi bien ! 😉

 

0 commentaires

adopte-ton-plugin.fr
Les meilleurs plugins et thèmes wordpress du marché à prix imbattable ? C'est possible, Adopte ton Plugin l'a fait ;)

adopte-ton-plugin.fr
Les meilleurs plugins et thèmes wordpress du marché à prix imbattable ? C'est possible, Adopte ton Plugin l'a fait ;)
Cet article te plaît ?

Cet article te plaît ?

Inscris toi à notre Newsletter pour être informé(e) des suivants

Merci de ta confiance

Partager