Comment ajouter un Mega Menu sur votre site WordPress (étape par étape)

Les méga-menus vous permettent d’afficher une grande variété de liens et de catégories de contenu dans une présentation structurée et facile à parcourir.

Cela peut grandement améliorer l’expérience de navigation des internautes en rendant la navigation de votre site plus intuitive et accessible.

Chez WPBeginner, nous utilisons un méga menu pour afficher nos liens les plus importants en haut de la page. Lorsque les utilisateurs cliquent dessus, un menu déroulant s’ouvre, révélant des liens clés supplémentaires. Cette configuration nous a permis de créer un menu de navigation propre et organisé, présentant un large éventail d’options sans que la page ait l’air encombrée.

Dans cet article, nous allons vous montrer comment ajouter facilement un méga menu à votre site web WordPress, étape par étape.

Pourquoi ajouter un Mega Menu sur votre site WordPress ?

WordPress est livré avec un constructeur par glisser-déposer que vous pouvez utiliser pour créer toutes sortes de menus, y compris des menus déroulants, des menus d’en-tête, et plus encore. Il existe même des extensions qui vous permettent de créer des menus de navigation personnalisés dans les thèmes WordPress.

Cependant, si votre site a beaucoup de contenu, vous devrez peut-être créer un méga menu à la place. Cela vous permet d’ajouter des menus déroulants multi-colonnes à la structure de menu standard de WordPress.

Vous pouvez utiliser les méga-menus pour organiser votre contenu sous différents titres et sous-titres, afin que les internautes puissent trouver rapidement ce qu’ils recherchent. Par exemple, si vous créez une place de marché en ligne, vous pouvez organiser toutes vos catégories et sous-catégories de produits dans un méga-menu.

Les méga-menus peuvent également afficher un contenu riche à vos internautes, comme des vidéos, du texte, des recherches et des publications récentes.

Vous pouvez également ajouter des images, qui facilitent la lecture des méga-menus.

Cela dit, voyons comment vous pouvez facilement ajouter un méga menu à votre site WordPress.

Comment créer un Mega Menu pour votre site WordPress

La façon la plus simple d’ajouter un méga menu à votre site WordPress est d’utiliser Max Mega Menu. Ce plugin vous permet d’ajouter un contenu riche à vos méga menus, y compris des vidéos, des galeries d’images, des recherches, et plus encore.

Vous pouvez ainsi créer des menus plus attrayants et plus utiles.

Vous pouvez également modifier le style du menu en ajoutant différentes couleurs, en changeant la taille de la police et en utilisant différentes icônes.

Tout d’abord, vous devrez installer et activer l’extension. Si vous avez besoin d’aide, veuillez consulter notre guide sur l ‘installation d’une extension WordPress.

Activer les Mega Menus sur votre site WordPress

Après l’activation, rendez-vous sur la page Mega Menu  » Menu Locations à partir du tableau de bord de WordPress pour voir les différentes zones où vous pouvez ajouter un méga menu.

Vous pouvez voir différentes options en fonction de votre thème WordPress.

Pour commencer, vous devrez activer les méga-menus dans tous les Emplacements où vous souhaitez les utiliser.

Pour ce faire, il suffit de cliquer sur un emplacement pour le déplier, puis de cocher la case « Activé ».

Ensuite, vous pouvez modifier l' »évènement » qui ouvrira le méga menu.

Le paramètre par défaut est  » Hover intent « , ce qui signifie que l’internaute doit passer sa souris sur le méga menu pendant quelques secondes pour le déclencher. Cela fonctionne bien pour la plupart des sites WordPress, mais vous pouvez également ouvrir le menu déroulant « Effet » et choisir « Hover » ou « Click » à la place.

Si vous choisissez « Cliquer », l’internaute devra cliquer pour explorer le méga-menu. Cette option peut s’avérer utile si vous craignez que les internautes ne déclenchent le menu par accident, ce qui peut s’avérer frustrant.

Quant à l’option « Survol », elle ouvre votre méga-menu dès que l’internaute passe la souris dessus. Cela peut encourager les internautes à explorer différentes parties de votre site. Vous pouvez donc utiliser « Survol » sur les pages d’atterrissage ou sur la page d’accueil de votre site.

Après avoir pris cette décision, vous pouvez modifier la façon dont le menu s’ouvre à l’aide des Réglages de l’effet.

Max Mega Menu dispose de différentes animations que vous pouvez essayer, notamment le fondu et le diapositif. Vous pouvez également modifier la vitesse de l’animation. En essayant différentes animations, vous pouvez créer un méga menu qui attire l’attention de l’internaute.

Si vous ne souhaitez pas utiliser d’animations, il vous suffit d’ouvrir le premier menu déroulant et de sélectionner « Aucune ».

