Découvrez les bons plans & les réductions Alpa14

Tuto Divi : Comment créer facilement un Méga Menu WordPress ?

Alpa14 les tutoriels faciles !

Catégories

Comment réaliser un Méga Menu WordPress pour un header plus lisible ?

Dans ce tutoriel aujourd’hui, je vous explique comment réaliser un méga-menu avec Divi.

Un méga menu peut être intéressant dans le cas où vous avez plusieurs menus déroulants. Il permet au visiteur de dérouler tous les menus en un seul menu assez large et de voir en un seul coup d’œil tous les produits et options disponibles. D’où ce nom de méga menu

Pour cet exercice nous utiliserons Divi et son très pratique Divi Builder.

Pour notre exercice, nous partirons d’un site fictif d’agence de voyages proposant des voyages dans différents régions du monde. Prétextes pour nous de créer 4 menus déroulants :)

Licence Divi
.

Etapes pour la création de votre Méga Menu

1) Votre menu

Le Méga Menu va donc servir à regrouper plusieurs menus déroulants en 1 seul, chaque menu déroulant occupera 1 colonne du Méga Menu. Pour que vous puissiez créer un Méga Menu vous devez disposer d’au moins de 2 menus déroulants à regrouper.
Rendez-vous dans le menu WP de gauche « Apparence > Menus ».

 

4 menus déroulants

2) Création d’un lien d’entête du Méga Menu, non cliquable

Nous allons maintenant créer un lien non cliquable (sans adresse) qui déclenchera l’apparition du Méga Menu au passage de la souris.
Toujours dans « Menus », cliquez à gauche sur « Liens personnalisés ». Dans texte du lien entrez les mots désirés, dans notre cas ici, nous écrirons « Nos voyages » plus que ce Méga Menu présentera un ensemble de destinations. (Dans le tuto vidéo, je l’avais appelée « Nos Produits » mais « Nos voyages » est plus approprié, donc ne soyez pas surpris, si vous regardez la vidéo en même temps. ?)
Puis dans URL placez un # afin de simuler un lien qui aura pour effet s’il est cliqué de ne pas conduire l’internaute ailleurs.

Cliquez ensuite sur ajouter « Ajouter au menu ». Votre nouveau lien viendra se placer tout en bas de la liste des liens /pages de droite.

 

Création lien non cliquable

3) Placer les sous-menus déroulants sous le lien principal

Placez ce nouveau lien en tête de vos menus déroulants (par glisser/déposer), puis faites glisser d’un cran vers la droite le mot entête de chacun de vos menus déroulant sous ce lien principal que vous venez de créer. Dans notre cas ici nous ferons glisser d’un cran vers la droite sous « Nos voyages » le menu déroulant Europe, puis Afrique, puis Amérique du Sud et enfin Asie.

Ces 4 sous-menus sont maintenant des « menus fils » du lien « Nos voyages ».

4 sous menus déroulants
MalerLite
Menus déroulants fils

 4) Activer les classes CSS

Toujours dans « Menus », cliquez en haut à droite de votre écran sur « Options de l’écran » et cochez la case « Classes CSS ».
Ensuite allez à la hauteur de votre lien déclencheur de votre Méga Menu, (dans notre exemple ce sera « Nos voyages »), puis cliquez sur la flèche du bout de ligne qui pointe vers le bas (le menu se déroule) puis dans la case « Classes CSS (facultatives) » écrivez « mega-menu ».

Cliquez ensuite en bas à droite sur « Enregistrer le menu ».

Voilà votre méga-menu est désormais fonctionnel !

Cochez classe CSS
écrire mega-menu dans case CSS

5) Apporter de la mise en forme à votre header et à votre méga menu

Si vous souhaitez apporter du style et modifier l’esthétisme de votre Méga Menu, surtout en termes de couleurs, rendez-vous dans le menu de gauche WordPress à Divi > Personnaliseur de thème.

Choisissez en suite dans la marge de gauche « Entête de navigation » puis « Barre de menu primaire », ici vous pourrez modifier certains paramètres de votre header selon vos goûts.

 

Licence Divi
Mise en forme du header

Vous serez peut-être intéressé par les articles suivants :

Tutoriel Divi : Inverser les colonnes selon la vue

Tutoriel Divi : Inverser les colonnes selon la vue

En vue ordinateur un site web peut avoir un design avantageux mais peut être moins en vue mobile du fait des colonnes d’une rangée qui passent les unes sous les autres.
On peut alors se trouver avec une suite d’éléments non souhaitée avec par exemple 2 textes ou 2 images à la suite.

lire plus
Un menu hamburger ? en vue ordinateur : site WordPress Divi

Un menu hamburger ? en vue ordinateur : site WordPress Divi

Sur Internet, le terme de “hamburger menu” désigne un menu de navigation utilisé sur les sites mobiles par souci  de gain de place et d’ergonomie, la largeur de l’écran étant restreinte pour conserver un menu classique. Sur ces périphériques mobiles, on masque alors le menu derrière un bouton à 3 petits traits ressemblant à un hamburger.

lire plus
Créer un site WordPress parfaitement responsive

Créer un site WordPress parfaitement responsive

Dans cette vidéo, je vous montre comment créer un site web WordPress responsive en utilisant le thème Divi et son Visual Builder. Je vous explique comment utiliser les puissantes fonctionnalités intégrées à Divi pour créer un site Web professionnel qui aura fière allure sur n’importe quel appareil en s’adaptant parfaitement à son écran.

lire plus