Ajouter un menu de navigation est essentiel sur un site web, pour permettre à tes visiteurs de naviguer à travers les pages de ton site facilement. Le menu de navigation est généralement présent dans l’en-tête de la page, c’est-à-dire en haut d’une page. Je te guide étape par étape pour créer un menu de navigation sur WordPress + Elementor.
Créer les pages qui figureront dans ton menu de navigation
La première étape consiste à créer et mettre en ligne les pages qui apparaitront dans ton menu de navigation. Généralement, on inclut au minimum l’accueil, la page à propos, la page services, la page de contact. Tu peux également ajouter un onglet blog, un onglet portfolio…
Créer ton menu de navigation sur WordPress
Une fois que tu as créé tes pages, rends-toi dans Apparence > Menus
Tu vas pouvoir créer un menu de navigation (ou plusieurs) en nommant ton menu puis en sélectionnant les pages que tu souhaites y intégrer.
Tu peux gérer la hiérarchie des pages, en créant des sous-éléments, qui créeront un menu déroulant.
N’oublie pas de cliquer sur Enregistrer le menu.
Afficher ton menu de navigation sur ta page Elementor
On va maintenant personnaliser ton menu pour l’adapter à ta charte graphique.
Suis les étapes pour créer une en-tête de la page.
Ajoute le module « WordPress Menu » et glisse le dans la section. Par défaut, le menu que tu auras créé s’intègre automatiquement; si tu as créé plusieurs menus de navigation, tu peux choisir celui que tu souhaites intégrer dans l’en-tête.
Tu n’as plus qu’à personnaliser ton menu pour qu’il soit cohérent avec ton identité visuelle.
Créer un menu burger sur mobile et tablette
Elementor adapte automatiquement un menu en créant un bouton de bascule, sous la forme d’un menu burger.
Tu peux évidemment personnaliser ce menu pour l’adapter à ta charte graphique :
- gère le seuil d’affichage de ce menu burger (à partir de quelle résolution d’écran il apparaît)
- gère la position de cet icone
- modifie la couleur et la taille de l’icone
- modifie la couleur au survol de l’icone
Créer un menu mobile responsive sous forme de popup
Il existe une autre manière de créer un menu mobile, grâce à une popup qui s’ouvre et se ferme, comme ci-dessous :
Je t’explique comment créer une popup et l’intégrer à ton menu de navigation ⤵
Créer une fenêtre modale
L’objectif est de créer l’écran qui va s’afficher lorsqu’un visiteur clique sur le menu mobile, pour faire apparaître le menu de navigation.
Depuis WordPress, clique sur Modèles > Fenêtres modales > Ajouter
Donne un nom à la fenêtre modale (par exemple « Menu mobile »).
Tu peux choisir de partir d’un modèle pré-conçu ou de concevoir ta fenêtre modale à partir de zéro. Pour cet exemple, on construira l’élément en partant de 0.
Construis l’écran en ajoutant ton menu de navigation et en l’adaptant à ta charte graphique. Pense à le rendre responsive en adaptant pour les tablettes et mobiles.
Relier la fenêtre modale à ton menu
Maintenant que ton écran est créé, retourne dans l’interface d’édition de ton en-tête (header).
Nous allons afficher cette modale uniquement sur tablette et mobile, puisque sur desktop le menu s’affiche entièrement.
Nous allons donc créer une section de menu visible uniquement sur desktop, et une seconde section visible uniquement sur tablette et mobile. Grâce à l’option Section > Avancé > responsive, tu peux gérer la visibilité d’une section, colonne ou widget sur l’ensemble des supports (desktop, tablette et mobile).
Pour mon exemple, on voit bien ici une section grisée, invisible en mobile (on voit bien que le menu qui serait affiché ne serait pas joli du tout) et une autre section avec le logo et un icone menu burger, plus minimaliste.
Pour cela, Crée une section avec 2 colonnes : dans la première, ajoute le widget « Logo du site »; dans la seconde colonne, ajoute le widget « Image ». Importe dans ta médiatèque l’icone du menu burger que tu souhaites ajouter (tu peux télécharger sur le site The Noun Project au format png ou svg). Sélectionne ensuite cet icone dans le widget Image. Ajuste la taille et la position selon tes envies.
Sélectionne le widget Image, puis dans l’onglet Contenu > Image > Lien, sélectionne URL personnalisée. Clique sur l’icone « Balise dynamique » et sélectionne « Fenêtre modale », puis renseigne le nom de la fenêtre modale que tu as créée auparavant.
Enregistre les modifications et c’est terminé !