Par défaut, Mega Menu n’utilise pas d’animations sur les appareils mobiles, car les smartphones et les tablettes ont généralement une puissance de traitement moindre. Cependant, si vous souhaitez créer une animation unique pour les internautes mobiles, alors vous pouvez utiliser les Réglages dans la zone ‘Effet (Mobile)’.

Si vous souhaitez tester vos méga menus sur mobile, consultez notre guide sur la façon d’afficher la version mobile des sites WordPress à partir d’un ordinateur de bureau.

Si vous avez choisi « Cliquer » dans le menu déroulant « Événement », assurez-vous de sélectionner l’onglet « Avancé ».

Ici, vous pouvez utiliser le « comportement de l’évènement de clic » pour définir ce qui se passe lorsque l’internaute clique sur votre méga-menu. Par exemple, le deuxième clic peut fermer le menu ou ouvrir un nouveau lien.

Vous pouvez consulter d’autres paramètres, mais cela devrait suffire pour la plupart des blogs et sites WordPress.

Lorsque vous êtes satisfait de la configuration de l’extension, cliquez sur « Enregistrer les modifications ».

Pour activer les méga-menus pour d’autres Emplacements, il suffit de suivre la même procédure que celle décrite ci-dessus.

Personnalisez l’apparence des méga-menus sur votre site

L’étape suivante consiste à configurer l’apparence des méga-menus sur votre site.

Vous pouvez le faire en sélectionnant l’onglet « Thèmes du menu » à gauche de l’écran.

Sur cet écran, vous pouvez modifier la direction des icônes de flèches, utiliser une hauteur de ligne différente, ajouter une ombre, etc.

Lorsque vous êtes satisfait de vos réglages, n’oubliez pas de cliquer sur « Enregistrer les modifications ».

Si vous souhaitez retirer ces modifications à tout moment, il vous suffit de cocher la case « réinitialiser le style du widget », puis de cliquer sur « enregistrer les modifications ».

Ensuite, vous pouvez personnaliser la barre de menu, qui est la barre que les internautes voient lorsque le menu est dans son état par défaut, replié.

Pour effectuer ces modifications, cliquez sur l’onglet « Barre de menu », puis utilisez les paramètres pour modifier la couleur d’arrière-plan, le remplissage, le rayon de la bordure, etc.

Vous pouvez même créer un dégradé de couleurs en sélectionnant deux couleurs différentes dans la section « Arrière-plan du menu ».

Si vous défilez vers le bas, vous pouvez modifier l’aspect du menu de niveau supérieur.

Il s’agit de la première ligne d’éléments, qui est visible lorsque le méga-menu est replié.

Compte tenu de leur importance, il peut être judicieux de faire ressortir les éléments du menu de premier niveau.

Par exemple, dans l’image suivante, nous utilisons une couleur d’arrière-plan différente.

Dans la section « État de survol », vous pouvez mettre en évidence l’élément de menu de premier niveau actuellement sélectionné.

Par exemple, dans l’image abrégée, nous utilisons un effet de soulignement.

Cela peut aider le visiteur à voir où il se trouve dans le menu, ce qui est particulièrement utile pour les sites qui ont besoin de grands méga-menus.

Si vous ajoutez un état de survol, défilez vers le bas de l’écran et cochez la case « Mettre en évidence l’article actuel ».

Vous pouvez ensuite modifier l’aspect du sous-menu.

Il s’agit du menu qui apparaît sous un parent de niveau supérieur, comme vous pouvez le voir dans l’image suivante.

Pour personnaliser le sous-menu, cliquez sur l’onglet « Mega Menus ».

Vous pouvez maintenant utiliser ces réglages pour modifier la couleur d’arrière-plan du sous-menu, augmenter le rayon pour créer des coins arrondis, ajouter de la marge interne, etc.

Vous ajoutez du contenu à vos méga-menus à l’aide de widgets. Par exemple, vous pouvez ajouter un widget Galerie et afficher vos produits WooCommerce les plus populaires, ou embarquer un nuage d’identifiants à l’intérieur du méga menu. Ces widgets peuvent fournir des informations supplémentaires, ou encourager les internautes à cliquer sur certains éléments du menu.

Vous pouvez personnaliser l’apparence de ces widgets en défilant jusqu’à la section « Widgets ». Par exemple, vous pouvez modifier la couleur du titre du widget, augmenter la taille de la police, ajouter de la marge interne et ajuster l’alignement.

Dans cet écran, vous pouvez également personnaliser l’apparence des articles de menu de deuxième niveau et de troisième niveau sur votre site, votre blog ou votre place de marché en ligne. Ce sont les enfants des éléments de menu de premier niveau.

