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 🙂
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 ».
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.
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) 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 !
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.
