Dans ce tuto WordPress Divi, je vais vous apprendre à passer d'un menu à plusieurs menus déroulants comme celui-ci à un menu comme celui-là, appelé aussi méga menu. Bonjour à tous, c'est Alain, heureux de vous retrouver. Dans ce tutoriel aujourd'hui, je vais vous montrer comment réaliser un méga menu avec Divi.
Un méga menu peut être intéressant dans le cas où vous avez plusieurs menus déroulants. Il permet aux visiteurs de dérouler tous les menus en un seul menu, assez large, et de voir en un seul coup d'œil tous les produits et options disponibles, d'où ce nom de méga menu. Pour cet exercice, nous utiliserons Divi et son très pratique Divi Builder. Si vous n'avez pas encore Divi, je vous encourage à l'acheter. Son constructeur de pages intuitifs vous aidera vraiment à créer votre contenu sous WordPress.
Vous trouverez à cet effet sous la vidéo mon lien affilié qui vous offrira une réduction sympa de 20%. Je pense que le lien est toujours actif. N'oubliez pas de liker la vidéo si vous l'aimez et bien sûr de vous abonner en activant la cloche afin d'être informé des futurs tutos Alpa14.
Allez, on y va et je vous dis tout sur le méga menu façon Divi. Alors nous allons partir d'un site fictif qui est celui d'une agence de voyage qui offre de multiples destinations dans le monde. Destinations comme il est écrit avec des paysages qui sont vraiment inoubliables. Alors sur la page on voit que les voyages sont regroupés autour de quatre continents ou régions.
Nous avons l'Europe, l'Afrique, l'Amérique du Sud et l'Asie. Sous chacune de ces régions il y a à chaque fois un menu déroulant et pour voir toutes ces destinations il faut cliquer sur chacun de ces menus. au risque d'oublier ce qui a été vu dans le menu précédent. L'exercice du jour consiste donc à réaliser un méga menu qui pourra regrouper toutes ces destinations, en conservant bien sûr ce classement, et les dévoiler en un seul clic, offrant ainsi au lecteur une meilleure expérience de navigation au travers de ces offres. Alors ici j'ai choisi cet exemple d'agence de voyage, mais vous imaginez bien que cette situation peut s'adapter à n'importe quelle autre configuration, et notamment aux magasins qui ont des catégories et des sous-catégories.
Alors, Pour réaliser ce menu, nous allons nous rendre dans le menu WordPress de gauche, puis nous allons choisir Apparences et ensuite Menu. J'arrive ici dans ma partie Menu. Je reconnais l'aborescence de mon menu que j'avais appelé Menu Header. Je descends. Vous voyez que le menu déroulant d'Europe est ici.
Il est légèrement décalé, légèrement en dessous de la catégorie Europe. Pareil, Afrique, Amérique, Asie. Et enfin...
la dernière page de premier niveau qui est la page contact alors ce que nous allons faire c'est que nous allons ajouter une page qui va être un lien personnalisé ce n'est pas une page qui existe vraiment physiquement dans mon site mais pour l'exercice je vais la créer donc ici lien personnalisé je vais l'appeler nos produits ce sera à partir de cette page que sera déclenché le méga menu et je vais donner donc un dièse qui simulera une adresse url un lien mettre un dièse peut être intéressant surtout si vous êtes en en tête de menu ainsi cela simulera une page mais le lien ne sera pas cliquable voilà et je fais ajouter au menu cette page a dû se mettre tout en bas je vais la remonter par glisser déposer Voilà, je vais la placer juste en dessous de qui sommes nous, comme ceci. Et maintenant, ce que je vais faire, vu que c'est la page qui va déclencher ce méga menu, je vais placer chacune de mes catégories, de mes régions, de mes pays, je vais les placer en dessous de nos produits. Ce sera ainsi des sous-menus de cette page non active qui est nos produits.
Donc regardez Europe, vous voyez, je prends le bloc Europe et je le tire d'un cran simplement. juste sous nos produits. Voilà, je fais pareil avec Afrique, un seul cran.
Pareil avec Amérique du Sud, un seul cran. Et pareil avec Asie, un seul cran. Voilà, et maintenant j'enregistre le menu. Voilà, donc maintenant je vais aller voir, je vais retourner sur mon site, je vais rafraîchir la page. Voilà, mon menu est mis à jour.
Donc maintenant, je n'ai plus qu'un seul menu déroulant qui est ici, avec des sous-menus déroulants. Regardez, Europe, Afrique, Amérique et Asie. Alors maintenant, pour obtenir notre méga menu, il va falloir revenir dans notre menu. Vous allez aller tout en haut dans Options de l'écran. Et ici, il va falloir activer la case Classe CSS, comme ceci.
Ensuite, sur la page Nos produits, donc la page qui va déclencher ce méga menu, vous cliquez. Et ici, dans Classe CSS, vous allez marquer Méga. tirer menu voilà comme ceci et vous enregistrez le menu retournons voir maintenant sur notre site je vais rafraîchir la page voilà qui est fait et maintenant regardez quand je vais sur nos produits et voilà mon méga menu est en place d'un coup d'oeil je peux voir toutes mes catégories tous les menus déroulants qui sont en fait déroulé et c'est vraiment un confort agréable lors de la navigation. A noter et à bien avoir l'esprit, le méga menu d'Eevee ne peut s'organiser qu'en 4 colonnes au maximum. Si vous choisissez d'avoir une 5ème colonne, celle-ci viendra se placer en dessous de la première.
Alors si vous avez besoin de plus de colonnes, ce que vous devrez faire c'est tout simplement créer un deuxième méga menu. Alors ce que nous allons faire maintenant c'est que nous allons aller modifier un peu l'esthétique de ce méga menu. Pour cela, nous allons revenir dans le menu de gauche WordPress. Et tout en bas, dans Divi, nous allons choisir Personnaliseur de thème. A cet endroit, nous allons pouvoir apporter quelques modifications à notre menu.
Alors, tout en haut, je vais aller sur Entête et Navigation. Voilà. Et je vais choisir Barre de menu primaire.
La voici. Alors, ici, nous allons pouvoir modifier différentes choses. La hauteur du menu.
Le logo, la taille du logo, la taille du texte. Peut-être que le texte, nous pouvons l'augmenter un peu, à savoir le passer peut-être en 16. C'est bien comme ceci. Ensuite, je peux modifier aussi différentes choses.
La couleur du texte, par exemple. Alors, vous voyez qu'ici, il y a une légère transparence. Je peux l'enlever afin que le texte soit complètement noir.
Voilà. Le lien actif actuellement il est en bleu, je peux cliquer, moi je vais choisir de mettre en orange comme ceci et puis ensuite nous allons pouvoir modifier la couleur de ligne du menu. Alors la couleur de ligne de menu je vais vous montrer, c'est cette petite ligne bleue qui est ici, je peux la changer et je vais la mettre aussi en orange.
Voilà alors là on voit qu'elle apparaît en orange. ça sera plutôt harmonieux avec le lien actif. Pour terminer, nous allons ajouter trois options disponibles.
Alors la première, c'est que nous allons ajouter une couleur de fond noir avec un léger transparent et nous allons passer le texte en blanc et nous ajouterons ensuite un petit effet d'animation au menu déroulant. Alors pour cela, tout d'abord la couleur du texte du menu déroulant, c'est ici. Je vais cliquer et je vais choisir blanc. Voilà.
Ensuite, un peu plus haut, la couleur de fond du menu déroulant. Je vais choisir ici. Je vais prendre du noir et je vais appliquer une légère transparence.
Voilà. Comme ceci. Je vais donc aller voir. Voilà.
Vous voyez ? Donc notre texte est passé en blanc et nous avons une légère transparence sur le menu. Alors il me semble que le texte n'est pas tout à fait blanc. Il doit y avoir de la transparent, je vais aller voir, donc couleur de texte, oui effectivement. Si je veux le texte plus blanc, je remonte légèrement la tirette.
Voilà, ainsi là j'aurai vraiment un texte blanc. Parfait, et pour terminer, je peux ajouter une petite animation du menu déroulant. Actuellement je suis sur du fondu, alors vous voyez qu'il y a quelques options qui sont ici.
Je peux avoir par exemple du basculé, alors le basculé ça risque d'être un peu violent, je vais vous montrer. C'est un peu violent, donc ce que je vais faire plutôt, je vais choisir étendre. On va avoir un petit effet de déroulé. Voilà, comme ceci. Pour terminer, je vais aller vérifier l'apparence de mon menu sous différents périphériques, à savoir la tablette.
Je peux cliquer en bas à gauche sur l'icône. Voilà, donc là c'est la vue tablette. Et mon menu apparaîtra ainsi. Mon menu, mon méga menu apparaît en noir.
Et je peux aussi vérifier sous périphérique mobile le plus petit, à savoir le téléphone. Voilà. Alors ce que je vais faire aussi, c'est que je vais publier afin d'enregistrer ces modifications apportées à ce menu. Voilà qui est fait. C'est très bien, mon méga menu est bien en place et il a été personnalisé avec ces quelques options que nous lui avons apportées.
Je vais revenir maintenant sur la page accueil. Je vais la rafraîchir afin que vous puissiez voir les modifications apportées. Les modifications ont bien été prises en compte. Si je vais sur la page nos produits, je vois mon méga menu se dérouler avec cette transparence sur du noir pour un petit effet très sympa.
Et maintenant vous savez comment créer un joli méga menu sous Divi. Voilà, ce sera tout pour cette vidéo. J'espère que cette vidéo pourra vous servir et que vous avez compris maintenant comment réaliser un méga menu avec Divi. Divi est vraiment un outil génial qui vous aidera, j'en suis certain. Je vous rappelle que si vous voulez acheter une licence Divi...
vous trouverez mon lien affilié dans la description de la vidéo, lien qui vous permettra de profiter d'une jolie réduction de 20%. Merci de liker la vidéo si vous l'avez appréciée, et de vous abonner en activant la cloche afin d'être informé des nouveautés de la chaîne. Voilà, ce sera tout pour aujourd'hui.
Je vous dis à très bientôt. Prenez bien soin de vous. Ciao !