Comment ajouter un menu réactif plein écran dans WordPress

Les menus sont essentiels pour aider les visiteurs à naviguer sur votre site WordPress et à trouver plus de vos articles et pages. Les menus réactifs plein écran peuvent être particulièrement utiles lors de la conception de votre site pour les utilisateurs mobiles.

Lorsque vos utilisateurs cliquent ou tapent sur une icône de hamburger, un aperçu plein écran du menu de votre site s'affichera avec une belle animation.

Nous avons expérimenté plusieurs types de menus sur nos propres sites pour voir ce qui donne les meilleurs résultats. Et dans cet article, nous vous montrerons comment ajouter un menu réactif plein écran dans WordPress sans écrire une seule ligne de code.

Pourquoi ajouter un menu réactif plein écran dans WordPress ?

Un menu réactif plein écran permet aux visiteurs de naviguer beaucoup plus facilement sur votre site Web WordPress ou votre boutique WooCommerce sur les smartphones et les tablettes.

En utilisant tout l'écran pour le menu, il est simple de cliquer sur les liens sans sélectionner accidentellement le mauvais élément.

Avec de plus en plus de personnes naviguant sur mobile plutôt que sur ordinateur de bureau de nos jours, il est essentiel de vérifier l'apparence de votre site sur les petits écrans.

Un menu réactif s'adapte automatiquement à différentes tailles d'écran, garantissant une expérience fluide pour chaque visiteur.

Jetons un coup d'œil à la façon d'ajouter un menu réactif plein écran dans WordPress.

Étape 1 : Installer et activer le plugin FullScreen Menu

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 les débutants pour plus de détails.

Étape 2 : Configurer les paramètres généraux du menu

Après l'activation, vous devriez vous rendre sur la page Fullscreen Menu Options dans le menu d'administration de votre WordPress pour configurer les paramètres du plugin.

Cela vous mènera automatiquement à l'onglet « Paramètres ». Commencez par cocher la case « Activer le menu plein écran animé » pour activer le menu.

Il est également conseillé de cocher d'abord la case « Afficher uniquement pour les utilisateurs administrateurs ». Cela vous permettra de voir les modifications pendant que vous configurez le menu, mais les visiteurs de votre site ne pourront pas le voir tant que vous n'aurez pas terminé.

N'oubliez pas de revenir et de décocher cette case lorsque vous aurez terminé.

Sous ces options, vous trouverez d'autres paramètres qui vous permettent d'afficher le menu uniquement sur les appareils mobiles, de fermer le menu en cliquant ou en faisant défiler, et de masquer le menu sur des pages spécifiques. 

Pour notre exemple, nous laisserons ces paramètres décochés, mais n'hésitez pas à les personnaliser selon vos souhaits pour votre propre site.

Étape 3 : Personnaliser le design et l'apparence du menu

Ensuite, nous allons personnaliser le design du menu. Heureusement, le plugin de menu vous permet de le faire sans avoir besoin de CSS personnalisé.

Pour personnaliser le menu, vous devrez cliquer sur l'onglet « Design/Apparence » en haut de la page. Sur cette page, vous pouvez choisir les couleurs, la police et les paramètres d'animation de votre menu.

En haut de la page, vous remarquerez deux paramètres de couleur. La première couleur est pour l'icône du menu hamburger. Celle-ci apparaît généralement dans la zone d'en-tête de votre site Web. Lorsque vos visiteurs cliquent dessus, le menu plein écran s'affiche ou se masque.

Le deuxième paramètre de couleur concerne l'arrière-plan du menu.

Lorsque vous cliquez sur chaque boîte, une palette de couleurs apparaîtra. Vous pouvez soit cliquer sur la couleur que vous souhaitez utiliser, soit taper son code hexadécimal.

Après avoir choisi les couleurs du menu, vous devez faire défiler la page jusqu'à la section Police/Apparence. Ici, vous pouvez choisir la couleur, la famille et la taille de la police qui seront utilisées pour le texte du menu.

Pour ce tutoriel, nous vous recommandons de vous en tenir aux paramètres de police par défaut, qui utilisent souvent la police de votre thème.

C'est un bon choix car il correspondra au design général de votre site Web, et le chargement de polices supplémentaires peut parfois ralentir les performances et la vitesse de votre site WordPress.

Il existe également des paramètres pour afficher un menu latéral sur des pages spécifiques et faire défiler le menu principal s'il n'est pas assez grand. Pour ce tutoriel, nous laisserons ces paramètres décochés, mais n'hésitez pas à expérimenter sur votre propre blog WordPress ou site web.

Après cela, faites défiler jusqu'à la section « Paramètres d'animation ». Ici, vous pouvez ajuster deux paramètres principaux.

