Tutoriel Divi : Comment créer un Méga Menu Professionnel (Sans Plugin)

La navigation est la colonne vertébrale de l’expérience utilisateur sur votre site web. Lorsque votre site s’étoffe avec de nombreuses pages, services ou produits, un simple menu déroulant devient vite illisible et interminable.

La solution ? Le Méga Menu.

Contrairement à une liste verticale classique, un Méga Menu s’affiche sur toute la largeur (ou une largeur fixe) et organise vos liens en plusieurs colonnes. La bonne nouvelle, c’est que Divi intègre cette fonctionnalité nativement. Pas besoin d’acheter un plugin coûteux !

Dans ce guide pour AlveoWeb, nous allons voir étape par étape comment activer et configurer un méga menu avec le thème Divi.

Étape 1 : Préparer l’environnement WordPress

C’est l’étape que 90% des utilisateurs oublient, car l’option est cachée par défaut dans WordPress. Pour créer un méga menu, nous devons pouvoir attribuer une classe CSS à nos éléments de menu.

1. Rendez-vous dans votre tableau de bord WordPress, section Apparence > Menus.

2. Tout en haut à droite de l’écran, cliquez sur l’onglet déroulant Options de l’écran.

3. Cochez la case Classes CSS.

[Insérer ici une capture d’écran montrant l’onglet « Options de l’écran » ouvert et la case cochée]

Désormais, un nouveau champ « Classes CSS (facultatif) » apparaîtra lorsque vous déplierez les détails d’un élément de menu.

Étape 2 : Structurer la hiérarchie du menu

Pour que Divi comprenne qu’il doit afficher un méga menu, vous devez respecter une structure « Parent > Enfant > Petit-enfant » très précise.

Imaginez votre menu comme un tableau :

• Niveau 1 (Le Parent) : C’est le lien principal visible dans la barre de navigation (ex: « Nos Services »).

• Niveau 2 (Les Colonnes) : Chaque sous-élément direct deviendra une colonne titrée.

• Niveau 3 (Les Liens) : Ce sont les éléments cliquables à l’intérieur des colonnes.

Voici à quoi doit ressembler votre arborescence dans l’éditeur de menu :

• Services (Élément Parent)

  • Développement Web (Sera la Colonne 1)

    • Site Vitrine

    • E-commerce

    • Refonte

  • Marketing Digital (Sera la Colonne 2)

    • Référencement SEO

    • Google Ads

    • Réseaux Sociaux

  • Design (Sera la Colonne 3)

    • Logo & Branding

    • Webdesign UI/UX

[Insérer ici une capture d’écran de l’arborescence du menu dans le backend WordPress]

Étape 3 : Activer la « Classe Magique »

C’est le moment de transformer ce menu classique en méga menu.

1. Localisez votre Élément Parent (celui de Niveau 1, « Services » dans notre exemple).

2. Cliquez sur la petite flèche pour voir les options.

3. Dans le champ Classes CSS, écrivez exactement : mega-menu

4. Cliquez sur Enregistrer le menu.

C’est tout ! Retournez sur votre site et survolez le lien « Services ». Divi va automatiquement afficher un panneau large avec vos sous-menus organisés en colonnes. Par défaut, Divi gère bien 3 ou 4 colonnes.

Astuces Pro pour personnaliser votre Méga Menu Divi

Le rendu par défaut est fonctionnel, mais voici comment le rendre plus professionnel pour vos clients.

1. Rendre les titres de colonnes non-cliquables

Souvent, les titres des colonnes (Niveau 2) servent juste à catégoriser et ne devraient pas être des liens.

• Ajoutez un lien personnalisé.

• Dans l’URL, mettez simplement un dièse : #

• Divi comprendra qu’il s’agit d’un titre statique.

2. Masquer les titres de colonnes

Vous préférez avoir juste une liste de liens répartie sur plusieurs colonnes sans gros titres au-dessus ?

1. Ouvrez l’élément de Niveau 2 (le titre de colonne).

2. Ajoutez la classe CSS : hide-mega-menu-title

3. Allez dans Divi > Options du thème > CSS Personnalisé et collez ce code :

.hide-mega-menu-title > a {
    display: none !important;
}
/* Remonter les liens pour combler le vide */
.hide-mega-menu-title > ul {
    margin-top: -20px !important; 
}

3. Ajouter des images dans le menu

Pour un effet visuel impactant, vous pouvez ajouter des images directement via l’étiquette de navigation. Le menu WordPress accepte le HTML !

Dans le champ « Titre de la navigation » d’un de vos éléments, vous pouvez coller : <img src="URL_DE_VOTRE_IMAGE.png" style="width:100%; margin-bottom:10px;" /><br> Titre du lien

Cela permet d’afficher une photo de produit ou une icône juste au-dessus du texte.

Conclusion

Le méga menu natif de Divi est une fonctionnalité puissante qui améliore considérablement l’UX sans alourdir votre site avec des plugins tiers. En quelques clics et avec la bonne structure, vous offrez à vos visiteurs une navigation claire, moderne et intuitive.

Vous avez besoin d’aide pour configurer votre site Divi ou pour aller plus loin dans la personnalisation ? L’équipe d’AlveoWeb est à votre disposition pour vous accompagner dans vos projets web.