Comment créer un méga menu dans WordPress avec Elementor

Pouvez-vous imaginer un grand site Web sans menu de navigation ? 
Certainement pas!

94% of users say it’s the most important feature of a website. So, easy navigation matters! That’s why mega menus are so effective. They organize categories and subcategories into a single, clear layout, making it easy for visitors to find what they need.

Sites like Amazone et eBay use mega menu to give the best user experience. Mega menus are ideal for e-commerce, news, blogs, and businesses with lots of content.

This article will show you how to create a functional and stylish mega menu avec Elementor.

What do you need to create the mega menu with Elementor?

The only thing you need to create the mega menu using Elementor is ElementsKit.

En utilisant le Générateur de méga menus ElementsKit vous pouvez créer et personnaliser tout type de Megamenu avec une interface de contenu en direct Elementor.

You will get variations in the mega menu such as the Nav menu et Méga menu vertical along with many customization options. 

Overall, ElementsKit Elementor Mega Menu is a full featured-packed module for your professional site that easily ranks top among the best WordPress Mega Menu builders for Elementor.

Pour suivre ce blog tutoriel, vous aurez besoin de deux choses ->

• Élémentor
• ElementsKit

Ou suivez les instructions étape par étape :

S'assurer Mégamenu le module est SUR depuis ElementsKit → MODULES.

Étape #1 : Ajouter un menu

Pour créer un méga menu dans Elementor, vous devez créer un menu à partir du tableau de bord WordPress. Pour ce faire,

• Aller vers Apparence > Menu.
• Cliquer sur Créer un nouveau menu.
• Fournir Nom du menu > Vérifiez le Case à cocher > Créer un menu.
• Cliquer sur Lien personnalisé > Fournir Lien et Ajouter des éléments de menu de la même manière.

Étape #2 : Personnaliser le contenu du Megamenu

In this step, you can add mega menu items from the WordPress menu you have created.

Cochez la case "Activer ce menu pour le contenu Megamenu" > Cliquez sur le Méga menu avec icône de réglage sur quel élément de menu vous souhaitez ajouter le Mega Menu.

• Une fenêtre contextuelle s'ouvrira, basculez le Méga menu possibilité, et Sauvegarder. Après cela, cliquez sure MODIFIER LE CONTENU DU MEGAMENU bouton.

Choisir le modèle

• Clique le Kit d'éléments Icône de la bibliothèque de modèles, puis accédez à En-têtes.
• Cliquer sur Entête > Contenu du méga menu > Insérer n'importe quel Méga menu.

Disposition des contrôles

• Modifier la section intérieure en cliquant sur la section en pointillés.
• Zone de largeur du contenu: Personnalisez la largeur de votre contenu en faisant glisser vers la droite ou la gauche.
• Contenu pleine largeur: Sélectionner Pleine largeur.

Sélectionnez l'espacement des colonnes

• Écart de colonne=> Sélectionnez votre espace de colonne dans dérouler.

Choisir un poste

• Hauteur: Sélectionnez votre hauteur en faisant glisser de gauche à droite.
• Alignement vertical : Sélectionnez Alignement vertical dans la liste déroulante.
• Débordement: Sélectionnez Débordement par défaut ou Masqué.

Sélectionner Balise HTML

• Sélectionnez votre Balise HTML depuis Dérouler.

Personnaliser le texte de l'en-tête du méga menu

• Sélectionnez le type d'icône.
• Activer pour ajouter une icône.
• Icône d'en-tête de téléchargement.
• Ajouter ou modifier un titre.
• Ajouter une description de modification.

Personnaliser le texte

• Ajouter ou modifier du texte.
• Ajouter ou modifier un sous-titre.
• Activer pour afficher l'étiquette.
• Ajouter ou modifier une étiquette.
• Personnaliser la couleur d'arrière-plan, la typographie, le remplissage, l'alignement et le rayon.

Étape #3 : Personnaliser l'icône

1. Cliquez sur 'Mise à jour' pour enregistrer le menu > Fermer l'éditeur.
2. Allez maintenant dans l’onglet Icône > Choisissez une couleur dans la palette de couleurs.
3. Sélectionnez Icône dans la bibliothèque d'icônes.
4. Allez maintenant sur le site > Icône sélectionnée et la couleur est apparue.

Étape #4 : Personnaliser le badge