Lors de la Version de vos menus, il est possible d’ajouter quatre niveaux ou même plus pour créer un méga menu imbriqué. Si vous faites cela, WordPress utilisera simplement le style du troisième niveau pour tous les niveaux suivants.

Vous pouvez voir cela en action dans l’image suivante. Le texte du deuxième niveau est rouge, et les troisième et quatrième niveaux utilisent le même texte bleu.

Lorsque vous êtes satisfait de la façon dont le menu est configuré, n’oubliez pas de cliquer sur « Enregistrer les modifications ».

Comment ajouter un Mega Menu sur votre site WordPress

Une fois que vous avez fini de personnaliser le méga menu, il est temps de l’ajouter à votre site.

Il suffit de se rendre sur la page Apparence  » Menus dans la barre latérale d’administration.

Si vous souhaitez transformer un menu existant en méga-menu, ouvrez la liste déroulante « Sélectionné un menu à modifier » et choisissez-le dans la liste. Sachez toutefois que le menu choisi doit être assigné à un Emplacement pour lequel vous avez activé la fonctionnalité de méga-menu.

Si vous souhaitez partir de zéro, cliquez sur « Créer un nouveau menu » et saisissez un titre pour votre nouveau méga-menu.

Vous pouvez ensuite sélectionner l’Emplacement que vous souhaitez utiliser et cliquer sur « Créer un menu ». Une fois encore, il doit s’agir d’un emplacement où vous avez activé les méga-menus.

Ajouter du contenu à votre menu WordPress

Après cela, ajoutez toutes les pages, les publications, les produits WooCommerce et tout autre contenu que vous souhaitez inclure dans le méga menu.

Pour obtenir des instructions étape par étape, consultez notre guide du débutant sur l ‘ajout d’un menu de navigation dans WordPress.

Ensuite, vous devez organiser vos articles en fonction des parents et des sous-menus que vous souhaitez utiliser dans le méga-menu. Pour créer un sous-menu, faites glisser un article sous le parent, puis faites-le glisser légèrement vers la droite avant de le relâcher.

Pour créer plusieurs niveaux, il suffit de faire glisser les articles vers la droite pour qu’ils apparaissent en retrait les uns par rapport aux autres. Cette méthode est similaire à la création d’un menu déroulant dans WordPress.

Activer la fonctionnalité Mega Menu

Une fois cela fait, cliquez pour développer la section « Max Mega Menu Settings » et cochez la case à côté de « Enable ».

Dans cette boîte, vous pouvez également surcharger les réglages du méga menu par défaut. Cela vous permet de créer des méga menus uniques pour différentes zones de votre site WordPress, alors allez-y et faites toutes les modifications que vous voulez.

Cliquez ensuite sur « Enregistrer ».

Créer la mise en page du Mega Menu

Survolez le premier article du niveau supérieur et vous verrez apparaître un nouveau bouton « Mega Menu ». Cliquez sur ce bouton.

Vous voyez maintenant tous les Réglages de cet article de premier niveau.

Par défaut, Max Mega Menu utilisera le style flyout, où les sous-menus  » sortent  » sur le côté. Pour créer un méga menu à la place, ouvrez le menu déroulant « Sub menu display mode » et choisissez « Standard Mise en page » ou « Grid Mise en page ».

La présentation standard montre tous les sous-menus en colonnes.

La mise en page en grille vous permet d’organiser les articles des sous-menus en colonnes et en lignes.

Cette option est idéale si vous souhaitez afficher beaucoup de contenu, comme tous les produits numériques de votre magasin en ligne, ou si vous avez une mise en page très spécifique à l’esprit.

Après avoir sélectionné la mise en page standard ou en grille, vous verrez tous les sous-menus assignés à ce parent.

Vous pouvez maintenant modifier la disposition de ces articles dans le méga menu.

Si vous utilisez la mise en page standard, vous pouvez modifier le nombre de colonnes à l’aide du menu déroulant situé dans le coin supérieur droit.

Si vous utilisez une mise en page en grille, vous pouvez ajouter des colonnes et des lignes à l’aide des boutons « +Colonne » et « +Rangée ».

Lorsque vous êtes satisfait de la mise en page, vous pouvez organiser les articles du sous-menu en différentes colonnes et lignes par glisser-déposer.

Ensuite, il est temps de modifier l’espace occupé par chaque article dans la colonne. Max Mega Menu affiche la taille actuelle sous la forme d’une fraction de la largeur totale disponible.

Par exemple, dans l’image suivante, les deux colonnes occupent la moitié de l’espace disponible.

Pour modifier la taille d’un article, il suffit de cliquer sur ses boutons fléchés pour agrandir ou réduire la fraction.

Créer un Mega Menu adapté aux mobiles (Mise en page uniquement)

