Tuto complet : Personnaliser les en-têtes et pieds de page avec Elementor (comme un pro)

Pourquoi personnaliser son header et footer sur Elementor ?

Beaucoup de thèmes WordPress proposent des en-têtes “prêts à l’emploi”.
Mais soyons honnêtes :

• Ils se ressemblent tous.
• Ils sont difficiles à personnaliser sans coder.
• Et surtout, ils limitent ta créativité.
  

Avec Elementor Pro (lien affilié), tu prends le contrôle total.

Résultat ? Une navigation cohérente avec ta marque, adaptée à tous les écrans, et bien plus engageante.

Et si tu fais les choses bien, Google va t’aimer. Et franchement, on veut tous être aimé de Google.

Prérequis pour configurer

• WordPress installé, thème compatible Elementor (Hello Theme, Astra, GeneratePress…).
• Elementor Pro (fonction “Theme Builder” activée).

Un peu d’imagination et l’envie de sortir du moule.

Hébergez votre site chez o2switch

Faites comme XT DESIGN WEB, choisissez o2switch. Un hébergeur engagé écologiquement avec 94% d’énergie décarbonnée. Des performances au rendez-vous et un support exeptionnel.

→ Essayez o2switch

Étape 1 – Accéder au constructeur de thème

1. Va dans Modèles > Theme Builder

👉 Tu y verras : En-tête, Pied de page, Single, Archive, etc.

2. Clique sur “Ajouter un en-tête” ou “Ajouter un pied de page”

Nomme-le bien (“Header site 2025” par exemple) pour t’y retrouver plus tard.

Tu rigoleras moins quand tu auras six headers appelés “test-v2-bis-final-ok”.

Étape 2 – Créer un en-tête personnalisé sur Elementor

Structure classique d’un header :

• Ligne 1 : Logo à gauche, menu principal à droite
  
• Ligne 2 (facultative) : Bandeau d’info, CTA, ou barre sociale
  

Elementor te permet d’utiliser des containers flexibles (flexbox) (recommandé depuis Elementor 3.13+) pour un layout responsive plus fluide.

Les flexbox, c’est un peu comme le yoga pour ton design.

Éléments à intégrer :

Astuce UX :

Utilise un header transparent pour les pages de type “Landing”, et un header “collant” (sticky) pour les pages de contenu.

L’icône burger, c’est l’équivalent numérique d’un couteau suisse : petit mais indispensable.

Étape 3 – Créer un footer Elementor qui donne envie de scroller jusqu’en bas

Le pied de page est souvent un cimetière de liens. Fais-en une zone vivante, utile, claire.

Et par pitié, évite les 10 lignes de copyrights illisibles en taille 8px.

Structure recommandée :

Astuce : Pense à intégrer un champ de capture d’emails avec un lien vers Brevo / MailPoet par exemple.

C’est comme laisser une carte de visite… mais en mieux, et automatisée.

Widgets utiles :

• Icônes sociales
• Formulaire Elementor Pro
• Menu de pied de page
• Texte HTML dynamique (année actuelle, nom du site, etc.)
  

php

&copy; <?php echo date('Y'); ?> – Tous droits réservés – XT Design Web

➡️ Intégrable via widget HTML.

Et hop, plus besoin d’y penser chaque 1er janvier, comme les bonnes résolutions.

Étape 4 – Définir les conditions d’affichage

Quand tu cliques sur “Publier”, Elementor te demande :

Où afficher ce modèle ?
Tu peux choisir :

• Tout le site.
• Juste les articles.
• Un modèle différent pour les pages produits WooCommerce.
• Un header minimal pour les pages de tunnel de vente.
  

C’est ultra puissant pour les sites complexes (ou pour A/B tester ton header sur une landing).

Et aussi pratique qu’un frigo à double porte : tu choisis ce que tu sers, et à qui.

Étape 5 – Adapter le header/footer au responsive mobile

Un bon header mobile, ce n’est pas juste le menu burger…

• Supprime les éléments inutiles sur mobile (ex. : gros boutons, éléments superflus)
• Active l’option “Menu responsive” dans les paramètres du widget Menu
• Optimise les marges et tailles via les onglets “Responsive”
  

Et n’oublie pas de tester avec le simulateur intégré dans Elementor (icone d’écran en bas à gauche).

Exemples d’en-têtes créatifs

Astuces bonus

Changer le header/footer selon la page

Utilise les conditions d’affichage pour proposer un header ultra épuré sur certaines pages (ex : page de capture, blog, devis, etc.)

Ajouter un effet “hide on scroll down”

Avec un peu de JS/CSS, tu peux créer un effet où le header disparaît au scroll vers le bas, et réapparaît au scroll vers le haut.

Utiliser des shortcodes dans le footer

Tu peux y intégrer un formulaire Brevo, une carte Google Maps ou même… un QR Code dynamique.

Ce qu’il faut éviter dans ton header et footer

A retenir pour personnaliser les en-têtes et pieds de page avec Elementor

• Elementor Pro permet de créer un header/footer sur-mesure, sans coder
• Le Theme Builder centralise tout pour une gestion claire
• Tu peux afficher différentes versions selon le contexte
• Un bon header valorise la navigation ; un bon footer renforce la crédibilité

Et si tu veux garder cette cohérence encore plus facilement dans le temps, notamment sur les couleurs, espacements et styles de boutons entre plusieurs zones du site, le plus propre reste de poser de vrais design tokens dans Elementor V4.

En conclusion

Et maintenant, on en fait quoi ?

Tu as maintenant toutes les clés pour créer un en-tête et un pied de page qui claquent, et surtout qui servent vraiment ton site : clairs, utiles, responsives, et alignés avec ta marque.

Fini le header baguette industrielle : place à la belle miche artisanale designée sur mesure.

Mais si tu sens que :

• Tu as peur de tout casser (même avec le meilleur tuto du monde).
• Tu veux un résultat encore plus pro sans te noyer dans les options.
• Ou tout simplement… tu préfères confier ça à un Webdesigner WordPress qui le fait les yeux fermés (et avec un peu de musique dans les oreilles).
  

Alors écris-moi. Je t’aide à créer un site qui a de la gueule du haut jusqu’en bas (et même entre les deux).

Ton site, c’est ton image en ligne. Autant qu’elle te ressemble (et performe).