Comment faire un menu collant dans WordPress

La navigation sur le site est l’un de ces éléments essentiels de l’expérience utilisateur qui façonnent la façon dont les visiteurs perçoivent votre site Web. Les utilisateurs Web modernes n’ont absolument aucune intention de perdre leur temps sur un site Web qui ne parvient pas à fournir le contenu souhaité rapidement et sans effort de la part de l’utilisateur. Le menu de navigation est traditionnellement le premier endroit où les visiteurs se rendent pour s’orienter. Si le menu n’est pas correctement conçu et si la navigation ne se déroule pas aussi facilement et rapidement que possible, les visiteurs commencent à partir et le site Web commence à mourir d’une mort lente et douloureuse sur Internet.

Un menu collant constitue une partie importante de la navigation sur le site, car il « colle » avec les utilisateurs lorsqu’ils défilent, au lieu de rester en haut de la page, garantissant que la navigation n’est jamais hors de portée. C’est pourquoi nous avons décidé d’approfondir le concept, de passer en revue les avantages et les inconvénients de cette fonctionnalité et de vous montrer comment la configurer à l’aide de l’un des plugins WordPress disponibles.

D’un autre côté, si vous ne souhaitez pas utiliser de plugin WordPress, sachez qu’une majorité de nos thèmes WordPress premium sont livrés avec la fonctionnalité de menu collant. Vous pouvez le configurer pour qu’il apparaisse sur votre site ou sur des pages individuelles, mais nous y reviendrons dans un instant.

Qu’est-ce qu’un menu collant

Tout d’abord, expliquons ce qu’est un menu collant et comment il fonctionne. Dans la plupart des sites Web, la navigation principale est située dans l’en-tête, qui est la partie la plus haute de la page. En règle générale, les éléments de la page disparaissent (montent) lorsque l’utilisateur fait défiler vers le bas. Un menu collant est un menu qui reste (« colle ») en haut de l’écran lorsque les utilisateurs font défiler la page. De cette façon, si l’utilisateur veut atteindre quelque chose dans le menu au milieu de la page, il n’a pas besoin de faire défiler jusqu’en haut pour trouver la navigation, car elle sera juste là, en haut de la fenêtre.

Le « collage » s’applique généralement à l’ensemble de l’en-tête, pas seulement le menu. Cela implique d’autres éléments d’en-tête, tels que les boutons sociaux, le logo, la barre de recherche, etc.

Avantages et inconvénients du menu collant

Il ne semble pas y avoir de consensus général parmi les concepteurs UX pour savoir si les menus collants sont bons ou mauvais pour les sites Web, car il y a à la fois de gros inconvénients et des avantages importants, alors voyons ce qu’ils sont.

Avantages:

Les inconvénients:

Votre site a-t-il besoin d’un menu collant ?

Nous disons « Oui » pour tous les cas ci-dessous :

Création d’un menu collant avec des thèmes Qode

Comme nous l’avons mentionné précédemment, pour ajouter un menu collant à votre site Web, vous utiliserez soit la fonctionnalité intégrée du thème, soit installerez un plugin WordPress.

Si vous avez acheté un thème auprès de Qode Interactive, vous n’aurez pas besoin d’un plugin – la majorité de nos thèmes sont livrés avec cette fonctionnalité prête à l’emploi.

Pour ce qui est de l’activer et de le paramétrer, si vous souhaitez avoir un menu collant sur l’ensemble de votre site (sur toutes les pages), rendez-vous dans les paramètres généraux du thème (ceux-ci sont marqués du nom du thème ou de l’auteur du thème, suivi du mot « Options ») et cliquez sur Entête.

Vous trouverez ici les options du menu collant. Notez que les options peuvent varier selon le thème.

Après avoir sélectionné « Sticky » dans la liste déroulante, un ensemble d’options de personnalisation s’ouvrira.

Encore une fois, les paramètres peuvent varier en fonction du thème.

