Comment créer un menu WordPress responsive adapté aux mobiles ?

Plus de la moitié du trafic d’un site web provient d’appareils mobiles. Si votre menu de navigation ne fonctionne pas bien sur les smartphones et les tablettes, alors une grande partie de votre public risque d’avoir du mal à trouver son chemin sur votre site.

Avec des années d’expérience dans la construction de sites WordPress, nous comprenons l’importance de rendre votre site mobile responsive. Chez WPBeginner, nous avons toujours donné la priorité à cela, en veillant à ce que nos sites soient faciles à naviguer sur n’importe quel appareil.

En fait, nous avons conçu un menu responsive mobile qui s’adapte parfaitement aux petits écrans sans se sentir encombré, améliorant ainsi l’expérience des utilisateurs sur les smartphones et les tablettes.

Dans ce guide, nous allons vous afficher comment créer facilement un menu WordPress responsive adapté aux mobiles.

Pourquoi créer un menu WordPress responsive adapté aux mobiles ?

Un menu de navigation bien conçu aidera les internautes à trouver leur chemin sur votre site. Cependant, ce n’est pas parce que votre menu est beau sur les ordinateurs de bureau qu’il le sera automatiquement sur les écrans mobiles et les tablettes.

Les utilisateurs/utilisatrices mobiles représentent environ 58 % de l’ensemble du trafic internet. Cela dit, si votre menu n’est pas esthétique ou ne fonctionne pas correctement sur les appareils mobiles, vous risquez de perdre la moitié de votre public en raison d’une mauvaise expérience utilisateur.

Il sera alors difficile d’atteindre des objectifs clés tels que l’augmentation de votre liste d’e-mails, l’obtention de ventes et la croissance de votre entreprise.

Cela étant dit, voyons comment vous pouvez créer un menu responsive prêt pour le mobile qui s’affichera parfaitement sur les smartphones et les tablettes. Il vous suffit d’utiliser les liens rapides ci-dessous pour passer directement à la méthode que vous souhaitez utiliser.

Méthode 1 : Créer un menu diapositif responsive adapté aux mobiles

Un panneau de diapositives responsive est un menu de navigation qui glisse à l’écran lorsqu’un internaute tape ou clique sur une bascule.

De cette manière, le menu est toujours à portée de main mais n’occupe pas d’espace à l’écran par défaut.

Cela est d’autant plus important que les smartphones et les tablettes ont des écrans beaucoup plus petits que les ordinateurs de bureau.

Si le menu est constamment déplié, alors un utilisateur mobile peut déclencher ses liens par accident en utilisant l’écran tactile de son appareil. Les panneaux diapositifs constituent donc un bon choix pour un menu responsive mobile.

La façon la plus simple d’ajouter un panneau de diapositives adapté aux mobiles est d’utiliser Responsive Menu.

Tout d’abord, vous devez installer et activer l’extension Responsive Menu. Pour plus de détails, consultez notre tutoriel sur l ‘installation d’une extension WordPress.

Dès son activation, vous pouvez utiliser l’extension pour personnaliser n’importe quel menu WordPress que vous avez précédemment activé. Si vous avez besoin de créer un nouveau menu, veuillez alors consulter notre guide du débutant sur la façon d’ajouter un menu de navigation dans WordPress.

En revanche, si votre thème WordPress dispose déjà d’un menu mobile intégré, vous devrez connaître la classe CSS de ce menu afin de pouvoir le masquer.

Si vous passez cette étape, alors les utilisateurs/utilisatrices mobiles verront deux menus qui se chevauchent sur votre site. Pour obtenir des instructions étape par étape, veuillez consulter notre guide sur la façon de masquer un menu mobile dans WordPress.

Ceci fait, rendez-vous sur la page Responsive Menu  » Menus dans la colonne latérale d’administration de WordPress et cliquez sur le bouton  » Créer un nouveau menu « .

Vous verrez maintenant quelques thèmes responsive mobiles différents que vous pouvez utiliser pour votre menu.

Nous utilisons le « thème par défaut » dans nos images, mais vous pouvez utiliser le thème de votre choix. Après avoir pris votre décision, cliquez sur « Suivant ».

