Comment créer un méga menu avec Elementor et ElementsKit

Pouvez-vous imaginer un grand site Web sans un méga menu ? 
Certainement pas!

Les gens sont de plus en plus attentifs au temps qu’ils passent en ligne. Une étude récente montre que  94% des internautes disent qu’une navigation facile est la fonctionnalité la plus utile d’un site Web.
Presque tout le monde, non ?

Pour augmenter la convivialité et la capacité d'engager l'utilisateur, le méga menu joue un rôle essentiel dans l'amélioration des personnes. Un méga menu simple mais fonctionnel encouragera les utilisateurs à explorer encore plus de zones de votre site Web et à agir instantanément.

Même les plus grands sites de commerce électronique, comme Amazon et eBay, utilisent des méga-menus pour aider les utilisateurs à parcourir l'intégralité de la navigation d'un site Web dans un seul menu. 

Non seulement un site Web de commerce électronique, mais un méga menu est également une excellente option pour tous les sites Web d'actualités, magazines, éditeurs de contenu, entreprises, etc. 

Lors de la création d'un grand site Web avec plusieurs catégories et sous-catégories, Megamenu est un grand menu extensible à plusieurs colonnes où tout est visible en même temps.
J'en suis sûr, tant de cahiers me viennent à l'esprit ! Droite? 

Pas de soucis… Je vais vous aider ici à obtenir toutes les réponses à vos questions et à la fin de cet article, vous apprendrez à créer votre propre méga menu en toute simplicité. 

Présentation du méga constructeur de menus ElementsKit

Utilisation des fonctionnalités riches Générateur de mégamenu ElementsKit vous pouvez créer et personnaliser tout type de Megamenu avec une interface de contenu en direct Elementor. 

Vous obtiendrez des variantes dans le méga menu telles que le menu Nav et le méga menu vertical ainsi que de nombreuses options de personnalisation. 

Dans l’ensemble, ElementsKit Elementor Mega Menu est un constructeur de menus complet et riche en fonctionnalités pour votre site professionnel. 

Comment créer un méga menu avec Elementor ? 

Elementor vous offre de nombreuses fonctionnalités pour concevoir votre méga menu mais pour obtenir des fonctionnalités supplémentaires, vous pouvez utiliser un plugin tiers.

Justement, il te faut ElementsKit. Bien qu'il existe de nombreux plugins pour créer un méga-menu, ElementsKit prend en charge différents types de méga-menus, notamment le méga-menu vertical, le méga-menu horizontal et bien d'autres options de personnalisation.

Ici, nous allons vous montrer en détail le processus étape par étape pour créer un méga menu entièrement fonctionnel.

Ce dont vous avez besoin pour créer un mégamenu avec 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

• 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

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érez n'importe quel Méga menu.

Contrôle Mise en page

• 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électionner Écart de colonne

• É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 méga menu Texte du titre

• 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 Icône

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

Étape #4 : Personnaliser 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.

Résultat final

• 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.

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 !