Méga Menu

Une liste déroulante standard affiche une liste fine de liens Un méga menu ouvre un large panneau qui présente une section entière de votre site à la fois : des colonnes de liens groupées, des images, des icônes, voire un appel à l'action Méga Menu extension dans Modules complémentaires principaux pour Elementor attache l'un de ces panneaux à n'importe quel élément de menu WordPress et vous concevez le panneau lui-même dans l'éditeur Elementor normal, afin que tout ce que vous pouvez créer sur une page puisse vivre dans votre navigation.

Voici le résultat fini de la démo : hovering Products ouvre un panneau à trois colonnes avec des liens groupés et une image en vedette.

Ce que fait l'extension Mega Menu #

Une fois activé, chaque élément de votre menu WordPress reçoit une fenêtre contextuelle de configuration Mega Menu Apparence → Menus. Allumez-le pour un élément et la liste déroulante de cet élément devient un modèle Elementor. L'extension gère :

• Panneaux par article : activez le méga panneau uniquement sur les éléments qui en ont besoin ; le reste reste des liens ordinaires.
• Conception visuelle du panneau : le contenu déroulant est construit avec l'éditeur Elementor, en utilisant tous les widgets que vous aimez.
• Largeur du méga menu : Largeur par défaut, pleine largeur ou personnalisée avec une valeur exacte de pixel.
• Effet déclencheur : ouvrez le panneau en vol stationnaire ou en clic.
• Transition : choisissez comment le panneau s'anime, Fade dans la démo.
• Menu mobile : décidez ce que les téléphones obtiennent, y compris l'affichage du contenu du constructeur dans le menu bascule.
• Icône et insigne : attachez une icône ou un badge de surbrillance à l'étiquette de l'élément de menu.

Avant de commencer #

• WordPress avec Élémenteur installé et actif ; la version gratuite suffit.
• Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? Suivez le guide d'installation d'abord.
• Un menu WordPress déjà créé sous Apparence → Menus(en), même rude ; vous pourrez l'affiner plus tard.

REMARQUE : Vous pouvez contrôler l'arrière-plan de votre méga menu à partir de l'option de style de page Assurez-vous de mettre la couleur d'arrière-plan, l'image ou tout ce que vous préférez dans l'option de style de page Par défaut, il sera défini un fond blanc Mais vous pouvez faire la personnalisation de votre arrière-plan à partir de ce paramètre Jetez un œil (Take a look)

Étape 1 : Activer l'extension Mega Menu #

Depuis votre tableau de bord WordPress, rendez-vous sur Additions maîtres et ouvrez le Extensions onglet. Le méga menu se trouve dans le Widgets d'affichage groupe. Cliquez sur sa bascule pour qu'elle devienne violette, puis frappez Enregistrer Modifications et attendez l'avis vert “Paramètres enregistrés avec succès” Master Addons expédie tout avec tout désactivé par défaut afin que votre site ne charge que ce que vous utilisez réellement Si la nouvelle option n'apparaît pas dans l'administrateur tout de suite, actualisez la page avec le papier (Cmd/Ctrl + Shift + R) ; les plugins de mise en cache ont tendance à conserver l'ancien menu administrateur pendant une minute.

Étape 2 : Activez Mega Menu pour votre menu #

Ouvrir Apparence → Menus. Un nouveau Menu Mega des modules complémentaires principaux case apparaît au-dessus de la liste des éléments de menu Commuter Activer le méga menu allumé et attendez la confirmation verte “Mega Menu Saved” Chaque élément de la structure de menu porte désormais un violet Maître Méga badge, ce qui signifie qu'il peut héberger un panneau.

Étape 3 : Activer le panneau sur un élément de menu #

Passez un élément de niveau supérieur, généralement quelque chose de large comme les produits ou les services, et ouvrez ses paramètres de méga menu. Dans la fenêtre contextuelle Contenu onglet, retournement Megamenu activé à OUI. Le Modifier le contenu Megamenu bouton apparaît ; il ouvre l'éditeur Elementor pour le panneau de cet élément. Toucher Enregistrer dans la popup quand vous avez terminé.

Activez uniquement le panneau sur les éléments qui ont réellement besoin d'espace. Un méga menu sur un seul lien de contact permet aux visiteurs de travailler plus dur pour une destination.

Étape 4 : Concevez le panneau dans Elementor #

Cliquez Modifier le contenu Megamenu et l'éditeur Elementor familier s'ouvre avec le panneau comme canevas La démo construit trois colonnes : deux groupes de liens sous les titres Enregistrer et Analyser, plus une colonne d'image pour que le panneau ne soit pas un mur de texte Publiez le modèle lorsque la mise en page est prête ; un modèle de brouillon ne sera pas rendu sur le menu en direct, ce qui fait trébucher les gens plus que toute autre chose.