Vous pouvez maintenant saisir un nom pour le menu. Il s’agit d’un nom de référence, vous pouvez donc utiliser ce que vous voulez.

Cliquez ensuite sur « Link WordPress Menu » et choisissez le menu que vous souhaitez utiliser.

Version précédente, si votre thème dispose déjà d’un menu mobile intégré, vous devez ajouter sa classe CSS dans le champ « Masquer le menu du thème ».

Si vous passez à l’extension premium, alors vous obtiendrez quelques réglages supplémentaires. Par exemple, les utilisateurs/utilisatrices Pro peuvent masquer le menu sur des pages ou des appareils particuliers.

Lorsque vous êtes satisfait de la façon dont le menu est configuré, cliquez sur « Créer un menu ».

Vous verrez maintenant une Prévisualisation de votre site WordPress sur la droite de l’écran et quelques Réglages sur la gauche.

Pour voir comment votre site se présente sur mobile, cliquez sur l’icône mobile ou tablette en bas à gauche de l’écran.

Pour personnaliser l’aspect et le fonctionnement du menu sur les appareils mobiles, sélectionnez  » Menu mobile « .

Cliquez ensuite sur « Conteneur ».

Vous y trouverez de nombreux réglages différents.

Au fur et à mesure que vous apportez des modifications, la prévisualisation en direct se met souvent à jour automatiquement. Dans cette optique, il est judicieux de déplier le menu afin de surveiller l’aspect de votre menu mobile. Pour ce faire, il vous suffit de cliquer sur le bouton de permutation du menu.

Par défaut, l’extension ajoute un titre et du texte « Ajouter du contenu… ».

Vous pouvez remplacer ce texte par votre propre message ou même le retirer complètement. Pour modifier le titre, cliquez sur pour déplier la section « Titre ».

Vous pouvez maintenant saisir votre propre message dans le champ « Texte du titre ».

Vous pouvez également ajouter un Link au titre ou ajouter des polices et des images d’icônes.

Pour personnaliser l’aspect du titre, cliquez sur l’onglet « Styles ».

Vous pouvez y modifier la couleur de l’arrière-plan, la couleur du texte, la taille de la police, etc.

Si vous ne souhaitez pas afficher de texte de titre, cliquez pour désactiver le permutateur situé à côté de « Titre ».

Si le titre n’est pas essentiel, le retirer permettra de libérer de l’espace pour les liens et les autres contenus de votre menu de navigation mobile.

Pour remplacer le texte « Add more content here…. » par votre propre message, cliquez pour déplier la zone « Additional Content ».

Vous pouvez désormais taper votre propre texte, changer la couleur du texte, modifier l’alignement du texte et bien d’autres choses encore en utilisant les Réglages du menu de gauche.

Pour supprimer complètement le texte, il suffit de cliquer pour désactiver le permutateur.

Là encore, cela permet de libérer de l’espace pour le reste du contenu du menu. Cela est particulièrement utile sur les smartphones et les tablettes, qui ont généralement des écrans plus petits.

Par défaut, Responsive Menu affiche tous les éléments de votre menu sous la forme d’une liste unique. Toutefois, vous pouvez préférer afficher ces liens dans plusieurs colonnes.

Cela peut être utile si les libellés de votre menu sont plus courts, car cela vous permet d’afficher plus d’éléments dans un espace plus restreint sans que le menu ne paraisse encombré.

Pour essayer différentes mises en page, cliquez sur pour déplier la section « Menu ».

Vous pouvez maintenant ouvrir le menu déroulant « Colonnes du conteneur de menu » et choisir le nombre de colonnes que vous souhaitez utiliser.

À ce stade, vous verrez peut-être apparaître le texte « Mise à jour nécessaire ». Si vous voyez ce message, cliquez dessus pour mettre à jour la Prévisualisation en direct avec vos nouveaux Réglages de colonne.

Par défaut, l’extension ajoute également une barre de recherche à votre menu WordPress. Cela peut aider les internautes à trouver du contenu intéressant, mais aussi occuper un espace précieux à l’écran.

