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

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é aussi par…

Les bons plans Alpa14 😉

👉 Divi : Le meilleur WebBuilder WordPress, -20% sur votre licence !
👉 Divi Supreme : Décuplez la puissance de Divi, 49 nouveaux modules de qualité, -10% avec le code promo « Alpa14 »
👉 Presto Player
: Le meilleur lecteur vidéo pour votre site WordPress !
👉 Wondershare Filmora X : Le montage vidéo facile, faites jouer votre imagination !
👉 ThriveCArt : Offre spéciale, paiement en 1X. Placez des paniers où vous voulez et déployez des tunnels de vente en quelques clics !
👉 Bunny.net : Hébergez vos vidéos sur une plateforme performante aux tarifs hyper compétitifs !
👉 LearnDash : Le meilleur plugin LMS, commencez dès aujourd’hui à créer et à vendre vos cours sur votre site WordPress !
👉 Canva : Collaborez et créez d’incroyables designs Gratuitement
👉 Thinkific : Créez & vendez vos formations, 1 mois gratuit en formule Pro
👉 O2switch : l’hébergeur de qualité (5€/mois en illimité avec nom de domaine)
👉 Inleed : l’hébergeur suédois performant et de qualité 

👉 Semrush : la meilleure boîte à outils SEO, 14 jours gratuits
👉 MailerLite : L’email marketing simple et efficace, formule gratuite + 30 jours gratuits toutes options
👉 duoLogo : Réalisez un logo pro, formule gratuite
👉 Invideo : Créez des vidéos marketing, -25% sur toutes les offres
👉 Private Internet Access
: Un VPN de qualité, protégez votre connexion Internet

👁️ Pour une totale transparence, les liens de ce site sont des liens affiliés, en les utilisant, vous m’offrez une commission sur la vente et votre geste sympa compensera les nombreuses heures de travail à concevoir ces tutoriels. Merci ! 🙂🙏.
Veuillez noter que jamais vous ne paierez plus cher que directement sur le site de l’éditeur. Voire parfois bien moins cher 👍.

0 Comments

Submit a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *