Comment créer un menu WordPress responsive prêt pour mobile

Plus de la moitié du trafic de tous les sites Web provient des appareils mobiles. Si votre menu de navigation ne fonctionne pas bien sur les smartphones et les tablettes, une grande partie de votre audience peut avoir du mal à naviguer sur votre site.

Avec des années d'expérience dans la création de sites WordPress, nous comprenons l'importance de rendre votre site réactif sur mobile. Chez WPBeginner, nous avons toujours accordé 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 réactif sur mobile qui s'adapte parfaitement aux petits écrans sans paraître encombré, améliorant ainsi l'expérience utilisateur sur les smartphones et les tablettes.

Dans ce guide, nous vous montrerons comment créer facilement un menu WordPress réactif et prêt pour le mobile.

Pourquoi créer un menu WordPress réactif et prêt pour le mobile ?

Un menu de navigation bien conçu aidera les visiteurs à naviguer sur votre site Web. Cependant, ce n'est pas parce que votre menu est superbe sur les ordinateurs de bureau qu'il le sera automatiquement sur les écrans mobiles et les tablettes.

Les utilisateurs mobiles représentent environ 58 % de tout le trafic Internet. Cela dit, si votre menu n'est pas beau ou ne fonctionne pas correctement sur les appareils mobiles, vous risquez de perdre la moitié de votre audience en raison d'une mauvaise expérience utilisateur.

Cela rendra difficile l'atteinte d'objectifs clés tels que la croissance de votre liste de diffusion, l'obtention de ventes et la croissance de votre entreprise.

Cela dit, voyons comment vous pouvez créer un menu réactif prêt pour mobile qui sera superbe sur les smartphones et les tablettes. Utilisez simplement les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser.

• Méthode 1 : Créer un menu à panneau coulissant réactif prêt pour mobile
• Méthode 2 : Créer un menu plein écran réactif prêt pour mobile
• Bonus : Comment ajouter un menu réactif pour mobile aux pages de destination

Méthode 1 : Créer un menu à panneau coulissant réactif prêt pour mobile

Un panneau coulissant réactif est un menu de navigation qui apparaît à l'écran lorsqu'un visiteur touche ou clique sur un déclencheur.

De cette façon, le menu est toujours à portée de main mais n'occupe aucun espace à l'écran par défaut.

Ceci est particulièrement important car les smartphones et les tablettes ont des écrans beaucoup plus petits par rapport aux ordinateurs de bureau.

Si le menu est constamment développé, un utilisateur mobile peut déclencher ses liens par accident en utilisant l'écran tactile de son appareil. Cela fait des panneaux coulissants un bon choix pour un menu réactif pour mobile.

La façon la plus simple d'ajouter un panneau coulissant prêt pour mobile est d'utiliser Responsive Menu.

Tout d'abord, vous devez installer et activer le plugin Responsive Menu. Pour plus de détails, consultez notre tutoriel sur comment installer un plugin WordPress.

Après activation, vous pouvez utiliser le plugin pour personnaliser n'importe quel menu WordPress que vous avez précédemment créé. Si vous avez besoin de créer un nouveau menu, veuillez consulter notre guide pour débutants sur comment ajouter un menu de navigation dans WordPress.

D'autre part, si votre thème WordPress possède déjà un menu mobile intégré, vous devrez connaître la classe CSS de ce menu afin de pouvoir le masquer.

Si vous sautez cette étape, les utilisateurs mobiles verront deux menus qui se chevauchent sur votre site web. Pour des instructions étape par étape, veuillez consulter notre guide sur comment masquer un menu mobile dans WordPress.

Une fois cela fait, accédez à la page Menu Responsive » Menus dans la barre latérale d'administration de WordPress et cliquez sur le bouton « Créer un nouveau menu ».

Vous verrez maintenant plusieurs thèmes réactifs pour mobile que vous pouvez utiliser pour votre menu.

Nous utilisons le « Thème par défaut » dans nos images, mais vous pouvez utiliser n'importe quel thème que vous souhaitez. Après avoir pris votre décision, cliquez sur « Suivant ».

Vous pouvez maintenant taper un nom pour le menu. Ceci est juste pour votre référence, vous pouvez donc utiliser ce que vous voulez.

Une fois cela fait, cliquez sur « Lier le menu WordPress » et choisissez le menu que vous souhaitez utiliser.

Comme mentionné précédemment, si votre thème possède déjà un menu mobile intégré, vous devrez ajouter sa classe CSS au champ « Masquer le menu du thème ».