Si vous préférez, vous pouvez retirer la barre de recherche pour les utilisateurs/utilisatrices mobiles en désactivant le permutateur situé à côté de « Recherche ».

Il y a beaucoup d’autres réglages que vous pouvez configurer, vous pouvez donc passer un peu de temps à regarder les autres options. Cependant, cela suffit pour créer un menu bien conçu et prêt pour le mobile.

Lorsque vous êtes satisfait de la façon dont le menu de navigation est configuré, cliquez sur « Mettre à jour ».

Désormais, il vous suffit de visiter votre blog WordPress à l’aide d’un appareil mobile pour voir le nouveau menu en action. Vous pouvez également voir la version mobile de votre site WordPress depuis votre ordinateur.

Méthode 2 : Créer un menu responsive Fullscreen adapté aux mobiles

Une autre option consiste à ajouter un menu responsive en plein écran. Il s’agit d’un menu qui s’adapte automatiquement aux différentes tailles d’écran, de sorte que le menu de navigation aura toujours fière allure, quel que soit l’appareil utilisé par l’internaute.

Comme le menu occupe tout l’espace disponible, il est plus facile de naviguer sur les smartphones et les tablettes, quelle que soit la taille de l’écran.

La façon la plus simple de créer un menu en plein écran est d’utiliser FullScreen Menu. Cette extension vous permet de créer un menu en plein écran pour les appareils mobiles uniquement, ou vous pouvez afficher le même menu sur les smartphones, les tablettes et les ordinateurs de bureau, afin que tous les internautes aient la même expérience.

La première chose à faire est d’installer et d’activer l’extension FullScreen Menu. Vous pouvez consulter notre guide étape par étape sur l ‘installation d’un plugin WordPress pour plus de détails.

Une fois activé, visitez la page des options du menu plein écran à partir du menu WordPress et cochez la case suivante : ‘Activer le menu plein écran activé’.

Nous vous recommandons également de cocher la case « Afficher le menu uniquement pour les utilisateurs/utilisatrices ». Cela vous permet de voir les modifications pendant que vous configurez le menu, mais les internautes ne verront pas le menu mobile tant que vous ne l’aurez pas mis en direct.

Par défaut, l’extension affiche le menu en plein écran sur tous les appareils. Si vous souhaitez afficher le menu en plein écran uniquement sur les smartphones et les tablettes, cochez alors la case située à côté de  » Mobile only « .

Vous pouvez ensuite peaufiner l’apparence du menu en cliquant sur l’onglet « Design / Apparence ».

Ici, vous pouvez choisir les couleurs, la police et les réglages d’animation pour le menu plein écran.

Lorsque vous effectuez ces modifications, sachez que « Menu d’arrière-plan initial » correspond à l’icône de permutation du menu. Quant à « Menu d’arrière-plan ouvert », il s’agit de la couleur du menu mobile déplié en plein écran.

Après avoir choisi les couleurs du menu, défilez jusqu’à la section « Apparence du menu ». Vous pouvez y modifier la couleur, la famille et la taille de la police du menu.

Sachez simplement que le chargement de polices supplémentaires pourrait affecter les performances et la vitesse de votre site WordPress. Ce n’est pas toujours un bon choix pour les appareils mobiles, qui ont généralement moins de puissance de traitement par rapport aux ordinateurs de bureau. Certains internautes peuvent également avoir une mauvaise connexion internet mobile, ce qui rendra le chargement de votre site encore plus lent.

Une fois cela défini, défilez jusqu’à « Réglages d’animation ».

Pour commencer, vous pouvez choisir la manière dont le menu se dépliera lorsqu’un internaute cliquera sur l’icône du permutateur. Il suffit d’ouvrir le menu déroulant « Type d’animation » et de choisir une option dans la liste, par exemple De haut en bas ou De gauche à droite.

Lorsque vous êtes satisfait de la mise en page du menu, cliquez sur l’onglet « Contenu du menu » pour ajouter du contenu.

Ouvrez le menu déroulant « Sélectionné » et choisissez le menu que vous souhaitez afficher en plein écran.

