Header personnalise dans Elementor : le guide gratuit

Vous avez créé votre site avec Elementor et vous voulez un header sur-mesure (logo, menu, bouton d’appel à l’action) au lieu du header générique de votre thème. La version gratuite d’Elementor ne permet PAS de créer un header personnalisé nativement : il faut soit passer par Elementor Pro (payant), soit utiliser un plugin gratuit comme Ultimate Addons for Elementor qui débloque cette fonctionnalité sans rien dépenser. Je vous montre la méthode gratuite en détail, et ce qu’apporte en plus la version payante.

Je vais vous expliquer pourquoi Elementor gratuit bloque cette fonctionnalité, comment débloquer un header personnalisé sans payer, les éléments indispensables à mettre dedans, et les erreurs qui font planter l’affichage sur mobile.

Pourquoi Elementor gratuit ne permet pas de créer un header

Elementor gratuit vous permet de construire vos pages en drag-and-drop, mais pas le header ni le footer de votre site : ceux-ci restent gérés par votre thème WordPress. La création de header, footer et templates dynamiques (le « Theme Builder ») fait partie des fonctionnalités réservées à Elementor Pro, l’éditeur de site m’a soutenu ce choix : c’est justement ce qui justifie l’abonnement payant.

En clair, si vous ouvrez Elementor gratuit et que vous cherchez « Header » dans le Theme Builder, vous ne le trouverez pas. Ce n’est pas un bug, c’est une limitation volontaire. Documentation officielle : centre d’aide Elementor.

La solution gratuite : Ultimate Addons for Elementor

Bonne nouvelle : un plugin gratuit et bien maintenu débloque cette fonctionnalité sans passer par la version payante. Il s’appelle Ultimate Addons for Elementor (anciennement connu sous le nom « Elementor Header & Footer Builder »). Voici comment l’installer et créer votre header :

1. Dans WordPress, allez dans Extensions > Ajouter
2. Cherchez « Ultimate Addons for Elementor », installez et activez
3. Un nouveau menu apparaît : UAE > Elementor Header & Footer Builder
4. Cliquez sur « Ajouter nouveau » et donnez un nom à votre modèle
5. Choisissez le type de modèle : En-tête
6. Éditez votre header avec Elementor comme n’importe quelle page
7. Définissez les règles d’affichage (tout le site, ou certaines pages seulement)
8. Publiez

Une fois publié, votre header personnalisé remplace automatiquement celui de votre thème sur les pages ciblées. 100% gratuit, aucune limite de temps ni de fonctionnalité bridée sur cette partie précise.

Les 4 éléments indispensables dans votre header

Un bon header ne sert pas juste à faire joli, il guide le visiteur. Voici ce qu’il doit contenir, dans l’ordre :

• Le logo à gauche : cliquable, il ramène toujours vers l’accueil
• Le menu de navigation principal : 5 à 7 liens maximum, pas plus (au-delà, le visiteur se perd)
• Un bouton d’appel à l’action visible : « Contact », « Devis gratuit », « Réserver », coloré et contrasté par rapport au reste du header
• Un élément de réassurance optionnel : numéro de téléphone cliquable, adresse email, ou icônes réseaux sociaux

Pour le logo, si vous n’en avez pas encore ou voulez le retravailler rapidement, j’ai un article complet sur créer un logo avec l’IA gratuitement.

Construire son header étape par étape dans Elementor

Étape 1 : structurer avec des sections et colonnes

Ajoutez une section large sur toute la largeur, puis divisez-la en 2 ou 3 colonnes : logo à gauche, menu au centre ou à droite, bouton CTA tout à droite. C’est la structure la plus lisible et la plus utilisée sur le web.

Étape 2 : ajouter le widget Menu de navigation

Glissez le widget « Menu de navigation » dans votre colonne centrale, puis sélectionnez le menu WordPress que vous avez déjà créé dans Apparence > Menus. Si vous n’avez pas encore de menu, créez-le d’abord là-bas.

Étape 3 : rendre le header collant (sticky)

Dans les paramètres avancés de la section, activez l’option « Sticky » (Collant) pour que le header reste visible quand le visiteur défile la page. C’est un standard aujourd’hui, la majorité des sites pro le font.

Étape 4 : régler la version mobile séparément

Elementor permet de régler chaque élément différemment selon la taille d’écran (desktop, tablette, mobile). Sur mobile, remplacez le menu classique par une icône « hamburger » (les 3 lignes horizontales) pour ne pas surcharger l’écran.

Elementor Pro : qu’est-ce que ça apporte en plus

Si votre activité grandit, Elementor Pro (à partir d’environ 60€/an) ajoute des règles de conditions d’affichage plus fines, des templates de header prêts à l’emploi, et un widget menu plus personnalisable visuellement. Pour un débutant ou une petite structure, la solution gratuite avec Ultimate Addons for Elementor suffit largement pour un header professionnel.

Mais attention : n’achetez pas Elementor Pro juste pour le header si un plugin gratuit fait le travail. Gardez ce budget pour autre chose (hébergement, nom de domaine) tant que vous démarrez.

Les erreurs qui cassent un header Elementor

• Trop de liens dans le menu : au-delà de 7, le visiteur ne mémorise plus rien, regroupez par sous-menus si besoin
• Header trop haut : il mange l’espace visible sans faire défiler, limitez la hauteur à 80-100px sur desktop
• Logo flou ou mal dimensionné : exportez toujours votre logo en PNG avec fond transparent, en haute résolution
• Oublier de tester sur mobile : un header qui déborde sur mobile fait fuir instantanément, vérifiez systématiquement à chaque modification
• Bouton CTA sans contraste : s’il a la même couleur que le fond, personne ne le voit

A retenir : header personnalise dans Elementor

Glissez pour parcourir les points clés

FAQ : header personnalisé dans Elementor

Peut-on créer un header Elementor sans Elementor Pro ?

Oui, en installant le plugin gratuit Ultimate Addons for Elementor, qui débloque le Theme Builder (header, footer) sans passer par la version payante.

Comment rendre le header visible uniquement sur certaines pages ?

Lors de la publication du modèle de header, vous définissez des règles d’affichage : tout le site, une page précise, une catégorie, etc. C’est réglable en quelques clics.

Le header Elementor ralentit-il le site ?

Un peu, comme tout constructeur visuel, mais l’impact reste minime si vous évitez les animations lourdes et les images trop volumineuses. Compressez toujours vos images avant de les intégrer.

Comment ajouter une barre de recherche dans le header ?

Ajoutez le widget « Recherche » d’Elementor dans une colonne de votre header, à côté du menu ou du bouton CTA.

Pour résumer sur le header personnalisé Elementor

Vous l’aurez compris : pas besoin de payer Elementor Pro pour un header pro. Le plugin gratuit Ultimate Addons for Elementor débloque le Theme Builder et vous permet de construire un header sur-mesure avec logo, menu et bouton d’action, comme sur n’importe quel site professionnel. Donc voilà pour la structure de base, à vous de l’adapter à votre identité visuelle.

Pour aller plus loin : créer un site WordPress de A à Z et créer un site internet avec l’IA.

Posez vos questions en commentaire, j’y réponds toujours. Et abonnez-vous à la chaîne YouTube FormationsMarketingFR pour les vidéos qui complètent les articles. 😉