• Ajouter ou modifier du texte.
• Choisir Couleur de l'insigne.
• Choisir Couleur d'arrière-plan du badge.
• Cliquez sur Sauvegarder.

Étape #5 : Paramètres

Largeur par défaut

• Sélectionnez la largeur du méga menu : Défaut.
• Sélectionnez la position du méga menu : Défaut.
• Enregistrez la fenêtre.
• Vue du site: Affichage de la largeur par défaut avec la position par défaut.

Relatif par défaut 

• Sélectionnez la largeur du méga menu : Défaut.
• Sélectionnez la position du méga menu : Relatif.
• Cliquez sur Sauvegarder.
• Vue du site: Affichage de la largeur par défaut avec la position relative.

Pleine largeur par défaut

• Sélectionnez la largeur du méga menu : Pleine largeur.
• Sélectionnez la position du méga menu : Défaut.
• Cliquez sur Sauvegarder.
• Vue du site: Affichage pleine largeur avec la position par défaut.

Position relative pleine largeur

• Sélectionnez la largeur du méga menu : Pleine largeur.
• Sélectionnez la position du méga menu : Relatif.
• Cliquez sur Sauvegarder.
• Vue du site: Affichage Pleine largeur avec position relative.

Largeur par défaut personnalisée

• Sélectionnez la largeur du méga menu : Largeur personnalisée.
• Fournissez n'importe quelle largeur personnalisée, mais par défaut, c'est le cas 750px.
• Sélectionnez la position du méga menu : Défaut.
• Cliquez sur Sauvegarder.
• Vue du site: Affichage Largeur personnalisée avec position par défaut.

Largeur par défaut personnalisée Relatif

• Sélectionnez la largeur du méga menu : Largeur personnalisée.
• Fournissez n'importe quelle largeur personnalisée, mais par défaut, c'est le cas 750px.
• Sélectionnez la position du méga menu : Relatif.
• Cliquez sur Sauvegarder.
• Vue du site: Affichage Largeur personnalisée avec position relative.

Étape #6 : Créer un modèle d'en-tête

Ici, vous pouvez utiliser le Modèle d’en-tête Elementor ou vous pouvez utiliser le Modèle d’en-tête ElementsKit.

• Rechercher maintenant Menu de navigation > Faites glisser le Menu de navigation Ekit et Baisse sur la zone sélectionnée. Assurez-vous de faire glisser le menu ElementsKit Nav, sinon votre Megmenu créé n'apparaîtra pas.
• Aller à Paramètres des menus > sélectionnez votre création Menu d'en-tête dans la liste déroulante.
• Vous pouvez ajouter n'importe quel type de widget à partir d'ici pour personnaliser votre modèle d'en-tête.

• Une fois terminé, cliquez sur le Mise à jour bouton pour enregistrer le menu.
• Allez maintenant sur votre site et vous pourrez voir que le Megamenu sélectionné s'affiche en conséquence.

Pour en savoir plus sur la création d'un méga menu dans WordPress, vous pouvez consulter la documentation d'ElementsKit Widget Mega Menu pour Elementor.

Et après?

Once you’ve finished creating the mega menu in Elementor, make sure to preview it. If you’re satisfied with the style, finalize and publish it. However, if you later find that it isn’t as attractive as you initially thought, you can change it at any time.

To understand how users interact with the style, consider integrating a heatmap tool like Clarity.

Créez un méga menu avec Gutenberg

Si vous avez créé votre site Web dans l'éditeur de blocs WordPress, vous pouvez également créer un méga menu dans Gutenberg en douceur. Le plugin d'éditeur de blocs GutenKit est livré avec le moyen le plus simple de créer un méga menu WordPress dans Gutenberg.

With GutenKit, you can create the entire menu in the editor and design mega menu in both vertical and horizontal orientation.

All you need is to install GutenKit Pro plugin and start building your beautiful site in Gutenberg.

Emballer

Finalement, nous sommes arrivés au bout avec succès. J'espère que nous avons pu vous aider avec ce tutoriel ! Et maintenant, vous pouvez créer un méga menu Elementor personnalisé en utilisant ElementsKit!

Vous pouvez voir toutes ces étapes dans une seule vidéo ici.

Si vous avez d'autres préoccupations ou avez rencontré d'autres problèmes, veuillez nous le faire savoir dans la section commentaires !