Tutoriel WordPress Divi : Création d'un méga menu

Introduction

• Présentateur : Alain
• Objectif : Apprendre à réaliser un méga menu avec Divi.
• Avantages : Améliorer l'expérience de navigation en regroupant plusieurs menus déroulants en un seul.
• Outil requis : Divi et Divi Builder
  • Acheter Divi pour bénéficier du constructeur de pages intuitif.
  • Lien affilié pour une réduction de 20%.
• Invitation : S'abonner et liker la vidéo.

Cas pratique : Agence de voyage

• Contexte : Site fictif d'une agence offrant des destinations sur quatre continents.
  • Europe
  • Afrique
  • Amérique du Sud
  • Asie
• Problème : Plusieurs menus déroulants risquent de faire oublier les options vues précédemment.
• Solution : Création d'un méga menu regroupant toutes les destinations.

Étapes de création du méga menu

Configuration initiale

1. Accéder au menu WordPress : Aller dans "Apparences" puis "Menu".
2. Créer un lien personnalisé
   • Nommer "Nos produits".
   • Utiliser un dièse pour l'URL.
3. Réorganisation du menu
   • Placer "Nos produits" sous "Qui sommes-nous".
   • Glisser-déposer chaque région sous "Nos produits".

Activation du méga menu

1. Options de l'écran : Activer "Classe CSS".
2. Configurer le méga menu
   • Dans "Classe CSS", écrire "Méga-menu".
3. Rafraîchir la page pour voir le méga menu avec les catégories.

Personnalisation du méga menu

Modifications esthétiques

• Utiliser le Personnaliseur de thème
  • Menu de gauche dans Divi.
  • Choisir "Entête et Navigation" puis "Barre de menu primaire".
• Options disponibles
  • Modifier la taille du texte, couleur du texte, couleur du lien actif.
  • Modifier la couleur de la ligne du menu.
  • Ajouter des effets d'animation (fondu, étendre).

Vérification sur différents périphériques

• Tablette et mobile : Vérifier l'apparence et valider en publiant les modifications.

Conclusion

• Divi : Un outil puissant pour créer des méga menus personnalisés.
• Invitation : Utiliser le lien affilié pour une réduction sur Divi.
• Recommandation : Liker et s'abonner à la chaîne.
• Final : Remerciement et encouragement à tester Divi.