La navigation est la clé de voûte de l’expérience utilisateur. Si votre site possède une structure complexe, un menu déroulant classique ne suffit plus : il est peu ergonomique et visuellement limité.
La solution ? Le Méga Menu.
Pendant longtemps, créer un méga menu sur Elementor nécessitait des plugins lourds (comme JetMenu) ou du code complexe. C’est terminé ! Avec les dernières versions d’Elementor Pro, vous pouvez désormais créer des méga menus visuellement, en glissant-déposant n’importe quel widget directement dans votre menu.
Dans ce guide pour AlveoWeb, nous allons voir comment maîtriser le nouveau widget Menu d’Elementor.
Prérequis : Activer les fonctionnalités
Pour suivre ce tutoriel, vous devez avoir Elementor Pro.
Avant de commencer, assurons-nous que votre site est prêt. Cette méthode utilise la technologie des « Flexbox Containers » et des « Nested Elements » (Éléments imbriqués).
Allez dans votre tableau de bord WordPress : Elementor > Réglages > Fonctionnalités.
Assurez-vous que Flexbox Container est actif (ou par défaut).
Assurez-vous que Éléments imbriqués (Nested Elements) est sur « Actif ».
Enregistrez les modifications.
Étape 1 : Créer ou modifier votre En-tête (Header)
Le méga menu se place généralement dans l’en-tête de votre site.
Allez dans Modèles > Theme Builder.
Sélectionnez Header (En-tête).
Modifiez votre header existant ou créez-en un nouveau.
Étape 2 : Utiliser le « Nouveau » Widget Menu
C’est ici que la confusion arrive souvent. Elementor possède deux widgets de menu :
WordPress Menu (L’ancien) : Il affiche simplement le menu créé dans Apparence > Menus.
Menu (Le nouveau) : C’est celui que nous voulons ! Il possède une icône simple de navigation.
La méthode :
Dans le panneau de gauche, cherchez le widget appelé simplement Menu.
Glissez-le dans votre conteneur.
[Insérer capture d’écran montrant la différence entre l’ancien widget « Nav Menu » et le nouveau widget « Menu »]
Étape 3 : Configurer le contenu du Méga Menu
Contrairement à l’ancienne méthode, vous ne gérez pas ce menu depuis le tableau de bord WordPress, mais directement dans l’éditeur Elementor.
Cliquez sur le widget Menu pour ouvrir ses paramètres.
Dans l’onglet Contenu, vous verrez la liste de vos éléments (Item #1, Item #2…). Renommez-les (ex: Accueil, Services, Produits).
L’astuce magique : Pour l’élément qui doit devenir un Méga Menu (par exemple « Services »), cliquez sur la petite flèche pour dérouler les options et activez l’interrupteur « Contenu déroulant » (Dropdown Content).
Dès que vous activez cette option, une zone vide (un conteneur) apparaît sous le lien « Services » dans l’aperçu.
Étape 4 : Le Design (Drag & Drop)
C’est la révolution d’Elementor Pro. Cette zone vide qui vient d’apparaître fonctionne comme n’importe quelle section de page.
Vous pouvez y glisser n’importe quoi :
Des titres et listes d’icônes pour structurer vos liens.
Des images pour illustrer vos catégories.
Des cartes Google Maps.
Des formulaires de contact.
Des produits WooCommerce.
Cliquez simplement dans la zone du menu déroulant et commencez à construire votre mise en page avec des conteneurs internes, comme si vous créiez une page normale.
[Insérer capture d’écran montrant l’éditeur visuel ouvert à l’intérieur du menu]
Étape 5 : Personnalisation et Mobile
Ajuster le style
Allez dans l’onglet Style du widget. Vous pouvez contrôler indépendamment :
La typographie des liens principaux.
La largeur du contenu déroulant (Fit to Content ou Full Width).
Les effets d’animation au survol.
La version Mobile
Le nouveau widget Menu gère intelligemment le responsive.
Dans les paramètres de contenu, descendez à la section Responsive.
Choisissez le « Breakpoint » (point de rupture) où le menu devient un hamburger (généralement « Mobile » ou « Tablette »).
Vous pouvez personnaliser l’icône du menu hamburger.
Note importante : Le contenu complexe de votre méga menu (images, cartes) sera affiché dans le menu mobile. Pensez à vérifier l’affichage mobile et, si nécessaire, à masquer certains éléments trop lourds via l’onglet Avancé > Responsive > Masquer sur mobile des widgets internes.
Conclusion
Avec le widget Menu et les éléments imbriqués, Elementor Pro a rattrapé son retard et offre aujourd’hui l’expérience de création de menu la plus flexible du marché. Plus besoin de plugins tiers : tout est visuel, rapide et intégré.
Vous souhaitez une refonte complète de votre site sous Elementor ou vous avez besoin d’aide pour optimiser votre design ? L’équipe d’AlveoWeb est là pour vous accompagner.