Si vous passez à la version premium du plugin, vous obtiendrez quelques paramètres supplémentaires. Par exemple, les utilisateurs Pro peuvent masquer le menu sur des pages ou des appareils spécifiques.

Lorsque vous êtes satisfait de la configuration du menu, cliquez sur « Créer le menu ».

Vous verrez maintenant un aperçu de votre site Web WordPress sur la droite de l'écran et certains paramètres sur la gauche.

Pour voir à quoi ressemble votre site sur mobile, cliquez sur l'icône mobile ou tablette en bas à gauche de l'écran.

Pour personnaliser l'apparence et le comportement du menu sur les appareils mobiles, sélectionnez « Menu mobile ».

Ensuite, cliquez sur « Conteneur ».

Ici, vous trouverez de nombreux paramètres différents.

Au fur et à mesure que vous apportez des modifications, l'aperçu en direct se mettra souvent à jour automatiquement. Dans cet esprit, il est bon d'étendre le menu afin de pouvoir surveiller à quoi ressemblera votre menu mobile. Pour ce faire, cliquez simplement sur le bouton de basculement du menu.

Par défaut, le plugin ajoute un titre et du texte « Ajouter plus de contenu… ».

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

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

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

Pour personnaliser l'apparence du titre, cliquez sur l'onglet « Styles ».

Ici, vous pouvez changer la couleur d'arrière-plan, la couleur du texte, la taille de la police, et plus encore.

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

Si le titre n'est pas essentiel, sa suppression créera plus d'espace pour les liens et le reste du contenu de votre menu de navigation mobile.

Pour remplacer le texte « Ajouter plus de contenu ici… » par votre propre message, cliquez pour développer la zone « Contenu supplémentaire ».

Vous pouvez maintenant taper votre propre texte, changer la couleur du texte, changer l'alignement du texte, et plus encore en utilisant les paramètres du menu de gauche.

Pour supprimer complètement le texte, cliquez simplement pour désactiver le commutateur.

Encore une fois, cela peut créer plus d'espace pour le reste du contenu du menu. Ceci est particulièrement utile sur les smartphones et les tablettes, qui ont généralement des écrans plus petits.

Par défaut, Responsive Menu affichera tous vos éléments de menu sous forme de liste unique. Cependant, vous préférerez peut-être afficher ces liens en plusieurs colonnes.

Cela peut bien fonctionner si les étiquettes de votre menu sont plus courtes, 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 dispositions de colonnes, cliquez pour développer 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 pourriez voir un texte « Mise à jour requise ». Si vous voyez ce message, cliquez dessus pour mettre à jour l'aperçu en direct avec vos nouveaux paramètres de colonne.

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

Si vous préférez, vous pouvez supprimer la barre de recherche pour les utilisateurs mobiles en désactivant le bouton à bascule à côté de « Recherche ».

Il existe de nombreux autres paramètres que vous pouvez configurer, vous pourriez donc vouloir passer un peu de temps à examiner les autres options. Cependant, cela suffit pour créer un menu bien conçu et adapté aux mobiles.

Lorsque vous êtes satisfait de la configuration du menu de navigation, cliquez sur « Mettre à jour ».

Visitez maintenant simplement votre blog WordPress à l'aide d'un appareil mobile pour voir le nouveau menu en action. Vous pouvez également afficher la version mobile de votre site WordPress depuis votre bureau.

Méthode 2 : Créer un menu plein écran réactif prêt pour mobile

Une autre option consiste à ajouter un menu plein écran réactif. Il s'agit d'un menu qui s'ajuste automatiquement à différentes tailles d'écran, de sorte que le menu de navigation sera toujours beau, quel que soit l'appareil utilisé par le visiteur.

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 manière la plus simple de créer un menu plein écran est d'utiliser FullScreen Menu. Ce plugin vous permet de créer un menu plein écran uniquement pour les appareils mobiles, ou vous pouvez afficher le même menu sur les smartphones, les tablettes et les ordinateurs de bureau, afin que tous les visiteurs aient la même expérience.

La première chose à faire est d'installer et d'activer le plugin FullScreen Menu. Vous pouvez consulter notre guide étape par étape sur comment installer un plugin WordPress pour plus de détails.

Après l'activation, visitez la page Fullscreen Menu Options depuis le menu WordPress et cochez la case suivante : ‘Activate Animated Fullscreen Menu.’

Nous vous recommandons également de cocher la case ‘Show the menu only for Admin users’. Cela vous permet de voir les modifications pendant que vous configurez le menu, mais les visiteurs ne verront pas le menu mobile tant que vous ne l'aurez pas rendu public.