Le premier est le « Type d'animation ». Cela vous permet de sélectionner la direction de l'animation lorsque le menu est activé. Vous pouvez choisir de haut en bas, de gauche à droite et de droite à gauche.

Le deuxième paramètre est l'effet que vous obtenez lorsque vous survolez avec la souris une entrée de menu. Les choix sont une ligne subtile qui apparaît (comme une ligne de remplissage), un changement de couleur d'arrière-plan, ou un changement de couleur d'arrière-plan avec une bordure arrondie.

Étape 4 : Définir le contenu du menu plein écran

Enfin, vous devrez revenir en haut de la page et cliquer sur l'onglet « Contenu du menu ». Ici, vous pouvez sélectionner le menu WordPress qui sera affiché sur votre menu plein écran.

À côté de « Sélectionner le menu » en haut, vous devrez choisir un menu dans la liste déroulante. 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 sur l'écran du menu, vous pouvez l'ajouter dans la section suivante, intitulée « HTML gratuit / Shortcodes ». Tapez simplement votre contenu dans la zone de l'éditeur et ajoutez les fichiers multimédias que vous souhaitez. Ce contenu sera affiché sous le menu.

Il y a aussi une case à cocher qui inclura un lien vers votre page de politique de confidentialité. De nombreux propriétaires de sites préfèrent l'ajouter dans le pied de page plutôt que dans le menu principal, cependant.

Ensuite, vous pourriez vouloir ajouter des icônes de réseaux sociaux comme éléments de menu. Celles-ci seront affichées en ligne en bas de votre menu plein écran.

Pour les ajouter, faites simplement défiler vers le bas jusqu'à la section « Icônes de réseaux sociaux » et entrez un titre pour l'icône, tel que « Facebook ». Ensuite, choisissez l'icône appropriée et tapez l'URL de votre page sociale.

Vous pouvez ajouter plus d'icônes en cliquant sur le bouton « Ajouter une autre icône ».

Enfin, vous pouvez ajouter une barre de recherche en haut de votre menu responsive. Vous devrez faire défiler jusqu'en bas de la page « Contenu du menu » et cocher la case « Ajouter une barre de recherche ? ». Si vous le souhaitez, vous pouvez également saisir du texte d'espace réservé.

Étape 5 : Enregistrer les modifications et tester votre menu

Enfin, cliquez sur le bouton « Enregistrer les modifications » pour sauvegarder vos paramètres.

Vous pouvez maintenant visiter votre site web pour voir le menu plein écran réactif en action. Nous vous recommandons de redimensionner votre navigateur pour voir comment le menu se comporte sur différentes tailles d'écran.

Voici à quoi il ressemble sur notre site web de démonstration.

Une fois que vous êtes satisfait de votre menu plein écran, n'oubliez pas de revenir à Options du menu plein écran dans votre menu d'administration WordPress et de décocher « Afficher uniquement pour les utilisateurs administrateurs ».

Après avoir cliqué sur le bouton « Enregistrer les modifications », les visiteurs de votre site pourront accéder au menu.

Questions fréquemment posées sur l'ajout d'un menu responsive plein écran dans WordPress

Voici quelques questions que nos lecteurs ont fréquemment posées sur l'ajout d'un menu responsive plein écran dans WordPress :

Comment créer un menu responsive dans WordPress ?

Pour créer un menu responsive dans WordPress, utilisez un plugin de menu adapté aux mobiles comme FullScreen Menu. Cela garantit que votre menu s'adapte aux différentes tailles d'écran pour une navigation fluide.

Comment rendre un en-tête responsive dans WordPress ?

Rendre un en-tête responsive dans WordPress signifie qu'il s'ajuste automatiquement sur n'importe quel appareil. Vous pouvez le faire en utilisant un thème responsive ou en personnalisant la mise en page de l'en-tête avec du CSS et l'éditeur de blocs.

Pour des instructions détaillées, consultez notre tutoriel sur la personnalisation de votre en-tête WordPress.

Comment créer une page plein écran dans WordPress ?

Vous pouvez créer une page plein écran dans WordPress en utilisant un constructeur de pages comme SeedProd ou des paramètres de thème qui autorisent les modèles « pleine largeur ». Cela supprime les barres latérales et étend votre contenu sur tout l'écran.

Comment créer un tableau responsive dans WordPress ?

Pour créer un tableau responsive dans WordPress, utilisez le bloc de tableau de l'éditeur de blocs ou un plugin prenant en charge les tableaux responsives. Cela garantit que votre tableau défile ou s'empile proprement sur les appareils mobiles.

Nous espérons que cet article vous a aidé à apprendre comment ajouter un menu réactif plein écran à votre site WordPress. Vous pourriez également vouloir apprendre comment ajouter un méga menu sur votre site WordPress ou comment ajouter un menu à panneau coulissant dans les thèmes WordPress.

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.