Regroupez les liens selon la façon dont les clients pensent plutôt que par votre organigramme, et plafonnez chaque colonne de cinq à sept liens ; au-delà de cela, la numérisation s'effondre. Donnez à une colonne un travail au-delà des liens, comme un produit vedette ou un appel à l'action. Et gardez les images compressées, car le panneau se charge sur chaque page du site, pas une seule.

Étape 5 : Définissez la largeur, la gâchette et la transition #

De retour dans la fenêtre contextuelle de l'élément, le Paramètres tab contrôle le comportement du panneau :

• Largeur du méga menu : Correspond par défaut au menu, la largeur totale s'étend d'un bord à l'autre, la largeur personnalisée prend une valeur de pixel exacte telle que 800 px.
• Menu mobile : ce que les téléphones reçoivent ; Le contenu du constructeur affiche le même panneau conçu dans le menu à bascule mobile.
• Effet déclencheur : Le survol ouvre le panneau lors du survol de la souris ; basculez pour cliquer si vous préférez les ouvertures délibérées.
• Transition : l'animation d'entrée, Fade dans la démo.
• Afficher l'étiquette du menu/Montrer la description : étiquette facultative et texte de description sur l'article.

Le Icône et Insigne les onglets d'une même fenêtre contextuelle attachent une icône ou un badge de surbrillance, utile pour marquer une entrée Nouvelle ou Vente.

Étape 6 : Mettez le menu dans votre en-tête #

Si votre thème rend déjà le menu WordPress, le méga menu fonctionne immédiatement Pour un contrôle complet de l'en-tête, construisez-en un avec le gratuit Constructeur de thèmes Master Addons: créez un modèle d'en-tête, déposez le Widget de menu Nav(traduction), et sélectionnez le menu qui porte vos méga panneaux La section Général du widget couvre la disposition, l'alignement, et le point d'arrêt où le menu s'effondre.

Vérifiez la vue mobile #

Basculez l'éditeur Elementor sur l'aperçu mobile avant de publier Le menu s'effondre derrière une bascule de hamburger et les liens s'empilent verticalement Vérifiez ici la hauteur réelle du panneau ; un panneau à quatre colonnes qui semble pointu à 1440 px peut se transformer en un défilement sans fin sur un téléphone S'il est long, masquez les images décoratives avec les commandes de visibilité réactives d'Elementor et conservez les liens. Puis testez sur un téléphone réel, puisque l'aperçu se rapproche du comportement tactile mais ne le reproduit pas.

Le résultat sur la page #

Avec Full Width sélectionné, le panneau publié s'étend sur toute la fenêtre bord à bord ; la version encadrée en haut de cette page affiche la largeur par défaut à des fins de comparaison De toute façon, le survol de l'élément ouvre le modèle conçu avec la transition que vous avez choisie.

Où un méga menu fonctionne bien #

• Magasins. Catégories de produits, best-sellers et image promotionnelle dans un panneau sous Boutique.
• Agences et entreprises de services. Services regroupés par résultat avec une étude de cas présentée.
• Éditeurs et blogs. Des hubs thématiques avec le dernier message tiré dans le panneau.
• Sites SaaS. Fonctionnalités, solutions et ressources organisées côte à côte au lieu de réductions imbriquées.
• Universités et organisations. Départements et liens rapides qui autrement enfouiraient trois niveaux de profondeur.

Dépannage #

• Le méga menu n'apparaît pas. Confirmez que la bascule de l'extension est activée, que l'élément de menu a Megamenu activé défini sur OUI et que le modèle de panneau est publié plutôt que enregistré 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é. Un conteneur parent a un débordement caché ou un indice z faible Augmentez 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 de bascule Vérifiez les paramètres mobiles du widget Nav Menu et confirmez que rien ne recouvre la cible du robinet.

Foire aux questions #

Envelopper #

L'extension Mega Menu transforme un menu WordPress simple en une navigation conçue avec trois mouvements : activer l'extension, activer le panneau sur un élément et créer la liste déroulante dans Elementor. La largeur, le déclencheur, la transition, les icônes et les badges sont tous définis à partir de la fenêtre contextuelle de l'élément et associez-le au logiciel gratuit Constructeur de thèmes et Widget de menu Nav vous donne un en-tête personnalisé complet sans Elementor Pro. L'ensemble complet de Widgets et extensions Master Addons est à une page.