Tuto WordPress Divi : Création d'un Méga Menu

Introduction

• Tuto sur la création d'un méga menu sous WordPress avec Divi.
• Intérêt du méga menu : Permet de regrouper plusieurs menus déroulants en un seul menu large.
• Avantages : Vue d'ensemble des produits/options.

Outils Utilisés

• Divi et Divi Builder.
• Lien affilié pour une réduction de 20% sur Divi.

Exercice Pratique : Site d'Agence de Voyage

• Exemple d'un site fictif d'agence proposant des destinations par continent/région.
• Objectif : Regrouper les menus déroulants (Europe, Afrique, Amérique, Asie) en un seul méga menu.

Création du Méga Menu

1. Accéder à WordPress :

   • Menu -> Apparences -> Menu.
   • Identifier le menu "Menu Header".

2. Ajout d'une Page Lien Personnalisé :

   • Créer une page "Nos produits" avec un dièse (#) comme lien.
   • Servira de déclencheur pour le méga menu.

3. Organisation des Sous-Menus :

   • Placer chaque région (Europe, Afrique, Amérique, Asie) sous "Nos produits".
   • Sauvegarder le menu.

4. Activation du Méga Menu :

   • Options de l'écran -> Activer "Classes CSS".
   • Ajouter "Méga-menu" dans la classe CSS de "Nos produits".

Personnalisation du Méga Menu

1. Accéder au Personnaliseur de Thème :

   • Divi -> Personnaliseur de thème -> Entête et Navigation -> Barre de menu primaire.

2. Modifications Esthétiques :

   • Ajuster hauteur du menu, taille du logo, taille et couleur du texte.
   • Modifier couleur de texte et de fond pour le menu déroulant.
   • Ajouter effets d'animation (ex : étendre).

3. Vérifications sur Différents Périphériques :

   • Tablette et mobile.
   • Publier les modifications.

Conclusion

• Vérification des modifications sur la page d'accueil.
• Encouragement à utiliser Divi pour créer des méga menus.
• Rappel du lien affilié pour Divi.

Rappel Final

• Liker et s'abonner à la chaîne pour plus de tutoriels.
• Clôture du tuto et remerciements.