Crée un Méga Menu avec Divi

par | Jan 31, 2018 | Aller + Loin avec Divi, Documentation | 6 commentaires

Le menus Mega est un excellent moyen pour mettre en valeur tes catégories de menu pour en facilité leur compréhension.

Le menu Mega va permettre à tes utilisateurs de voir plus de liens à la fois sans être obligé de descendre dans le bas de ta page. Tes utilisateurs vont avoir une vue d’ensemble de tes services.

L’avantage d’un Mega Menus c’est que lorsqu’on survole le lien dans le menu, celui-ci va se déplier et ainsi afficher les liens et sous-menus parents supplémentaires dans le menu déroulant.

Allez on arrête les grands discours, et on passe à la technique.

Comment ajouter un menu Mega DIVI à votre barre de navigation

Connectez-vous à votre tableau de bord WordPress et allez dans Apparences > Menus .

Créer un mega menu avec DIVI

Crée ton menu avec par exemple 4 liens parents.

Sous ces 4 liens parents créent 3 liens enfants, que tu vas positionner avec un décalage par rapport à son parent.

Créer un Mega Menu avec le thème DIVI

Crée un lien supplémentaire, C’est le Grand-parent qui va veiller sur les enfants du Méga Menu.

Création du méga menu

Maintenant, Pour que ton Mega Menu soit au top, il va te falloir ajouter une classe CSS spéciale au lien principal de niveau supérieur appelé « Grand-parent Mega Menu ».
Pour celà il te faut activer une petite option en haut de ton tableau de bord. C’est option d’écran !
Il te faut cocher l’option CSS.

Je design mon mega menu DIVI

Tu vas ajouter une classe CSS au lien que tu viens de créer « Grand-Parent Mega Menu ». Clique sur la flèche sur la droite de l’élément de menu « Lien personnalisé » pour faire basculer les options de configuration supplémentaires. Tu vas trouver la zone de texte intitulée Classes CSS et et tu vas entrer la classe « méga-menu ».

Ajouter une class CSS au méga menu de Divi

Maintenant, lorsque tu recharge ta page, tu peux voir que ton menu précédent a été déplacé dans le menu « Grand-parent Méga-Menu ».
Il te restera plus qu’à contempler ton superbe menu.

Ajouter une class CSS au méga menu de Divi

6 Commentaires

  1. Yvan Amand

    Bonjour j’ ai créé un mega-menu tel que vous l’expliquer et ça marche très bien, merci beaucoup.
    Mais….peut-on mettre le fond et les textes d’une autre couleur que le menu parent?
    Et si oui, à quel endroit dans Divi peut-on changer les couleurs du méga-menu, et comment peut-on faire celà?
    Merci beaucoup.

    Réponse
    • Emmanuelle

      Bonjour Armand
      Pour changer l’apparence du mega-menu, il va te falloir utiliser du css dans Tableau de Bord >> Divi>> Option du Thème >> Personnaliser CSS.
      Tu dois localiser les classes concernées avec l’inspecteur de code de ton navigateur et changer les valeurs background-color (pour le fond) et color (pour les couleurs de polices).
      Si tu ne connais pas le css, tu peux demander à des devs de le faire pour toi. Sur le site de Adopte Ton Plugin ils te proposent soit de le faire pour toi (hop là vite faire bien fait tu passes à autre chose) soit de te guider en partage d’écran et t’expliquer comment faire pour que tu comprennes la démarche et sois capable de le refaire.
      Je te mets les liens :
      https://adopte-ton-plugin.fr/cartes-formations/
      https://adopte-ton-plugin.fr/depannage-wordpress/
      Tiens nous au courant de comment tu as fait. Peux tu nous donner l’adresse de ton site pour qu’on puisse voir ta personnalisation ?

      Réponse
  2. Sissi

    Bonjour,

    Super ça marche parfaitement! Par contre, j’ai beaucoup de liens enfants et les colonnes dépassent de l’écran sans pouvoir scroller vers le bas. Comment puis-je mettre un lien parent sur 2 colonnes?
    Merci

    Réponse
    • Céline Peyrot

      Bonjour Sissi,

      Pour cela malheureusement, il faut coder un peu en CSS ! 🙂

      Réponse
  3. Aurore

    Bonjour,
    est-ce normal que le lien grand-parent ne soit pas cliquable ? Comment faire pour qu »il le soit ?
    Merci pour votre retour
    Aurore

    Réponse
    • Céline Peyrot

      Bonjour Aurore,
      Peux-tu me donner un exemple ? Capture d’écran ou lien vers ton site ?

      Réponse

Soumettre un commentaire

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