Récemment, l’un de nos lecteurs a demandé s’il était possible d’ajouter un méga menu à votre site WordPress. Mega Menus vous permet d’ajouter des menus déroulants à plusieurs colonnes à votre navigation avec des médias riches comme des images et des vidéos. Dans cet article, nous vous montrerons comment ajouter facilement un méga menu à votre site WordPress.
Pourquoi et qui devrait ajouter Mega Menu dans WordPress?
Les méga menus sont particulièrement utiles pour les sites Web avec beaucoup de contenu. Cela permet aux propriétaires de sites Web d’afficher plus d’éléments dans leur menu supérieur.
Des sites Web populaires comme Reuters, Buzzfeed et Starbucks utilisent des méga-menus pour afficher des menus de navigation très intéressants et interactifs.
Alors que les menus de navigation par défaut de WordPress vous permettent d’ajouter des sous-menus déroulants et même d’ajouter des icônes d’image à côté de chaque élément, il vous suffit parfois d’un méga menu.
Voyons comment ajouter facilement un méga menu à votre site WordPress.
Didacticiel vidéo
Abonnez-vous à WPBeginner
Si vous n’aimez pas la vidéo ou avez besoin de plus d’instructions, lisez la suite.
Ajouter un méga menu dans WordPress
La première chose à faire est d’installer et d’activer le plugin Max Mega Menu. C’est le meilleur plugin WordPress méga-menu gratuit disponible sur le marché. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Lors de l’activation, le plugin ajoutera un nouvel élément de menu, Mega Menu, à votre menu d’administration WordPress. En cliquant dessus, vous accédez à la page de configuration du plugin.
Les paramètres par défaut fonctionneront pour la plupart des sites Web. Cependant, vous devrez modifier les couleurs du menu pour qu’elles correspondent aux couleurs utilisées par le conteneur du menu de navigation du thème WordPress.
Pour savoir quelles couleurs sont utilisées dans votre thème, vous pouvez utiliser l’outil Inspecter dans votre navigateur.
Une fois que vous avez obtenu le code couleur hexadécimal, vous pouvez le coller dans un fichier texte pour une utilisation ultérieure.
Ensuite, vous devriez visiter la page de configuration du méga menu, cliquer sur l’onglet “Thèmes du menu”, puis cliquer sur la section “Barre de menu”.
Ici, vous pouvez remplacer la couleur d’arrière-plan utilisée par le méga-menu pour correspondre au conteneur du menu de navigation de votre thème.
N’oubliez pas de cliquer sur le bouton Enregistrer les modifications pour enregistrer vos paramètres.
Maintenant que nous avons configuré les paramètres du méga menu, allons-y et créons notre méga-menu.
Vous devez d’abord visiter le Apparence »Menus page, puis ajoutez des éléments de niveau supérieur à votre navigation. Pour des instructions détaillées, consultez notre guide du débutant sur la façon de créer des menus de navigation dans WordPress.
Ensuite, sur l’écran Menus, vous devez activer le méga menu en cochant la case “Configuration maximale du méga menu”.
Après cela, vous devez passer la souris sur un élément de menu et vous verrez un bouton “Mega Menu” apparaître sur l’onglet de menu.
En cliquant sur le bouton, une fenêtre pop-up apparaîtra. Ici, vous pouvez ajouter n’importe quel widget WordPress à votre méga menu et sélectionner le nombre de colonnes que vous souhaitez afficher.
Vous pouvez également cliquer sur l’icône de clé sur un widget pour modifier les paramètres du widget. N’oubliez pas de cliquer sur le bouton Enregistrer pour enregistrer les paramètres de votre widget.
Une fois que vous avez terminé, vous pouvez fermer la fenêtre contextuelle et visiter leur site Web pour voir le méga menu en action.
Nous espérons que cet article vous a aidé à apprendre à ajouter un méga menu dans WordPress. Vous pouvez également consulter notre guide sur la façon d’accélérer WordPress et d’améliorer les performances des débutants.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour regarder des vidéos de didacticiel WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
