Creating a mega menu in Elementor is easy with ElementsKit, and it doesn’t require Elementor Pro. ElementsKit offers a dedicated Mega Menu module that lets you design rich, multi-column menus using Elementor’s visual editor.

Steps to Create a Mega Menu Using ElementsKit:

1. Save the menu and assign it to your site location.
2. Installez et activez le ElementsKit brancher.
3. Aller à ElementsKit > Modules and enable Méga menu.
4. Aller vers Apparence > Menus and create or edit a menu.
5. Activer Méga menu for a menu item and choose the layout.
6. Cliquez sur Modifier avec Elementor to design the menu content.

Le Module Mega Menu de ElementsKit plugin is a powerful feature in WordPress that allows you to create a category-based expandable WordPress dropdown menu with flexible layouts. Elementor Mega menus are easy to use and can be a great way to show the multi-level website menu in an organized way.

Watch our video guide on Elementor Mega Menu Building:

Ou suivez les instructions étape par étape pour créer un méga menu dans Elementor :

Prérequis: #

• Elementor, a page builder plugin (Free version is enough)
• ElementsKit Pro, a WordPress mega menu plugin for Elementor

Comment créer un méga menu WordPress dans Élémentor #

Tout d’abord, avant créer un Mega Menu Elementor dans WordPress assurez-vous d'activer ElementsKit Méga menu module.

1. Aller vers ElementsKit on your WordPress dashboard
2. Aller à Modules
3. Find and turn ON Mega Menu
4. Sauvegarder les changements

Step #1: Configure WordPress Menu #

À créer un méga menu WordPress on your website –

• Aller vers Appearance > Menus depuis le tableau de bord WordPress.

• Entrez un Nom du menu.
• Clique sur le Créer un menu bouton.

Add pages to the mega menu et enregistrez les modifications.

Now, you can ajouter des éléments au méga menu. Pour ça,

• Développer Liens personnalisés on the “Add menu item” on the right column.
• Entrez un URL et Texte du lien.
• Cliquer sur Ajouter au menu.

Then add other menu items in the same way with this WordPress menu customizer, ElementsKit.

Après cela, make sure you’ve checked the checkbox for “Activer ce menu pour le contenu Megamenu”. When the mega menu is enabled, you will click the icône des paramètres du méga menu lorsque vous survolez les éléments de menu.

Étape #2 : Personnaliser le contenu du mégamenu Elementor With ElementsKit #

Lorsque vous cliquez sur l'icône des paramètres du méga menu, une fenêtre contextuelle s'ouvrira. Sur la popup,

• Bouton bascule pour activer le Mega Menu.
• Clique sur le Sauvegarder bouton.
• Après cela, cliquez sur le MODIFIER LE CONTENU DU MEGAMENU bouton. Cela vous mènera au bouton de l’éditeur Elementor.

In the next step, a window will appear where you need to click on the Icône de la bibliothèque de modèles ElementsKit.

• Aller aux rubriques
• Search mega menu
• Sélectionner un Mégamenu template from the list and insert

You’ll see that your inserted pre-designed mega menu template item will display. Modifier la section intérieure en cliquant sur la section en pointillés.

Récipient

Container Layout: Select the structural system, like Flexbox, to organize your elements.

Content Width: Choose between Pleine largeur ou En boîte for your horizontal boundaries.

Largeur: Set the specific horizontal percentage or pixel size.

Min Height: Set the minimum vertical space the container must fill.

Items Management

Wrap: Allow items to move to a new line when they run out of space.

Direction: Stack items vertically in a column or horizontally in a row.

Justifier le contenu : Distribute items along the main axis, such as center or spaced out.

Aligner les éléments : Position items along the cross axis for consistent vertical or horizontal alignment.

Gaps: Define the exact pixel spacing between individual items.

Section d'étirement #

Toggle this button to turn the Elementor mega menu to full-width, which spans from right to left of the screen’s width.

Sélectionnez la balise HTML #

• Sélectionnez votre Balise HTML depuis Dérouler to create custom WP menu.

Si vous voulez le voir en action, regardez cette vidéo et faites-le vous-même en quelques minutes.

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 Texte.
• Ajouter ou modifier Sous-titre.
• Permettre de Afficher l'étiquette.
• Ajouter ou modifier Étiquette.
• Personnaliser Couleur d'arrière-plan, typographie, remplissage, alignement, rayon.
• Une fois terminé, cliquez sur Mettre à jour et fermez la fenêtre.

Étape #3 : Personnaliser l'icône #

• Maintenant, va à Onglet Icône=> Choisissez n'importe quelle couleur parmi les Palette de couleurs.

• Sélectionner Icône du Bibliothèque d'icônes.

É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.
• Sauvegarder 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. Voyons à l'ajouter.

• Aller vers ElementsKit → En-tête de pied de page → et cliquez Ajouter un nouveau.
• Une boîte contextuelle s'ouvrira avec des options.

• Dans la boîte de dialogue, tapez un Titre, sélectionnez le Tapez → Entête.
• Sélectionnez le Conditions → Site entier.
• Basculez le Activation option et cliquez sur Modifier avec Elementor.

• Sélectionnez votre Structure de la zone sélectionnée.

• Rechercher maintenant Menu de navigation=> Faites glisser le Menu de navigation Ekit et Baisse sur la zone sélectionnée.

** Remarque : assurez-vous de faire glisser le menu ElementsKit Nav, sinon votre Megmenu créé n'apparaîtra pas.

• Maintenant, va à 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.

Résultat final #

Une fois terminé, cliquez sur le Mise à jour button to save the menu created with the best mega menu plugin for Elementor.

Accédez maintenant à votre site et vous pourrez voir que votre menu Elementor Mega sélectionné s'affiche en conséquence.