Si vous n’avez pas encore créé de menu de navigation, consultez notre guide sur l’ajout de menus de navigation dans WordPress.

Si vous souhaitez afficher un contenu supplémentaire dans le menu, vous pouvez l’ajouter dans la zone « HTML / codes courts libres ». Il s’agit d’un mini éditeur/éditrices de page qui vous permet de saisir du texte, de modifier la mise en forme, d’ajouter des puces et des listes numérotées, et bien d’autres choses encore.

Une case à cocher permet également d’ajouter un lien vers votre page de politique de confidentialité.

Ensuite, vous pouvez ajouter des icônes de réseaux sociaux à votre menu WordPress. Ces icônes apparaîtront dans une ligne au bas du menu plein écran.

Pour ajouter ces icônes, il suffit de cliquer pour déplier la case « Icône sociale 1 ».

Vous pouvez désormais saisir un titre pour l’icône, par exemple « Facebook ».

Ensuite, cliquez sur la flèche située à côté de « Icône sociale » et choisissez l’icône que vous souhaitez afficher aux internautes mobiles.

Enfin, saisissez l’adresse que vous souhaitez utiliser dans le champ « URL sociale ».

Pour ajouter d’autres icônes, il suffit de cliquer sur le bouton « Ajouter une autre icône ».

Enfin, vous pouvez ajouter une barre de recherche WordPress pour aider les internautes à trouver ce qu’ils cherchent. Pour ce faire, il vous suffit de cocher la case située à côté de  » Ajouter une barre de recherche « .

Par défaut, l’extension affiche un message « Rechercher quelque chose… ». Cependant, vous pouvez le remplacer par votre propre message personnalisé en tapant dans le champ « Search input placeholder ».

Par exemple, si vous gérez un stock WooCommerce, alors vous pouvez utiliser des textes tels que  » Commencer les achats  » ou  » Rechercher des produits « .

Lorsque vous êtes satisfait de la configuration du menu, cliquez sur le bouton « Enregistrer les modifications ».

Il vous suffit maintenant de visiter votre site à l’aide d’un appareil mobile pour voir le menu plein écran en action.

Vous pouvez également prévisualiser la version mobile de votre site à l’aide du client/cliente personnalisé du thème WordPress.

Bonus : comment ajouter un menu responsive pour mobile aux pages d’atterrissage.

Si vous créez une page d’atterrissage ou une page de vente, alors vous voudrez que la conception soit aussi belle sur les appareils mobiles que sur les ordinateurs de bureau.

En gardant cela à l’esprit, nous recommandons de créer la page en utilisant SeedProd. C’est le meilleur constructeur de page WordPress et il est livré avec plus de 300+ modèles conçus par des professionnels.

Après avoir créé un design à l’aide de SeedProd, vous pouvez ajouter un menu responsive mobile à la page en utilisant le bloc Nav Menu prêt à l’emploi de SeedProd. Ce bloc vous permet de créer des menus distincts pour les appareils de menu et les ordinateurs de bureau.

Vous pouvez ainsi utiliser une mise en page différente et même afficher des liens différents en fonction de l’appareil de l’utilisateur.

Pour en savoir plus, veuillez consulter notre guide sur la façon d’ajouter des menus de navigation personnalisés dans WordPress.

Après avoir ajouté le bloc Nav à votre conception, cliquez simplement sur l’onglet « Avancé ».

Cliquez ici pour déplier la section « Visibilité de l’appareil ».

Ensuite, cliquez sur le permutateur « Masquer sur l’ordinateur » pour l’activer. Désormais, ce menu apparaîtra uniquement sur les appareils mobiles.

Vous pouvez désormais ajouter des liens et modifier la mise en page du menu à l’aide des Réglages du menu de gauche.

Nous espérons que cet article vous a aidé à apprendre comment créer un menu WordPress responsive adapté aux mobiles. Vous pouvez également consulter notre guide pour débutants sur la façon d’ajouter un redimensionneur de police dans WordPress et nos astuces d’experts sur les façons de créer un site WordPress adapté aux mobiles.

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.