Créer un en-tête avec le constructeur de thème d’Elementor
Logo, menu, version mobile, conditions d’affichage et en-tête collant : un en-tête propre avec Elementor Pro.
Les menus sont cités tels qu’ils apparaissent dans Elementor en français. Selon votre version et vos réglages de langue, certains libellés restent en anglais (Single Post, Loop Item…).
L’en-tête est la seule partie visible sur toutes les pages : il mérite un soin particulier. Avec le constructeur de thème (Theme Builder) d’Elementor Pro (inclus dans toutes les formules Pro), vous le concevez une fois et il s’applique partout.
Créer le modèle d’en-tête
- Dans WordPress, ouvrez Elementor › Constructeur de thème.
- Cliquez sur le + de la carte Header.
- La bibliothèque s’ouvre : choisissez un en-tête prêt à l’emploi, ou fermez-la pour partir d’une page blanche.
Construire la structure
Un en-tête efficace tient sur une ligne. Créez un conteneur en direction « ligne », avec Align Items sur Center, puis ajoutez :
- le widget Site Logo, qui reprend le logo défini dans les réglages du site ;
- le widget Menu, en sélectionnant le menu créé dans Apparence › Menus ;
- un bouton pour l’action principale (« Demander un devis »…), ou des icônes sociales et une recherche.
Pour un accès à la recherche qui ne prenne pas de place sur mobile, Elementor propose de placer une icône qui ouvre un widget Off-Canvas contenant la recherche.
Pensez à l’accessibilité : ouvrez les réglages du modèle (icône dans la barre du haut) et choisissez la balise HTML header.
Vérifier la version mobile
Passez en mode tablette puis mobile dans la barre du haut. Le widget Menu se transforme automatiquement en menu burger ; le point de bascule se règle dans ses options. Réduisez au besoin la taille du logo et vérifiez que l’action principale reste accessible.
Publier avec les bonnes conditions
Au clic sur Publish, Elementor demande où afficher l’en-tête. Pour un en-tête commun, gardez Entire Site. Vous pouvez créer un second en-tête pour certaines pages seulement : tout est expliqué dans notre guide conditions d’affichage.
Rendre l’en-tête collant (sticky)
- Sélectionnez le conteneur principal de l’en-tête.
- Onglet Advanced, section Motion Effects.
- Réglez Sticky sur Top.
- Dans Sticky On, choisissez les appareils concernés (ordinateur, tablette, mobile).
- Option Effects Offset : nombre de pixels à faire défiler avant que l’effet ne démarre.
Donnez un fond opaque au conteneur pour qu’il se détache du contenu qui défile dessous. Avec les éléments de l’éditeur v4, le même effet se règle dans l’onglet Style, section Position, en choisissant Sticky.
Lien affilié : si vous achetez Elementor Pro via un lien de cette page, Expertor perçoit une commission, sans surcoût pour vous.