Par défaut, le plugin affichera le menu plein écran sur tous les appareils. Si vous souhaitez afficher le menu plein écran uniquement sur les smartphones et les tablettes, cochez la case à côté de ‘Mobile only.’

Après cela, vous pouvez affiner l'apparence du menu en cliquant sur l'onglet ‘Design / Appearance’.

Ici, vous pouvez choisir les couleurs, la police et les paramètres d'animation pour le menu plein écran.

Lors de ces modifications, sachez que ‘Initial Background Menu’ est l'icône de bascule du menu. Pendant ce temps, ‘Opened Background Menu’ est la couleur du menu mobile développé en plein écran.

Après avoir choisi les couleurs du menu, faites défiler jusqu'à la section ‘Menu Appearance’. Ici, vous pouvez modifier la couleur de la police du menu, la famille de polices et la taille de la police.

Soyez simplement conscient 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 que les ordinateurs de bureau. Certains visiteurs peuvent également avoir une connexion Internet mobile médiocre, ce qui ralentira encore plus le chargement de votre site.

Une fois cela fait, faites défiler jusqu'à « Paramètres d'animation ».

Pour commencer, vous pouvez choisir comment le menu se développera lorsqu'un visiteur cliquera sur l'icône de bascule. Ouvrez simplement le menu déroulant « Type d'animation » et choisissez une option dans la liste, telle que 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.

Ici, ouvrez le menu déroulant « Sélectionner le menu » 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 comment ajouter des menus de navigation dans WordPress.

Si vous souhaitez afficher du contenu supplémentaire dans le menu, vous pouvez l'ajouter dans la zone « HTML gratuit / Shortcodes ». Cela agit comme un mini éditeur de page, vous pouvez donc y taper du texte, modifier la mise en forme, ajouter des puces et des listes numérotées, et plus encore.

Il y a aussi une case à cocher qui ajoutera un lien vers votre page de politique de confidentialité. 

Ensuite, vous pourriez vouloir ajouter des icônes de médias sociaux à votre menu WordPress. Ces icônes apparaîtront en ligne en bas du menu plein écran.

Pour ajouter ces icônes, cliquez simplement pour développer la zone « Icône sociale 1 ».

Vous pouvez maintenant taper un titre pour l'icône, comme « Facebook ».

Après cela, cliquez sur la flèche à côté de « Icône sociale » et choisissez l'icône que vous souhaitez afficher aux visiteurs mobiles.

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

Pour ajouter plus d'icônes, cliquez simplement sur le bouton « Ajouter une autre icône ».

Enfin, vous voudrez peut-être ajouter une barre de recherche WordPress pour aider les visiteurs à trouver ce qu'ils cherchent. Pour ce faire, cochez simplement la case à côté de « Ajouter une barre de recherche ».

Par défaut, le plugin affichera un message « Rechercher quelque chose… ». Cependant, vous pouvez le remplacer par votre propre message personnalisé en tapant dans le champ « Placeholder de saisie de recherche ».

Par exemple, si vous gérez une boutique WooCommerce, vous voudrez peut-être utiliser un texte tel que « Commencer à acheter » ou « Rechercher des produits ».

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

Maintenant, visitez simplement votre site Web à 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 Web à l'aide du personnaliseur de thème WordPress.

Bonus : Comment ajouter un menu réactif pour mobile aux pages de destination

Si vous créez une page de destination ou une page de vente, vous voudrez que le design soit aussi beau sur les appareils mobiles que sur les ordinateurs de bureau.

Dans cet esprit, nous vous recommandons de créer la page à l'aide de SeedProd. C'est le meilleur constructeur de pages 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 réactif pour mobile à la page à l'aide du bloc Nav Menu prêt à l'emploi de SeedProd. Ce bloc vous permet de créer des menus distincts pour les appareils mobiles et les ordinateurs de bureau.

De cette façon, vous pouvez 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 comment ajouter des menus de navigation personnalisés dans WordPress.

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

Ici, cliquez pour développer la section « Visibilité de l'appareil ».

Après cela, cliquez sur le bouton « Masquer sur ordinateur » pour l'activer. Désormais, ce menu n'apparaîtra que sur les appareils mobiles.

Vous pouvez maintenant ajouter des liens et modifier la mise en page du menu à l'aide des paramètres du menu de gauche.

Nous espérons que cet article vous a aidé à apprendre comment créer un menu WordPress réactif et adapté aux mobiles. Vous voudrez peut-être aussi consulter notre guide pour débutants sur comment ajouter un redimensionneur de police dans WordPress et nos conseils d'experts sur les moyens de créer un site WordPress adapté aux mobiles.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.