Comment ajouter un menu diapositif dans les thèmes WordPress

Vous souhaitez ajouter un menu diapositif à votre site WordPress ?

L’ajout d’un menu responsive permettra aux utilisateurs/utilisatrices de naviguer plus facilement sur votre site lorsqu’ils/elles utilisent des appareils mobiles. Lorsqu’ils appuieront sur l’icône de votre menu, un menu de panneaux glissera sur l’écran à l’aide d’une belle animation.

Dans cet article, nous allons vous afficher comment ajouter un menu diapositif dans les thèmes WordPress sans écrire de code.

Pourquoi ajouter un menu diapositif dans les thèmes WordPress ?

Des menus bien conçus aident vos internautes à trouver leur chemin sur votre site WordPress. Beaucoup de vos visiteurs utiliseront des appareils mobiles, il est donc important de prévisualiser la version mobile de votre site WordPress pour voir comment votre menu de navigation se présente sur des écrans plus petits.

Version : de nombreux thèmes WordPress sont dotés de styles intégrés qui affichent automatiquement des menus adaptés aux mobiles lorsqu’ils sont vus sur un petit écran.

Toutefois, vous souhaiterez peut-être personnaliser encore davantage votre navigation mobile et ajouter un menu responsive en plein écran ou un menu diapositif animé.

Dans cette optique, voyons comment ajouter un menu diapositif dans les thèmes WordPress.

Comment ajouter un menu diapositif dans les thèmes WordPress

La première chose à faire est d’installer et d’activer l’extension Responsive Menu. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Il existe une version premium de Responsive Menu avec des thèmes supplémentaires et des fonctionnalités avant telles que la logique conditionnelle, mais pour ce tutoriel, nous utiliserons l’extension gratuite.

Une fois activé, accédez à la page  » Responsive Menu  » Menus. Une fois là, vous devez cliquer sur le bouton  » Créer un nouveau menu  » en haut de l’écran.

Vous verrez ensuite quatre thèmes que vous pourrez utiliser pour votre nouveau menu responsive. Des thèmes supplémentaires sont disponibles à l’achat.

Pour ce tutoriel, nous utiliserons le thème sélectionné automatiquement. Vous pouvez ensuite cliquer sur le bouton « Suivant ».

Vous accéderez ainsi à la page Réglages du menu. Ici, vous pouvez saisir un nom pour votre menu responsive, puis sélectionner le menu WordPress que vous souhaitez afficher dans le panneau.

Pour les besoins de ce tutoriel, nous avons choisi le menu  » Navigation « . Si vous avez besoin de créer un nouveau menu, vous pouvez apprendre à le faire en suivant notre guide sur l’ajout d’un menu de navigation dans WordPress.

Vous pouvez également masquer le menu normal fourni avec votre thème WordPress afin que vos utilisateurs/utilisatrices voient uniquement le nouveau menu diapositif. Pour ce faire, saisissez le code CSS dans le champ « Masquer le menu du thème ».

Le code que vous devez saisir ici varie d’un thème à l’autre, et vous pouvez obtenir plus de détails en cliquant sur le lien « En savoir plus ».

Les utilisateurs/utilisatrices de la version Pro disposent de quelques réglages supplémentaires. Par exemple, les utilisateurs/utilisatrices Pro peuvent sélectionner les appareils et les pages où le menu doit être affiché.

Une fois que vous êtes satisfait des réglages, cliquez sur le bouton « Créer un menu » en bas de la page. Vous accéderez ainsi à une page où vous pourrez personnaliser votre menu.

Vous verrez une Prévisualisation de votre site sur la droite de l’écran, et il y a des boutons en bas pour basculer entre la vue du téléphone, de la tablette et de l’ordinateur. Vous trouverez également des options de personnalisation sur la gauche.

Notez que du texte est affiché au-dessus du menu. Il s’agit du titre du menu et d’une ligne de texte que l’extension appelle « contenu supplémentaire ».

Vous pouvez modifier ou masquer le texte en cliquant sur « Menu mobile » puis sur « Conteneur » dans le menu situé à gauche de la page.

Vous pouvez taper ce que vous voulez dans le champ « Texte du titre », par exemple « Menu principal » ou « Navigation ». Si vous ne souhaitez pas afficher de titre, il vous suffit de faire glisser le commutateur « Titre » en position inactive.

Ensuite, vous devez défiler vers le bas jusqu’au réglage « Contenu supplémentaire ». Vous pouvez permuter ce réglage inactif ou taper du contenu alternatif. Dans la capture d’écran ci-dessous, vous remarquerez que le commutateur a été inactif, de sorte que les mots « Add more content here… » sont désormais masqués.

Une fois que vous êtes satisfait des réglages du menu, cliquez sur le bouton « Mettre à jour » au bas de la page pour stocker vos réglages.

Le plugin Responsive Menu est livré avec de nombreuses autres options qui vous permettent de modifier le comportement et l’apparence de votre menu de panneau diapositif. Vous pouvez explorer ces options sur la page des réglages du plugin et les ajuster si nécessaire.

Vous pouvez maintenant visiter votre site pour voir le menu en action. Voici ce que cela donne sur notre site de démonstration. Note : si la page actuelle se trouve dans le menu, elle est mise en évidence par une bande de couleur.

Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter un menu diapositif dans les thèmes WordPress. Vous voudrez peut-être aussi apprendre comment suivre les internautes sur votre site WordPress, ou consulter notre liste de plugins incontournables pour faire grandir votre site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.