Le header et le menu font partie des éléments les plus importants d’un site web, ils doivent permettre de naviguer facilement à l’intérieur de votre site.
L’un des principaux griefs que l’on peut faire à la plupart des thèmes Wordpress gratuits est le manque d’options pour styliser les menus. C’est là qu’Elementor intervient en offrant des paramètres de customisation beaucoup plus poussés.
Dans ce tutoriel je vais vous montrer les différentes manières de créer un header intégrant un menu-déroulant avec Elementor, sans add-ons supplémentaires et comment l’intégrer ensuite à votre site WordPress en lieu de place du menu par défaut.
En savoir plus sur Elementor.
Elementor : Avis et Tutoriels
Pour ce tutoriel j’ai utilisé :
• Le thème gratuit Twenty Nineteen.
• Le constructeur de page elementor pro.
J’ai créé pour commencer un menu basique avec 3 niveaux de liens, on peut parler ici de sous-menu.
Pour l’instant, le design est catastrophique, mais nous allons voir comment améliorer tout ça avec Elementor.
Nous sommes d’accord, il est difficile de faire pire.
Il est important de retenir le nom du menu, car nous allons en avoir besoin pour la suite.
Nous allons commencer par le menu puis nous verrons comment styliser le header.
Ajouter un nouveau modèle de menu avec Elementor
Pour commencer on se rend dans le tableau de bord de Wordpress puis dans Modèles, et on clique sur ajouter.
Sur la nouvelle fenêtre qui s’ouvre on choisit header comme type de modèle et on donne un nom à notre nouveau menu.
Comme on ne souhaite pas utiliser un Template prédéfini, il nous faut cliquer sur la croix en haut à droite du nouvel onglet qui vient de s’ouvrir.
Création du menu déroulant avec Elementor
Nous arrivons sur une page blanche, car nous n’avons pas sélectionné de modèle prédéfini.
Pour commencer, nous allons placer le widget Navmenu dans une section et sélectionner le nom du menu que l’on veut afficher.
Dans notre exemple, on choisit le nom « Menu par défaut » dans la liste déroulante.
Si vous cliquez sur le petit icône en forme d’œil et sur Preview, vous pouvez voir que certains changements ont déjà eu lieu et que votre menu a déjà un aspect plus convenable.
Changer les paramètres du menu
L’onglet contenu
Dans la section Layout vous allez pouvoir changer plusieurs paramètres de votre menu.
Layout : vous permet de choisir entre 3 types d’alignement différents.
- Horizontal : (par défaut).
- Vertical : ne convient si vous avez des sous-menus.
- Dropdown : place le menu à l’intérieur d’une icône. Le menu apparaît lorsqu’on clique sur l’icône.
Pointer et animation permettent de changer les effets au passage de la souris.
Submenu Indicator permet de changer l’icône pointant vers le sous-menu.
Changer les paramètres du menu mobile
Mobile dropdown: permet de déterminer le Breakpoints (point de transition) en dessous duquel les menus prennent la configuration mobile.
- Par défaut le Breakpoint se situe à 1024px (tablette) on peut le changer par 767px (mobile /smartphone) ou ne pas ajouter de point de transition en sélectionnant none.
Align: permet de changer l’alignement du menu mobile
Toggle button: permet d’enlever l’icône du menu mobile, auquel cas ce dernier s’affichera automatiquement une fois en dessous du point de transition (Breakpoint).
Toggle align: permet d’aligner l’icône du menu mobile, à gauche (par défaut), au centre ou à droite.
L’onglet style
L’onglet style se concentre sur le design de votre menu et se divise en trois sections.
1 : Main menu, pour les onglets de premier niveau, pour lesquels vous pourrez :
- Changer la typographie.
- Changer de couleur du texte du menu, notamment lorsqu’on passe la souris sur un onglet ou pour déterminer l’onglet actif si on le souhaite.
- Créer et styliser un diviseur.
- Changer l’épaisseur de la bordure (pointer) qui apparaît au passage de la souris au-dessus de lien.
- Changer les marges internes (Padding) horizontales et verticales des onglets du menu.
2 : Dropdown, pour les éléments du sous-menu, pour lesquels vous allez retrouver des paramètres de customisation semblables à ceux que l’on peut trouver dans la section Main menu avec des options supplémentaires.
- Changer la couleur de fond
- Rajouter des bordures.
- Etc.
*A noter que ces changements affecteront les onglets sur tous les niveaux pas seulement les éléments du sous-menu.
3 : Toggle button, ici les changements vont s’appliquer au bouton (icône) du menu mobile.
- Couleurs
- Couleur sde fond
- Taille
- Épaisseur et arrondie de la bordure.
L’onglet Avancé
L’onglet avancé va vous permettre de styliser l’ensemble de la barre de navigation.
On peut :
- Changer les marges externes (margin) et internes (padding).
- Mettre une couleur de fond.
- Créer une bordure.
On peut aussi fixer le menu en haut de page pour qu’il demeure apparent lorsqu’on fait défiler la page vers le bas (scroll).
Création du Header
Quand on parle de créer un menu déroulant avec Elementor, on crée en fait un header qui intègre un menu.
De fait, comme je l’ai précisé en début d’article, la création d’un menu avec Elementor ne convient qu’aux thèmes qui ne disposent pas d’un header stylisé, car ce dernier va être remplacé par celui crée avec Elementor.
Pour intégrer uniquement le menu et non le header tout entier, on doit utiliser un add–on, nous verrons cela dans un autre tutoriel.
Pour styliser le header avec Elementor on va commencer par placer des sections internes au-dessus de la barre de navigation (menu).
Dans notre exemple on va commencer par créer une section interne composée de 3 colonnes.
- Dans la première colonne, on va placer le Logo du site.
- Dans la deuxième colonne, on va placer un titre.
- Dans la troisième colonne, on va placer une barre de recherche.
Maintenant, nous allons centrer verticalement et horizontalement le titre du site et verticalement la barre de recherche, en jouant à la fois sur les colonnes et les éléments.
Rajoutons une couleur de fond dégradée, a notre header et diminuons légèrement la colonne de la barre de recherche.
Vous pouvez bien sûr rajouter d’autres éléments dans le Header.
- Image.
- Boutons réseaux sociaux.
- Etc.
Intégrer le header et le menu créer avec Elementor à notre site
Pour que le header et le menu nouvellement créé apparaissent sur l’ensemble des pages articles de notre site, on doit suivre la procédure suivante.
- On clique sur Publier (ou Mettre à jour).
- Dans la fenêtre qui apparaît.
- On clique sur ADD CONDITION.
- Dans la barre include on sélectionne Entire site.
- On clique sur Save and Close.
- On attend ensuite quelques secondes le temps qu’une popup apparaisse pour indiquer que le modèle s’est enregistré correctement (Congrats ! Your Site Part is Live).
Il ne vous reste plus qu’à nous rendre sur une des pages du site pour voir le rendu de notre nouveau header et menu.
Styliser la barre de recherche d’Elementor
La barre de recherche d’Elementor dispose de plusieurs options très intéressantes.
La section Search Form
L’onglet skin permet de changer le style par défaut :
- Minimal, pour enlever l’icône de gauche.
- Full screen, pour faire apparaître la barre de recherche en grand lorsqu’on clique sur l’icône de recherche.
Placeholder permet de changer le texte par défaut situé à l’intérieur de la barre de recherche.
La section Search Button
Dans cette section, vous pouvez:
- Remplacer l’icône de recherche par un texte de votre choix.
- Changer l’icône par défaut par une flèche et ajuster sa taille.
Enfin dans dans style et avancé vous pourrez styliser votre barre de recherche comme vous avez l’habitude de le faire avec les autres éléments.
Créer un header et menu déroulant avec un template d’Elementor
Si vous ne souhaitez pas créer le header et le menu déroulant de votre site à partir de rien, vous pouvez utiliser les nombreux templates (modèles prédéfinis) offerts par Elementor.
Sur tableau de bord de Wordpress on va sur Modèles on clique sur ajouter. On sélectionne le type de modèle header, on lui donne un nom et on clique sur Créer un modèle.
Maintenant, nous choisissons le template qui nous intéresse dans la liste qui s’affiche et on clique sur Insérer. On attend que le template se charge, cela peut prendre plusieurs secondes.
Une fois en place on peut voir que tous les liens de notre menu se sont intégrés parfaitement au template.
Pour définir ce nouveau menu comme menu principal par défaut en lieu et place du menu d’origine on clique sur la barre de navigation et on sélectionne le nom du menu par défaut que nous avons donné à notre menu d’origine que l’on trouve dans la section Apparence -> menu, du tableau de bord de WordPress.
Le template laisse apparaître toutes les rangées, colonnes et éléments qu’il contient.
Vous pourrez donc remplacer, customiser, ou effacer n’importe lequel des éléments, ajuster les largeurs des colonnes, etc, de la même manière qu’avec un menu créer de toute pièce à partir d’une page blanche.
Il ne vous reste qu’à cliquer sur publier ou mettre à jour et ajouter une condition pour inclure le nouveau header et menu sur toutes vos pages/articles, comme on l’a vu dans le menu précèdent
Elementor recognized that you have set this location for other templates : Nom du template.
Cela est dû au fait que nous ne pouvons pas avoir deux menus différents pour un même emplacement.
Vous devez donc retourner sur le premier menu pour l'enlever de son emplacement.
Bien attendre que le bouton vert « mise à jour » se grise pour que le changement soit pris en compte.
On retourne ensuite sur notre nouveau menu et on applique le processus de sauvegarde.
Bien attendre là aussi que le bouton vert « mise à jour » se grise pour que le changement soit pris en compte.
On peut voir que le nouveau header/menu s’est parfaitement intégré au site.
C’est parfait, mais j’aurais aimé savoir comment créer les liens dans les sous menus.
Merci