Table des matières
Vous pouvez construire un méga menu complet dans Elementor sans acheter Elementor Pro. Un méga menu est un large dropdown multi-colonnes qui montre une section entière de votre site à la fois : liens, images, icônes, même un formulaire de contact, au lieu d'une fine liste verticale La version gratuite d'Elementor n'a pas de méga widget de menu, mais le gratuit Menu Mega des modules complémentaires principaux en ajoute un et vous concevez chaque panneau avec l'éditeur Elementor normal.
Ce guide couvre l'ensemble de la version : activer l'extension, attacher un méga menu à un élément de menu, concevoir le panneau déroulant et le mettre correctement sur mobile, l'étape que la plupart des didacticiels sautent.
Avez-vous besoin d'Elementor Pro pour un méga menu ?
Non. Il existe trois itinéraires vers un méga menu dans Elementor, et un seul d'entre eux coûte de l'argent :
| Route | Coût | compromis |
|---|---|---|
| Widget Elementor Pro Mega Menu | Licence annuelle payante | Nécessite Pro sur chaque site que vous construisez |
| CSS personnalisé/menu codé à la main | Gratuit | Fragile, difficile à éditer plus tard, pas de montage visuel |
| Menu Mega des modules complémentaires principaux | Gratuit | Ajoute un plugin ; panneaux construits visuellement dans Elementor |
Si un méga menu est la seule raison pour laquelle vous étiez sur le point de mettre à niveau, l'itinéraire gratuit fait le même travail Master Addons fonctionne aux côtés d'Elementor Pro sans conflit aussi, donc une licence Pro existante n'est pas gaspillée Elementor documente ici son propre flux de travail Pro mega menu si vous souhaitez comparer les deux approches côte à côte ; il faut activer plusieurs fonctionnalités expérimentales avant de pouvoir commencer.
Ce dont vous avez besoin avant de commencer
- Elementor (la version gratuite est fine) installé et actif
- Modules complémentaires principaux pour Elementor installé et actif
- Un menu WordPress déjà créé sous Apparence → Menus (même approximatif, vous pouvez le modifier plus tard)
Étape 1 : Activer l'extension Mega Menu
Aller à Additions principales → Addons et extensions dans votre tableau de bord WordPress, trouvez Méga Menu dans la liste des extensions, et activez-la Enregistrer.
Master Addons est livré avec tout désactivé par défaut afin que vous chargez uniquement ce que vous utilisez. C'est pourquoi cette étape existe. Si vous ne voyez pas l'option immédiatement, actualisez la page d'administration (Cmd/Ctrl + Shift + R) ; les plugins de mise en cache restent connectés à l'ancien menu d'administration pendant une minute.
Étape 2 : Transformez un élément de menu en un méga menu
Ouvrir Apparence → Menus et développez l'élément de niveau supérieur à partir duquel vous souhaitez que le méga panneau soit supprimé, généralement quelque chose de large comme “Products”, “Services” ou “Shop”.
- Cochez le Activer le méga menu option sur cet élément de menu.
- Choisissez la largeur du panneau La pleine largeur s'étend bord à bord, la largeur du conteneur s'aligne sur votre contenu.
- Enregistrer le menu.
Activez-le uniquement sur les éléments qui ont réellement besoin de l'espace. Un méga menu sur un seul lien “Contact” est pire qu'un lien simple : il fait travailler les gens plus dur pour une destination.
Étape 3 : Concevez le panneau déroulant dans Elementor
Le contenu du panneau est un modèle Elementor, ce qui rend cette approche flexible : tout ce que vous pouvez construire sur une page, vous pouvez le mettre dans le menu.
- Cliquez Modifier le contenu du méga menu sur l'élément de menu pour ouvrir l'éditeur Elementor.
- Construire une disposition à plusieurs colonnes Trois ou quatre colonnes conviennent à la plupart des navigations.
- Remplissez les colonnes : widgets de titre comme étiquettes de catégorie, listes d'icônes comme groupes de liens, une image ou deux pour l'ancrage visuel.
- Publier le modèle.
Quelques éléments qui font fonctionner les méga menus plutôt que de simplement avoir l'air occupé :
- Regroupez selon la façon dont les clients pensent, pas selon votre organigramme. Les titres des colonnes doivent correspondre aux mots utilisés par les visiteurs.
- Plafonnez-le à environ cinq à sept liens par colonne. Passé cela, la numérisation s'effondre et le menu devient un mur.
- Donnez un travail à une colonne. Un produit vedette, une promo ou un appel à l'action gagne son espace plus d'une quatrième liste de liens.
- Gardez les images légères. Les images de menu se chargent sur chaque page Compressez-les et servez WebP : un lourd méga menu fait glisser l'ensemble de votre site temps de chargement1, pas une seule page.
Étape 4 : Ajoutez le menu à votre en-tête
Si votre thème rend déjà le menu WordPress dans son en-tête, le méga menu fonctionne immédiatement Aucune autre étape n'est nécessaire.
Pour un contrôle total sur l'en-tête lui-même, construisez-en un gratuitement Constructeur de thèmes Master Addons: créer un modèle d'en-tête, déposer dans le Widget de menu Nav[TRADUCTION], sélectionnez le menu portant votre méga menu, et définissez la condition d'affichage sur l'ensemble de votre site Ce jumelage, constructeur de thème gratuit plus méga menu gratuit, remplace les deux fonctionnalités pour lesquelles les gens achètent le plus souvent Pro.
Étape 5 : Corrigez l'expérience mobile
C'est là que la plupart des méga menus s'effondrent Un panneau à quatre colonnes qui semble pointu sur un écran 1440 px devient un défilement sans fin sur un téléphone.
- Passez à la vue mobile dans Elementor et vérifiez la hauteur réelle du panneau Si celui-ci passe devant deux écrans, coupez le contenu pour mobile.
- Masquer les images décoratives sur mobile à l'aide des commandes de visibilité réactives d'Elementor ; conserver les liens, laisser tomber l'ornement.
- Empilez les colonnes verticalement et confirmez que les cibles de robinet sont confortablement grandes.
- Testez sur un vrai téléphone, pas seulement l'aperçu de l'éditeur L'aperçu se rapproche ; il ne reproduit pas le comportement tactile.
Si vos points d'arrêt ne correspondent pas à votre conception, le gratuit Extension personnalisée des points d'arrêt vous permet de définir le vôtre Cela est utile lorsque le point d'arrêt par défaut de la tablette coupe votre menu à une largeur gênante.
Dépannage
- Le méga menu n'apparaît pas. Confirmez que l'extension est activée, que l'élément de menu est coché Activer le méga menu et que le modèle de panneau est publié, et non laissé sous forme de brouillon. Ensuite, effacez votre cache.
- Le panneau apparaît mais n'est pas stylé. Habituellement une feuille de style mise en cache Purgez le cache de votre page et tout CDN, puis rechargez-le dur.
- Le panneau est coupé ou caché derrière le contenu. Un conteneur parent a
overflow: hiddenou un indice z faible. Relevez l'indice z de l'en-tête et vérifiez le paramètre de débordement du conteneur d'en-tête. - Fonctionne sur ordinateur, cassé sur mobile. Presque toujours la zone bascule/hamburger Vérifiez les paramètres mobiles du widget de menu et confirmez que rien ne recouvre la cible du robinet.
Foire aux questions
Comment créer un méga menu dans Elementor sans Pro ?
Installez le plugin gratuit Master Addons for Elementor, activez l'extension Mega Menu sous Master Addons > Addons & Extensions, puis ouvrez Apparence > Menus et cochez Activer Mega Menu sur l'élément que vous souhaitez Cliquez sur Modifier le contenu du méga Menu pour concevoir le panneau déroulant dans l'éditeur Elementor normal et le publier.
Comment puis-je créer un menu dans Elementor gratuitement ?
La version gratuite d'Elementor vous permet de créer un menu WordPress standard via Apparence > Menus et de l'afficher avec le widget gratuit Nav Menu. Pour une suppression de style méga, Elementor gratuit à lui seul n'inclut pas ce widget, vous avez donc besoin d'une extension gratuite telle que Master Addons Mega Menu pour ajouter des panneaux multicolonnes.
Comment puis-je créer un méga menu dans WordPress sans utiliser de plugins ?
Vous pouvez coder manuellement un dropdown avec CSS et HTML personnalisés, mais il est fragile. Il interrompt les mises à jour du thème, a besoin d'un développeur pour chaque modification et ne vous offre aucune modification visuelle. La plupart des propriétaires de sites obtiennent à la place un résultat plus rapide et plus maintenable à partir d'un plugin gratuit tel que Master Addons.
Max Mega Menu est-il gratuit ?
Max Mega Menu a une version gratuite dans le dépôt de plugins WordPress, plus un module complémentaire Pro payant pour des options de style supplémentaires, et il fonctionne indépendamment de votre constructeur de pages Le menu Mega de Master Addons est construit spécifiquement pour Elementor, donc les panneaux sont conçus avec le même éditeur de glisser-déposer que vous utilisez déjà pour les pages.
Quel est le meilleur plugin de méga menu pour Elementor ?
Cela dépend de ce que vous exécutez déjà Si vous utilisez Elementor et que vous souhaitez des panneaux conçus visuellement sans apprendre une nouvelle interface, Master Addons Mega Menu est une option gratuite solide Si vous avez besoin de menus multiniveaux avancés avec des conditions dynamiques, un outil payant peut valoir le coût de Test avec votre propre contenu avant de vous engager dans l'un ou l'autre.
Comment puis-je rendre un méga menu Elementor réactif sur mobile ?
Passez à la vue mobile d'Elementor et vérifiez la hauteur réelle du panneau Empiler les colonnes verticalement, masquer les images décoratives avec les commandes de visibilité réactives, garder les cibles de pression grandes et tester sur un téléphone réel plutôt que sur l'aperçu de l'éditeur Si les points d'arrêt par défaut coupent maladroitement le menu, définissez le vôtre avec l'extension Points d'arrêt personnalisés.
Pourquoi mon méga menu Elementor n'apparaît-il pas ?
Cochez quatre choses dans l'ordre : l'extension Mega Menu est activée, l'élément de menu est coché Activer Mega Menu, le modèle de panneau est publié plutôt que enregistré sous forme de brouillon, et votre cache est effacé Si le panneau apparaît mais est coupé, le débordement d'un conteneur parent : caché ou un indice z faible le cache.
Lecture Connexe