Par défaut, Max Mega Menu affiche le même contenu sur les ordinateurs de bureau et les appareils mobiles. Cela peut être un problème avec les mises en page en grille, car les smartphones et les tablettes ont généralement des écrans plus petits, et le défilement horizontal peut être difficile.

Si vous utilisez la mise en page en grille, vous pouvez alors créer différents méga menus pour les appareils mobiles. Par exemple, vous pourriez utiliser moins de colonnes afin que les utilisateurs/utilisatrices n’aient pas à défiler horizontalement. De cette façon, vous pouvez créer un menu WordPress adapté aux mobiles.

Vous pouvez masquer des colonnes ou des lignes entières à l’aide de l’icône « Caché sur mobile », qui ressemble à un petit téléphone mobile.

Il suffit de permuter l’icône pour masquer et afficher des contenus différents sur ordinateur et sur mobile.

Ajouter du contenu riche avec les widgets Mega Menu

Ceci fait, vous pouvez commencer à ajouter des widgets au méga menu. Cela vous permet d’afficher du contenu supplémentaire dans le sous-menu, comme des commentaires récents, des vidéos, des galeries, etc.

Par exemple, vous pouvez utiliser des images pour promouvoir une vente sur votre boutique en ligne ou mettre en valeur vos derniers produits.

Pour ajouter un widget, il suffit de cliquer pour ouvrir la liste déroulante « Sélectionné un widget…. ».

Vous pouvez maintenant choisir un widget dans la liste.

WordPress ajoute automatiquement le widget à une colonne ou à une ligne, mais vous pouvez le déplacer à un nouvel emplacement en utilisant la fonction « glisser-déposer ».

Pour configurer le widget, cliquez sur sa petite icône en forme de clé à molette.

Cela ouvre une fenêtre surgissante dans laquelle vous pouvez ajouter du contenu au widget et modifier ses Réglages.

Les options varient en fonction du type de widget que vous créez. Par exemple, si vous ajoutez un widget de lecteur de musique audio au méga-menu, vous verrez des Réglages qui vous permettront de téléverser une piste audio.

Tous les widgets disposent d’un champ « Titre » dans lequel vous pouvez ajouter un texte qui apparaîtra au-dessus du widget.

Lorsque vous avez terminé, cliquez sur « Enregistrer » pour stocker vos modifications, puis sélectionnez « Fermer ». Pour ajouter d’autres widgets au méga-menu, il suffit de suivre la même procédure que celle décrite ci-dessus.

Avis sur les réglages par défaut du méga menu

Cliquez ensuite sur l’onglet « Réglages ».

Ici, vous pouvez utiliser des cases à cocher pour masquer ou afficher différents contenus dans le sous-menu.

Vous pouvez également masquer ou afficher le sous-menu sur les appareils mobiles et les ordinateurs de bureau, et modifier l’alignement afin que le sous-menu s’ouvre à gauche ou à droite du parent de niveau supérieur.

Si vous apportez des modifications aux réglages par défaut, n’oubliez pas de cliquer sur « Enregistrer les modifications ».

Ajouter des icônes d’images au Mega Menu de WordPress

Les icônes aident les internautes à comprendre le contenu d’un élément de menu, sans même avoir à lire le libellé de navigation. Cette fonction est particulièrement utile pour les grands menus, où l’internaute peut préférer parcourir rapidement le contenu plutôt que de lire chaque libellé de navigation.

Vous pouvez utiliser des icônes pour faire ressortir le contenu le plus important. Par exemple, vous pouvez encourager les internautes à terminer leur achat en ajoutant une icône de panier au menu « Commande ».

Pour ajouter des icônes à votre menu de navigation, cliquez sur l’onglet « Icône ».

Vous pouvez maintenant choisir n’importe quelle icône de tableau de bord dans la bibliothèque intégrée ou utiliser votre propre image. Si vous passez à Max Mega Menu Pro, vous aurez également accès à d’autres polices d’icônes, Genericons et FontAwesome.

Terminer la configuration du Mega Menu sur votre site WordPress

Après avoir effectué tous ces réglages, vous pouvez fermer la fenêtre surgissante pour revenir à la page principale Apparence  » Menus.

Vous pouvez maintenant répéter ce processus pour chaque parent de niveau supérieur.

Lorsque vous êtes satisfait de la façon dont le méga-menu est configuré, cliquez sur le bouton Enregistrer le menu pour le rendre direct.

Il vous suffit maintenant de visiter la page d’accueil de votre site web pour voir le méga menu en action.

Nous espérons que cet article vous a aidé à apprendre comment ajouter un méga menu sur votre site WordPress. Vous pouvez également consulter notre guide étape par étape sur la façon d’ajouter un bouton dans votre menu d’en-tête WordPress et notre tutoriel sur la façon de créer un menu de navigation flottant collant sur WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.