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

Comment créer un méga menu avec elementor et elementkit

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

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.

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 facilement et en douceur. Le plugin de l'éditeur de blocs GutenKit est livré avec le moyen le plus simple de créer un méga menu WordPress dans Gutenberg.

Avec GutenKit, vous pouvez créer le menu entier dans l'éditeur et concevoir un méga menu dans une orientation verticale et horizontale.

Tout ce dont vous avez besoin est d'installer le plugin GutenKit Pro et de commencer à créer votre magnifique site dans Gutenberg.

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 !


commentaires

  1. Avatar de Peter
    Pierre

    Bonjour,
    super tuto !
    J'ai encore une question sur le Mega Menu :
    Puis-je ouvrir le Mega Menu par clic et non par survol ?
    Je serais très heureux d'avoir une réponse.
    Salutations,
    Pierre

    1. Avatar de Tanjana Sabrin
      Tanjana Sabrin

      Salut Peter,

      Merci beaucoup pour votre appréciation. Cela signifie beaucoup pour nous. Actuellement, la fonctionnalité n’est pas disponible. Mais vous pouvez certainement demander une fonctionnalité pour cela. Nous ajoutons continuellement de nouvelles fonctionnalités en fonction des besoins de nos clients.

      Voici le lien - https://wpmet.com/plugin/elementskit/roadmaps/#ideas. Partagez simplement votre idée géniale et cliquez sur le bouton Soumettre. 😍

      Restez en sécurité 😃

  2. Avatar d'Andrew
    André

    Salut,
    J'adore votre méga constructeur de menus, mais j'ai un petit problème.
    L'un de mes méga menus se trouve à l'extrême droite de mon en-tête et une partie du méga menu disparaît sur le côté droit.
    Existe-t-il une option pour aligner le méga menu à droite, à gauche ou au centre ?

    Merci

    1. Avatar de Ayub Ali

      Salut André,

      Sans vérifier votre site, nous ne pouvons pas vous dire quelle est exactement la cause de ce problème. Veuillez donc nous donner le lien de votre site Web en direct ou une capture d'écran pertinente pour comprendre clairement le problème. Mais vous pouvez essayer de changer la position du mégamenu par défaut en suivant cette capture d'écran (https://d.pr/i/ccf6RC). Faites-nous part de la mise à jour ici ou mieux si vous pouvez ouvrir un ticket d'assistance : https://help.wpmet.com/

  3. Avatar de Farzan

    Bonjour, merci pour ce tuto génial ! Je pourrais tout appliquer, juste un problème mineur. Dans l'en-tête j'ai 4 pages, l'une d'elles a un méga menu si vous la survolez. Cependant, dans l'en-tête, je ne peux pas cliquer sur la page parent (portant le nom : persoonlijk), je ne peux cliquer que sur les éléments du méga-en-tête. Pouvez-vous voir ce qui me manque ? (le site est encore en développement, mais vous pouvez voir l'en-tête dans le https://insight.nl/home URL. J'aimerais avoir la possibilité de pouvoir également cliquer sur le bouton PERSOONLIJK. Pourriez-vous m'aider à découvrir ce que j'ai fait de mal là-bas ?
    Merci d'avance.

    1. Avatar de Ayub Ali

      Bonjour Farzan, Comme il s'agit d'un problème technique et que vous pourriez avoir besoin d'une aide personnalisée, je vous suggère d'ouvrir un ticket de support depuis https://help.wpmet.com/

      Comme notre équipe d'assistance est très utile, je peux dire qu'elle fera de son mieux pour résoudre votre problème dès que possible.

      Meilleurs vœux.

  4. Avatar de Mani

    Merci beaucoup pour cet excellent article. Il est très utile. Tout le monde peut facilement comprendre en regardant beaucoup de vidéos sur Youtube.

  5. Avatar de Mellisa
    Mellisa

    Hé,
    Super tutoriel ; vous l'avez expliqué clairement et simplement. Créer un bon méga menu est essentiel car il vous aide à souligner visuellement la relation entre les éléments, aide les utilisateurs à connaître les choix et vous aide à utiliser facilement les icônes et les images.

  6. Avatar de David

    J'ai suivi exactement ce tutoriel et mon menu n'apparaîtra PAS.
    Lorsque vous accédez à la page que j'ai liée ci-dessus, vous verrez un menu – c'est le menu WordPress par défaut. Juste en dessous, j'ai utilisé votre widget de menu de navigation et le menu ne se remplira pas.

    Des pensées?

  7. Avatar de Collin
    Collin

    Le méga menu est génial ! Juste un truc : je veux que la page correspondante s'ouvre en cliquant sur le nom du menu et que le Mega Menu apparaisse au survol. Comment je fais ça? Maintenant, lorsque je clique, seul le Mega Menu apparaît. Merci pour l'aide.

  8. Avatar de Margaret
    Marguerite

    Merci pour ce super tuto ! Est-il possible de créer un lien hypertexte entre le titre et la description dans le méga menu sous Modifier le bouton ? J'ai une liste d'états et de villes dans mon méga menu, mais j'ai le problème de devoir lister l'état deux fois pour pouvoir en créer un avec un hyperlien dans la section Paragraphe. Existe-t-il un moyen d'éliminer cette redondance ?

  9. Avatar de Margaret
    Marguerite

    J'ai oublié d'ajouter s'il était possible d'avoir également la possibilité de survoler le titre, permettant ainsi aux villes d'apparaître et d'être sélectionnées en dessous. Merci.

  10. Avatar de Sami Azam
    Sami Azam

    Comment pouvons-nous afficher le Mega Menu sur les icônes de hamburgers au lieu d'un élément de menu ?

    1. Avatar de Dipa Shaha
      Dipa Shaha

      Cher Sami
      Malheureusement, la fonctionnalité souhaitée n'est pas disponible. Cependant, vous pouvez demander cette fonctionnalité. L'équipe ElementsKit est toujours heureuse de recevoir des suggestions de fonctionnalités.
      Vous pouvez demander une fonctionnalité en utilisant ce lien https://wpmet.com/plugin/elementskit/roadmaps/#ideas
      Merci

  11. Avatar de ajay

    J'ai suivi exactement ce tutoriel et mon menu n'apparaîtra PAS.
    Lorsque vous accédez à la page que j'ai liée ci-dessus, vous verrez un menu – c'est le menu WordPress par défaut. Juste en dessous, j'ai utilisé votre widget de menu de navigation et le menu ne se remplira pas.

    je pense qu'il y a un bug dans le méga menu, il ne fonctionne plus maintenant

    1. Avatar de Hasib

      Bonjour Ajay, assurez-vous d'avoir créé un menu dans le backend avant de créer un méga menu. Et après avoir sélectionné le menu de navigation, vous devez choisir le menu que vous souhaitez partager dans le méga menu.

  12. Avatar de Jy

    Salut,

    Le mégamenu fonctionne très bien jusqu'à ce que je mette à jour tous les plugins, c'est bizarre que certains méga menus fonctionnent mais certains d'entre eux non et affichent « aucun contenu trouvé », j'ai dû restaurer la version des plugins mais je n'arrive pas à résoudre les problèmes. Une idée de la cause de ce problème ?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *