Comment ajouter un méga menu sur votre site WordPress (étape par étape)
Vous souhaitez ajouter un méga menu sur votre site WordPress ?
Les méga menus vous permettent d'organiser des dizaines, voire des centaines de liens dans des colonnes et des lignes conviviales. Vous pouvez ensuite ajouter du contenu riche comme des images et des vidéos, pour rendre vos méga menus encore plus utiles.
Dans cet article, nous allons vous montrer étape par étape comment ajouter un méga menu à votre site WordPress.
Pourquoi ajouter un méga menu sur votre site WordPress ?
WordPress est livré avec un générateur de glisser-déposer que vous pouvez utiliser pour créer toutes sortes de menus, notamment des menus déroulants, des menus d'en-tête, etc. Il existe même des plugins qui permettent de créer des menus de navigation personnalisés dans les thèmes WordPress.
Cependant, si votre site contient beaucoup de contenu, vous devrez peut-être créer un méga menu. Cela vous permet d'ajouter des listes déroulantes multi-colonnes au menu WordPress standard.
Vous pouvez utiliser des méga menus pour organiser votre contenu sous différents titres et sous-titres, afin que les visiteurs 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 du contenu riche à vos visiteurs, tel que des vidéos, du texte, des recherches et des publications récentes.
Vous pouvez également ajouter des images, ce qui facilite la numérisation des méga-menus.
Cela dit, voyons comment vous pouvez facilement ajouter un méga menu à votre site WordPress.
Comment créer un méga menu pour votre site WordPress
Le moyen le plus simple d’ajouter un méga menu sur votre site WordPress consiste à utiliser Max Mega Menu. Ce plugin vous permet d'ajouter du contenu riche à vos méga menus, notamment des vidéos, des galeries d'images, des recherches, etc.
De cette façon, vous pouvez créer des menus plus attrayants et plus utiles.
Vous pouvez également styliser chaque partie du méga menu en ajoutant différentes couleurs, en modifiant la taille de la police et en utilisant différentes icônes.
Tout d’abord, vous devrez installer et activer le plugin. Si vous avez besoin d'aide, veuillez consulter notre guide sur la façon d'installer un plugin WordPress.
Activez les méga menus sur votre site Web WordPress
Lors de l'activation, accédez à Méga Menu » Emplacements des menus pour voir toutes les différentes zones dans lesquelles 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 chaque endroit où vous souhaitez les utiliser.
Pour ce faire, cliquez simplement pour développer un emplacement, puis cochez sa case « Activé ».
Après cela, vous pouvez modifier « Événement » qui ouvrira le méga menu.
Le paramètre par défaut est « Intention de survol », ce qui signifie que le visiteur doit passer sa souris sur le méga menu pendant quelques secondes afin de le déclencher. Cela fonctionne bien pour la plupart des sites Web WordPress, mais vous pouvez également ouvrir la liste déroulante « Effet » et choisir « Survoler » ou « Cliquer » à la place.
Si vous choisissez « Cliquer », le visiteur devra cliquer pour explorer le méga menu. Cela peut être utile si vous craignez que les visiteurs déclenchent le menu par accident, ce qui peut être frustrant.
Pendant ce temps, « Survol » ouvrira votre méga menu dès que le visiteur déplacera sa souris dessus. Cela peut encourager les visiteurs à explorer différentes zones de votre site. Vous souhaiterez donc peut-être utiliser le « survol » sur les pages de destination ou sur la page d'accueil de votre site Web.
Après avoir pris cette décision, vous pouvez modifier la façon dont le menu s'ouvre à l'aide des paramètres « Effet ».
Max Mega Menu propose différentes animations que vous pouvez essayer, notamment le fondu et le glissement vers le haut. 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 du visiteur.
Si vous ne souhaitez utiliser aucune animation, ouvrez simplement la première liste déroulante et sélectionnez « 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 moins de puissance de traitement. Cependant, si vous souhaitez créer une animation unique pour les visiteurs mobiles, vous pouvez utiliser les paramètres de 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 depuis un ordinateur.
Si vous avez choisi « Clic » dans le menu déroulant « Événement », assurez-vous de sélectionner ensuite l'onglet « Avancé ».
Ici, vous pouvez utiliser le « comportement de l'événement de clic » pour définir ce qui se passe lorsque le visiteur clique sur votre méga menu. Par exemple, le deuxième clic peut fermer le menu ou ouvrir un nouveau lien.
Vous pouvez consulter davantage de paramètres, mais cela devrait suffire pour la plupart des blogs et sites Web WordPress.
Lorsque vous êtes satisfait de la configuration du plugin, cliquez sur « Enregistrer les modifications ».
Pour activer les méga menus pour plus d'emplacements, suivez simplement le même processus décrit ci-dessus.
Personnalisez l'apparence des méga-menus sur votre site Web
L'étape suivante consiste à configurer l'apparence des méga menus sur votre site Web.
Vous pouvez le faire en sélectionnant l’onglet « Thèmes de menu » à gauche de l’écran.
Sur cet écran, vous pouvez modifier la direction des icônes fléchées, utiliser une hauteur de ligne différente, ajouter une ombre, etc.
Lorsque vous êtes satisfait de vos paramètres, n'oubliez pas de cliquer sur « Enregistrer les modifications ».
Si vous souhaitez supprimer ces modifications à tout moment, cochez simplement la case « Réinitialiser le style du widget », puis cliquez sur « Enregistrer les modifications ».
Ensuite, vous pouvez personnaliser la barre de menus, qui est la barre que les visiteurs voient lorsque le menu est dans son état réduit par défaut.
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 faites défiler vers le bas, vous pouvez modifier l'apparence du menu de niveau supérieur.
Il s'agit de la première rangée d'éléments visible lorsque le méga menu est dans son état réduit.
Puisqu’ils sont si importants, vous souhaiterez peut-être faire ressortir les éléments de menu de niveau supérieur.
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 surbrillance l'élément de menu de niveau supérieur actuellement sélectionné.
Par exemple, dans l’image suivante, nous utilisons un effet de soulignement.
Cela peut aider le visiteur à voir où il se trouve dans le menu, ce qui le rend particulièrement utile pour les sites qui ont besoin de grands méga menus.
Si vous ajoutez un état de survol, faites défiler vers le bas de l'écran et cochez la case « Mettre en surbrillance l'élément actuel ».
Après cela, vous pouvez modifier l'apparence 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 « Méga menus ».
Vous pouvez désormais utiliser ces paramètres pour modifier la couleur d'arrière-plan du sous-menu, augmenter le rayon pour créer des coins incurvés, ajouter un remplissage, 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 intégrer un nuage de tags dans le méga menu. Ces widgets peuvent fournir des informations supplémentaires ou encourager les visiteurs à cliquer sur certains éléments du menu.
Vous pouvez personnaliser l'apparence de ces widgets en faisant défiler jusqu'à la section « Widgets ». Par exemple, vous pouvez modifier la couleur du titre du widget, augmenter la taille de la police, ajouter un remplissage et ajuster l'alignement.
Sur cet écran, vous pouvez également personnaliser l'apparence des éléments de menu de deuxième niveau et des éléments de menu de troisième niveau sur votre site Web, votre blog ou votre marché en ligne. Ce sont les enfants des éléments de menu de niveau supérieur.
Lors de la création de vos menus, il est possible d’ajouter quatre niveaux, voire plus, pour créer un méga menu imbriqué. Si vous faites cela, WordPress utilisera simplement le style de troisième niveau pour tous les niveaux suivants.
Vous pouvez voir cela en action dans l’image suivante. Le deuxième niveau a du texte rouge et les troisième et quatrième niveaux utilisent le même texte bleu.
Lorsque vous êtes satisfait de la configuration du menu, n'oubliez pas de cliquer sur « Enregistrer les modifications ».
Comment ajouter un méga 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 Web.
Rendez-vous simplement sur Apparence » Menus.
Si vous souhaitez transformer un menu existant en méga menu, ouvrez la liste déroulante « Sélectionner un menu à modifier » et choisissez-le dans la liste. Sachez simplement que le menu que vous choisissez doit être attribué à un emplacement où vous avez activé la fonction méga menu.
Si vous souhaitez repartir de zéro, cliquez sur « Créer un nouveau menu », puis 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 ». Encore une fois, il doit s'agir d'un emplacement où vous avez activé les méga menus.
Ajoutez du contenu à votre menu WordPress
Après cela, ajoutez toutes les pages, publications, produits WooCommerce et tout autre contenu que vous souhaitez inclure dans le méga menu. Pour des instructions étape par étape, veuillez consulter notre guide du débutant sur la façon d’ajouter un menu de navigation dans WordPress.
Ensuite, vous devrez organiser vos éléments dans les parents et sous-menus que vous souhaitez utiliser dans le méga menu. Pour créer un sous-menu, faites glisser un élément sous le parent, puis faites-le légèrement vers la droite avant de le relâcher.
Pour créer plusieurs niveaux, continuez simplement à faire glisser les éléments vers la droite afin qu'ils apparaissent en retrait les uns en dessous des autres. Ceci est similaire à la création d’un menu déroulant dans WordPress.
Activer la fonctionnalité Mega Menu
Cela fait, cliquez pour développer les « Paramètres du menu Max Mega » et cochez la case à côté de « Activer ».
Dans cette zone, vous pouvez également remplacer les paramètres par défaut du méga menu. Cela vous permet de créer des méga menus uniques pour différentes zones de votre site Web WordPress, alors allez-y et apportez les modifications que vous souhaitez.
Après cela, cliquez sur « Enregistrer ».
Créer la présentation du méga-menu
Maintenant, passez votre souris sur le premier élément de niveau supérieur et vous verrez un nouveau bouton « Méga Menu ». Allez-y et cliquez sur le bouton.
Vous verrez maintenant tous les paramètres de cet élément de niveau supérieur.
Par défaut, Max Mega Menu utilisera le style flyout, où les sous-menus « flyout » sur le côté. Pour créer un méga menu à la place, ouvrez la liste déroulante « Mode d'affichage du sous-menu » et choisissez « Mise en page standard » ou « Mise en page en grille ».
La disposition standard affiche tous les sous-menus en colonnes.
Pendant ce temps, la disposition en grille vous permet d'organiser les éléments de sous-menu en colonnes et en lignes.
C'est idéal si vous souhaitez afficher beaucoup de contenu, comme tous les produits numériques de votre boutique en ligne, ou si vous avez une mise en page très spécifique en tête.
Après avoir sélectionné la disposition standard ou en grille, vous verrez tous les sous-menus attribués à ce parent.
Maintenant, vous pouvez continuer et modifier la façon dont ces éléments sont disposés 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 dans le coin supérieur droit.
Si vous utilisez une disposition en grille, vous pouvez ajouter des colonnes et des lignes à l'aide des boutons « + Colonne » et « + Ligne ».
Lorsque vous êtes satisfait de la mise en page, vous pouvez organiser les éléments du sous-menu en différentes colonnes et lignes par glisser-déposer.
Après cela, il est temps de modifier l’espace occupé par chaque élément dans la colonne. Max Mega Menu affiche la taille actuelle sous forme de 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 élément, cliquez simplement sur ses boutons fléchés pour agrandir ou réduire la fraction.
Créez un méga menu adapté aux mobiles (disposition en grille uniquement)
Par défaut, Max Mega Menu affichera le même contenu sur les ordinateurs de bureau et les appareils mobiles. Cela peut poser un problème avec les dispositions 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 disposition en grille, vous pouvez créer différents méga-menus pour les appareils mobiles. Par exemple, vous pouvez utiliser moins de colonnes afin que les utilisateurs n'aient pas à faire défiler horizontalement. De cette façon, vous pouvez créer un menu WordPress prêt pour les appareils mobiles.
Vous pouvez masquer des colonnes ou des lignes entières à l'aide de l'icône « Masqué sur mobile », qui ressemble à un petit téléphone mobile.
Activez et désactivez simplement l'icône pour masquer et afficher différents contenus sur ordinateur et mobile.
Ajoutez du contenu riche avec les widgets Mega Menu
Cela fait, vous pouvez commencer à ajouter des widgets au méga menu. Cela vous permet d'afficher du contenu supplémentaire dans le sous-menu, tel que 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, cliquez simplement pour ouvrir la liste déroulante « Sélectionner un widget… ».
Vous pouvez maintenant choisir un widget dans la liste.
WordPress ajoutera automatiquement le widget à une colonne ou une ligne, mais vous pouvez le déplacer vers un nouvel emplacement par glisser-déposer.
Pour configurer le widget, continuez et cliquez sur sa petite icône en forme de clé.
Cela ouvre une fenêtre contextuelle dans laquelle vous pouvez ajouter du contenu au widget et modifier ses paramètres.
Vous verrez différentes options 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 les paramètres dans lesquels vous pouvez télécharger une piste audio.
Tous les widgets ont un champ « Titre » dans lequel vous pouvez ajouter du texte qui apparaîtra au-dessus du widget.
Lorsque vous avez terminé, cliquez sur « Enregistrer » pour enregistrer vos modifications, puis sélectionnez « Fermer ». Pour ajouter plus de widgets au méga menu, suivez simplement le même processus décrit ci-dessus.
Vérifiez les paramètres par défaut du Mega Menu
Ensuite, cliquez simplement sur l’onglet « Paramètres ».
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 paramètres par défaut, n'oubliez pas de cliquer sur « Enregistrer les modifications ».
Ajouter des icônes d'image au méga menu WordPress
Les icônes d'image aident les visiteurs à comprendre de quoi parle un élément de menu, sans même avoir à lire l'étiquette de navigation. Ceci est particulièrement utile pour les grands menus où un visiteur peut préférer analyser le contenu rapidement plutôt que de lire chaque étiquette de navigation.
Vous pouvez utiliser des icônes pour faire ressortir le contenu le plus important. Par exemple, vous pouvez encourager les visiteurs à finaliser leur achat en ajoutant une icône de panier au menu « Commander ».
Pour ajouter des icônes d'image à votre menu de navigation, cliquez sur l'onglet « Icône ».
Vous pouvez désormais choisir n'importe quel dashicon 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.
Terminez la configuration du méga menu sur votre site WordPress
Après avoir parcouru tous ces paramètres, vous pouvez fermer la fenêtre contextuelle 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 configuration du méga menu, cliquez sur le bouton Enregistrer le menu pour le rendre actif.
Maintenant, visitez simplement 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 sur les meilleurs créateurs de pages WordPress par glisser-déposer et comment augmenter le trafic de votre blog.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.