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 ?

Des menus bien conçus aident vos visiteurs à trouver leur chemin sur votre site WordPress ou votre boutique WooCommerce. Mais il peut être difficile de cliquer sur un menu standard dans l'en-tête tout en utilisant le petit écran d'un smartphone.

Il y a déjà plus de visiteurs mobiles que de visiteurs sur ordinateur pour de nombreux sites Web. C'est pourquoi nous vous recommandons de prévisualiser la version mobile de votre site WordPress pour voir à quoi ressemble votre site sur les appareils mobiles.

Un menu mobile réactif plein écran s'ajustera automatiquement à différentes tailles d'écran. Comme tout l'espace disponible est utilisé pour le menu, il est plus facile de naviguer sur les smartphones et les tablettes.

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

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

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.

Après l'activation, vous devriez vous rendre sur la page Options du menu plein écran dans votre menu d'administration WordPress pour configurer les paramètres du plugin. Cela vous amènera automatiquement à l'onglet « Paramètres ».

Commencez par cocher la case « Activer le menu animé plein écran » pour activer le menu.

Il est conseillé de cocher également la case « Afficher le menu uniquement pour les administrateurs » dans un premier temps. Cela vous permettra de voir les modifications au fur et à mesure 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é.

D'autres paramètres vous permettent d'afficher le menu uniquement sur les appareils mobiles, de fermer le menu sur un clic ou un défilement, 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.

Conception et apparence du menu plein écran

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. Elle sera affichée dans le coin supérieur droit de votre site Web. Lorsque vos visiteurs cliqueront ou appuieront dessus, le menu plein écran sera affiché ou masqué.

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 resterons avec les paramètres par défaut, qui utilisent la police de notre thème. Nous recommandons ce réglage car il correspondra au design de votre site web. De plus, le chargement de polices supplémentaires pourrait affecter 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 à les 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 second paramètre est l'effet que vous obtenez lorsque vous survolez une entrée de menu avec la souris. Les choix sont le remplissage de la ligne, la couleur de fond et la couleur de fond avec une bordure arrondie.

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é. Cependant, de nombreux propriétaires de sites Web préfèrent ajouter cela dans le pied de page plutôt que dans le menu principal.

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 WordPress native en haut de votre menu réactif. 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 taper du texte d'espace réservé.

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 et de décocher « Afficher le menu uniquement pour les utilisateurs administrateurs ». Après avoir cliqué sur le bouton « Enregistrer les modifications », les visiteurs de votre site web pourront accéder au menu.

Nous espérons que cet article vous a aidé à apprendre comment ajouter un menu responsive 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 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.