Vous pouvez également définir le menu collant uniquement pour une ou plusieurs pages individuelles, et non pour l’ensemble de votre site Web. Cela se fait dans les options de la page individuelle. Accédez simplement à la page pour laquelle vous souhaitez le configurer et définissez le comportement de l’en-tête selon vos préférences.

Comment ajouter un menu collant à l’aide d’un plugin

Si votre thème n’est pas livré avec une fonctionnalité de menu collant et que vous n’êtes pas un développeur et/ou que vous ne savez pas comment utiliser CSS pour ajouter un en-tête collant, alors votre meilleure option est d’utiliser un plugin.

Pour cela, nous vous recommandons d’utiliser Mon menu collant – Menu collant sur défilement, en-tête collant pour n’importe quel thème, qui, comme son nom l’indique, peut fonctionner avec n’importe quel thème, vous permettant d’ajouter facilement un en-tête collant et même une barre de bienvenue. Le plugin ne nécessite pas de connaissances en codage ou CSS, il est léger et compatible avec tous les principaux constructeurs et éditeurs WordPress, y compris Gutenberg et Boulangerie WPB. Il est basé sur une classe d’éléments (« Sticky Class » ou ID) qui spécifie essentiellement quelle partie de votre site vous souhaitez rendre collante.

Ce plugin vous permet de créer un en-tête collant sur le défilement haut et bas, d’ajouter des effets (fondu ou diapositive), de changer l’opacité et la couleur de fond, et aussi de décider quand et sur quelles pages vous voulez que votre menu collant apparaisse. La version gratuite devrait faire l’affaire pour la plupart des utilisateurs, tandis que la version pro vous permet de changer le style CSS, ainsi que de désactiver la fonctionnalité au défilement ou sur certaines pages. Enfin, ce plugin WordPress est livré avec un support multilingue et est compatible avec tous les principaux constructeurs de pages.

Après avoir installé et activé le plugin, accédez à Paramètres > myStickymenu.

La première chose que vous devez définir est le menu que vous souhaitez afficher comme permanent. Vous pouvez choisir l’un des menus que vous avez dans votre thème.

En ce qui concerne les paramètres, la première chose que vous serez invité à faire est de définir le z-index collant. Le z-index définit l’ordre de pile de l’en-tête, c’est-à-dire s’il sera affiché devant ou derrière d’autres éléments de la page. Un élément avec un ordre de pile plus important est toujours affiché devant tous les éléments avec un ordre de pile inférieur. Puisque vous voulez probablement que votre en-tête collant soit toujours visible, nous vous suggérons de saisir un nombre plus élevé dans ce champ.

Ensuite, décidez si vous voulez que votre menu collant afficher sur les écrans mobiles ou pas. C’est généralement une bonne idée de le désactiver sur mobile car il prendra probablement trop de place sur l’écran et poussera le contenu vers l’extérieur.

L’option suivante, Rendre visible sur Scroll à la page d’accueil, vous permet de définir après combien de pixels vous voulez que votre menu collant apparaisse sur votre page d’accueil. Vous pouvez également définir le Temps de transition collant ci-dessous.

Le plugin permet également une certaine personnalisation de la conception. Vous pouvez définir la couleur d’arrière-plan collante, l’opacité et choisir l’effet de transition. Ici, vous pouvez également définir un paramètre général (pour toutes les pages de votre site, pas votre page d’accueil) qui détermine après combien de pixels vous souhaitez que le menu apparaisse.

Des options supplémentaires sont disponibles avec la version pro du plugin. Mais si tout ce dont vous avez besoin est un menu collant de base, la version gratuite devrait très bien fonctionner.

Dernières pensées

Si vous pensez que l’ajout d’un menu collant améliorerait la navigation sur votre site et l’expérience utilisateur, nous vous disons : allez-y ! À moins que votre site ne soit trop compact, ce sera probablement un excellent ajout et un facteur de convivialité majeur. Que votre thème ait déjà les fonctionnalités requises ou que vous choisissiez d’utiliser le plugin, nous sommes certains que vous créerez un menu collant qui s’adaptera à vos pages comme un gant.