Comment modifier les en-têtes et pieds de page avec Elementor dans WordPress

Elementor est un constructeur de pages visuel pour WordPress qui vous permet de concevoir, remplacer et gérer des en-têtes et pieds de page personnalisés via une interface glisser-déposer — sans modification de modèle PHP ni thème enfant requis. Les deux principales approches sont le Theme Builder d’Elementor Pro, qui gère nativement les modèles d’en-tête et de pied de page, et le plugin gratuit Elementor Header & Footer Builder, qui reproduit cette fonctionnalité pour les utilisateurs de la version gratuite.

Les deux méthodes injectent votre modèle personnalisé dans la hiérarchie de modèles de WordPress en remplaçant la sortie header.php et footer.php par défaut du thème. Comprendre cette distinction est important lors du débogage des conflits avec votre thème actif ou votre couche de mise en cache.

Prérequis avant de commencer

Avant de toucher à un modèle, confirmez les points suivants :

• Votre installation WordPress fonctionne avec la version 6.0 ou supérieure (exigence minimale d’Elementor selon les versions stables actuelles).
• Vous avez un thème enfant actif si votre thème parent est livré avec sa propre logique d’en-tête/pied de page. Modifier directement un thème parent entraînera la perte des modifications lors de la prochaine mise à jour du thème.
• La limite de mémoire PHP est définie à au moins 256 MB. L’éditeur d’Elementor est gourmand en mémoire, et une limite trop basse provoque des échecs de sauvegarde silencieux. Vérifiez wp-config.php ou le fichier php.ini de votre serveur.
• Vous avez vidé tout cache de page complète avant de tester les modifications. Le HTML mis en cache continuera à servir l’ancien en-tête/pied de page, quelle que soit la sauvegarde effectuée dans Elementor.

Si votre site WordPress fonctionne dans un environnement VPS Hosting, vous avez un accès direct à php.ini et pouvez définir memory_limit = 256M sans dépendre d’un panneau de contrôle d’hébergement.

Méthode 1 : Elementor Pro Theme Builder

Le Theme Builder d’Elementor Pro est la solution canonique et entièrement prise en charge. Il vous offre des conditions d’affichage granulaires, des balises de contenu dynamique et une intégration directe avec les éléments WooCommerce.

Étape 1 : Installer et activer Elementor Pro

Achetez Elementor Pro sur le site officiel d’Elementor. Vous recevrez un fichier ZIP et une clé de licence.

Dans votre tableau de bord WordPress, accédez à Extensions > Ajouter > Téléverser une extension. Sélectionnez le fichier ZIP, cliquez sur Installer maintenant, puis sur Activer. Après l’activation, accédez à Elementor > Licence et connectez votre clé de licence. Le plugin principal Elementor gratuit et Elementor Pro doivent tous deux être actifs simultanément — Pro est une extension, pas un plugin autonome.

Étape 2 : Ouvrir le Theme Builder

Accédez à Modèles > Theme Builder. L’interface est divisée en sections : En-tête, Pied de page, Singulier, Archive, Résultats de recherche et Erreur 404. Chaque section peut contenir plusieurs modèles avec différentes conditions d’affichage, ce qui vous permet de servir un en-tête différent sur les pages de destination par rapport aux articles de blog.

Étape 3 : Créer ou modifier le modèle d’en-tête

Cliquez sur l’onglet En-tête, puis sur Ajouter nouveau. Une fenêtre modale vous invite à nommer le modèle (par exemple, Main Header) et à choisir éventuellement un bloc prédéfini dans la bibliothèque de modèles d’Elementor.

Dans le canevas Elementor, les widgets les plus couramment utilisés pour un en-tête sont :

• Logo du site — récupère le logo défini sous Apparence > Personnaliser > Identité du site, en le maintenant synchronisé avec le cœur de WordPress.
• Menu de navigation — fait référence à tout menu enregistré sous Apparence > Menus. Vous pouvez styliser les états de survol, les menus déroulants et le comportement du menu hamburger mobile directement dans les paramètres du widget.
• Formulaire de recherche — ajoute un champ de recherche en direct. Pour les utilisateurs Pro, celui-ci peut être connecté à des types de publications personnalisés.
• Bouton — utile pour les éléments CTA comme « Obtenir un devis » ou les liens de connexion.
• Panier (WooCommerce) — affiche une icône de panier dynamique avec le nombre d’articles si WooCommerce est actif.

Écueil critique : Si vous faites glisser une Section (ou un Conteneur en mode Flexbox) et définissez sa largeur sur Full Width, l’arrière-plan de l’en-tête s’étendra correctement sur toute la fenêtre d’affichage. Si vous le laissez à Boxed, la couleur d’arrière-plan s’arrêtera à la largeur du contenu, laissant l’arrière-plan brut de la page sur les côtés — un bug visuel courant qui piège les nouveaux utilisateurs.

Étape 4 : Configurer l’en-tête fixe

Pour que l’en-tête reste en haut de la fenêtre d’affichage lors du défilement :

1. Cliquez sur la section/le conteneur qui enveloppe l’ensemble de votre mise en page d’en-tête.
2. Ouvrez l’onglet Avancé dans le panneau de gauche.
3. Sous Effets de mouvement, activez Fixe et définissez-le sur Haut.
4. Définissez éventuellement un point de rupture Fixe sur pour désactiver la fixation sur mobile, où elle consomme trop d’espace vertical à l’écran.

Cas particulier : Les en-têtes fixes interagissent mal avec la barre d’administration WordPress lorsqu’un utilisateur est connecté. La barre d’administration ajoute 32px de décalage en haut. Elementor gère cela automatiquement dans la plupart des cas, mais si vous utilisez un z-index personnalisé sur la section fixe, vérifiez qu’il ne chevauche pas la barre d’administration en testant en étant connecté.

Étape 5 : Définir les conditions d’affichage pour l’en-tête

Après avoir cliqué sur Publier, Elementor vous invite immédiatement à définir les Conditions d’affichage. C’est l’une des fonctionnalités les plus puissantes et les plus mal comprises.

Vous pouvez empiler plusieurs conditions en utilisant les règles Inclure et Exclure. Par exemple : inclure l’ensemble du site, mais exclure la page de paiement — un modèle courant pour les boutiques WooCommerce qui souhaitent un en-tête de paiement sans distraction.

Cliquez sur Enregistrer & Fermer une fois terminé.

Étape 6 : Créer ou modifier le modèle de pied de page

Le flux de travail du pied de page est identique à celui de l’en-tête. Cliquez sur l’onglet Pied de page dans le Theme Builder, puis sur Ajouter nouveau.

Widgets et modèles de mise en page courants pour le pied de page :

• Widget Éditeur de texte ou Titre pour les mentions de droits d’auteur. Utilisez la balise dynamique [current_year] via le système de contenu dynamique d’Elementor pour éviter de mettre à jour manuellement l’année.
• Widget Liste d’icônes ou Icônes sociales pour les liens vers les réseaux sociaux.
• Widget Menu de navigation pour une navigation secondaire en pied de page (politique de confidentialité, conditions d’utilisation, liens du plan du site).
• Widget Image pour les badges de paiement ou les sceaux de confiance.
• Widget Shortcode pour intégrer la sortie de plugins tiers (par exemple, un shortcode de consentement aux cookies).

Définissez les conditions d’affichage en suivant la même logique que pour l’en-tête, puis cliquez sur Enregistrer & Fermer.

Méthode 2 : Elementor Header & Footer Builder (Gratuit)

Si vous utilisez la version gratuite d’Elementor, le plugin Elementor Header & Footer Builder de Brainstorm Force offre une fonctionnalité presque identique sans nécessiter de licence Pro.

Étape 1 : Installer le plugin

Accédez à Extensions > Ajouter, recherchez Elementor Header & Footer Builder, et installez le plugin par Brainstorm Force (vérifiez l’auteur — il existe des plugins portant des noms similaires). Cliquez sur Activer.

Note de compatibilité : Ce plugin fonctionne avec la plupart des thèmes majeurs, mais il nécessite que votre thème actif prenne en charge les hooks header.php et footer.php. Les thèmes construits entièrement sur l’édition complète du site (FSE) basée sur des blocs — tels que Twenty Twenty-Three et Twenty Twenty-Four — utilisent un système de modèles différent et peuvent ne pas répondre à la méthode d’injection de ce plugin. Dans ce cas, passez à un thème classique comme Astra, GeneratePress ou Hello Elementor, ou mettez à niveau vers Elementor Pro.

Étape 2 : Créer un modèle d’en-tête

Accédez à Apparence > Elementor Header & Footer Builder, puis cliquez sur Ajouter nouveau.

Dans la fenêtre modale de création de modèle :

• Définissez le Type sur Header.
• Donnez-lui un nom descriptif.
• Cliquez sur Créer le modèle.

Vous serez redirigé vers l’éditeur Elementor standard. Le processus de conception est identique à Elementor Pro — utilisez les mêmes widgets (Logo du site, Menu de navigation, Bouton, etc.).

Étape 3 : Attribuer des règles d’affichage

Après la publication, faites défiler vers le bas dans l’écran d’édition WordPress du modèle (pas le canevas Elementor) pour trouver la boîte méta Règles d’affichage. Celle-ci est distincte de la fenêtre modale des conditions d’affichage d’Elementor Pro et fonctionne via les métadonnées de publication WordPress standard.

Les options incluent :

• Site entier
• Pages spécifiques (sélectionnées individuellement)
• Toutes les pages singulières
• Toutes les pages d’archive

Le système de règles d’affichage du plugin gratuit est moins granulaire que celui d’Elementor Pro — vous ne pouvez pas cibler par état de connexion de l’utilisateur, archives de types de publications personnalisés, ni utiliser des règles d’exclusion. Pour la plupart des petits sites, cela est suffisant.

Étape 4 : Créer un modèle de pied de page

Retournez à Apparence > Elementor Header & Footer Builder, cliquez sur Ajouter nouveau et définissez le type sur Footer. Le processus de conception et d’attribution des règles d’affichage est identique au flux de travail de l’en-tête ci-dessus.

Comparaison : Elementor Pro Theme Builder vs. Plugin gratuit

Techniques de personnalisation avancées

Conception responsive de l’en-tête et du pied de page

L’éditeur d’Elementor dispose de trois modes de fenêtre d’affichage accessibles via des icônes en bas du canevas : Bureau, Tablette et Mobile. Chaque paramètre d’espacement, de taille de police et de visibilité peut être remplacé par point de rupture.

Flux de travail pratique :

1. Concevez d’abord la mise en page bureau.
2. Passez en vue Tablette et ajustez l’empilement des colonnes, les tailles de police et le rembourrage.
3. Passez en vue Mobile. Masquez les éléments de navigation secondaires en utilisant Avancé > Responsive > Masquer sur mobile. Remplacez le menu de navigation complet par un bouton hamburger en définissant le Point de rupture du widget Menu de navigation sur Mobile.

N’utilisez jamais les mêmes valeurs de rembourrage sur tous les points de rupture. Un rembourrage haut/bas de 40px sur bureau devient étouffant sur un écran de téléphone de 375px de large. Définissez le rembourrage mobile sur 15px ou 20px.

Ajouter un en-tête transparent ou déclenché au défilement

Un modèle de conception courant est un en-tête transparent sur une image héros qui devient solide au défilement. Elementor Pro gère cela via les paramètres Fixe combinés à un Effet de défilement :

1. Définissez l’arrière-plan de la section d’en-tête sur None (transparent).
2. Activez Fixe sous Effets de mouvement.
3. Dans les paramètres fixes, activez Effets de transparence et définissez la couleur d’arrière-plan de l’état défilé.

Pour le plugin gratuit, vous avez besoin de CSS personnalisé. Ajoutez ce qui suit dans Apparence > Personnaliser > CSS supplémentaire :

/* Transparent header on load */
.hfe-header {
    background-color: transparent !important;
    transition: background-color 0.3s ease;
}

/* Solid header after scroll — requires a JS class toggle */
.hfe-header.scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

Ensuite, ajoutez un petit extrait JavaScript via un plugin comme Code Snippets :

window.addEventListener('scroll', function () {
    const header = document.querySelector('.hfe-header');
    if (window.scrollY > 50) {
        header.classList.add('scrolled');
    } else {
        header.classList.remove('scrolled');
    }
});

Utilisation des balises dynamiques dans le pied de page (Pro)

Les balises dynamiques d’Elementor Pro vous permettent d’insérer des données en direct dans le texte du pied de page sans coder les valeurs en dur. Le cas d’utilisation le plus pratique est l’année de droits d’auteur :

1. Ajoutez un widget Éditeur de texte à votre pied de page.
2. Cliquez sur l’icône de balise dynamique (l’icône de base de données) à côté du champ de texte.
3. Sélectionnez Site > Année en cours.

La sortie s’affiche sous la forme de l’année à quatre chiffres en cours et se met à jour automatiquement le 1er janvier — aucune modification manuelle requise. Vous pouvez combiner du texte statique et des balises dynamiques dans le même widget : © [dynamic: Current Year] Your Company Name. All rights reserved.

Considérations de performance

Les en-têtes et pieds de page Elementor personnalisés chargent du CSS et du JavaScript supplémentaires sur chaque page. Évaluez l’impact :

• Utilisez le plugin Query Monitor pour vérifier combien de requêtes de base de données votre modèle d’en-tête ajoute par chargement de page.
• Effectuez un audit Lighthouse avant et après l’activation de l’en-tête personnalisé. Un en-tête mal structuré avec des images non optimisées peut ajouter 200–400ms au Largest Contentful Paint (LCP) si l’image du logo n’est pas correctement dimensionnée ou servie au format WebP.
• Si vous utilisez un CDN, purgez le cache CDN après chaque mise à jour de l’en-tête/pied de page. Les nœuds CDN obsolètes continueront à servir l’ancien HTML du modèle.

Dans un environnement VPS avec cPanel, vous pouvez configurer la mise en cache des objets avec Redis ou Memcached pour réduire la surcharge des requêtes de base de données qu’Elementor ajoute lors de la résolution des modèles à chaque requête.

Résolution des problèmes courants

L’en-tête ne s’affiche pas après la publication :

La cause la plus fréquente est une condition d’affichage manquante ou conflictuelle. Accédez à Modèles > Theme Builder > En-tête, ouvrez le modèle, cliquez sur Publier et vérifiez que les conditions d’affichage incluent la page que vous testez. Vérifiez également que votre thème actif ne code pas en dur un appel get_header() qui contourne le hook d’Elementor.

Le pied de page chevauche le contenu de la page :

Cela signifie généralement que la section du modèle de pied de page a une marge supérieure négative ou que le wrapper de contenu principal du thème n’a pas de rembourrage inférieur. Inspectez l’élément dans les DevTools du navigateur et identifiez quelle règle CSS cause le chevauchement.

L’éditeur Elementor ne se charge pas (écran blanc ou spinner) :

Augmentez temporairement la limite de mémoire PHP à 512 MB pour diagnostiquer. Désactivez également tous les plugins sauf Elementor principal et Pro, puis réactivez-les un par un pour identifier un conflit.

L’en-tête fixe saute sur mobile :

iOS Safari présente des problèmes connus avec position: sticky et les changements de hauteur de fenêtre d’affichage dynamiques causés par l’apparition/disparition du chrome du navigateur lors du défilement. Utilisez position: fixed avec un padding-top compensatoire sur le corps de la page comme solution de contournement, ou définissez l’option fixe sur bureau uniquement.

L’en-tête personnalisé n’apparaît pas sur les pages WooCommerce :

WooCommerce enregistre ses propres types de pages (Boutique, Panier, Paiement, Mon compte). Dans les conditions d’affichage d’Elementor Pro, vous devez explicitement inclure WooCommerce > Shop Page ou WooCommerce > All WooCommerce Pages — ils ne sont pas couverts par la condition générique « Site entier » dans certaines configurations de thème.

Environnement d’hébergement et performance

La performance de votre en-tête et pied de page construits avec Elementor est directement liée au temps de réponse de votre serveur. Elementor stocke les données de modèle sous forme de métadonnées de publication dans la base de données WordPress et génère des fichiers CSS sur le serveur. Sur un hébergement mutualisé avec des I/O limités, la régénération CSS après une mise à jour de modèle peut expirer silencieusement, laissant votre site avec des styles obsolètes.

Pour les sites WordPress en production utilisant Elementor, un environnement VPS Hosting avec au moins 2 cœurs CPU et 4 GB RAM offre la marge nécessaire pour des performances fluides de l’éditeur et une génération CSS rapide. Si vous exploitez une boutique WooCommerce avec un en-tête et un pied de page personnalisés, les Serveurs Dédiés éliminent entièrement la contention des ressources.

Quelle que soit votre formule d’hébergement, associez toujours votre installation WordPress à un Certificat SSL valide. Les avertissements de contenu mixte — déclenchés lorsque des ressources HTTP sont chargées dans une page HTTPS — briseront l’interface de l’éditeur Elementor et provoqueront l’échec du chargement des ressources de votre en-tête (logos, icônes) dans certains navigateurs.

Matrice de décision : quelle méthode utiliser ?

Liste de contrôle pratique avant la mise en ligne

• Vérifiez que les conditions d’affichage couvrent tous les types de pages prévus, y compris les pages 404 et les pages de résultats de recherche.
• Testez l’en-tête et le pied de page sur un vrai appareil mobile, pas seulement sur l’émulation des DevTools du navigateur.
• Confirmez que le logo utilise une image WebP et que les attributs width et height sont explicitement définis dans le widget Image pour éviter le décalage de mise en page (CLS).
• Vérifiez que tous les liens du menu de navigation se résolvent correctement après la publication du modèle.
• Purgez toutes les couches de mise en cache : cache côté serveur, cache CDN et cache du navigateur.
• Exécutez Lighthouse sur bureau et mobile pour confirmer l’absence de régressions LCP ou CLS.
• Si vous utilisez des balises dynamiques Elementor Pro, vérifiez qu’elles affichent la sortie correcte lorsqu’elles sont consultées en tant qu’utilisateur déconnecté.
• Confirmez que la balise dynamique de l’année de droits d’auteur dans le pied de page est active et non codée en dur.
• Testez le comportement de l’en-tête fixe avec la barre d’administration WordPress visible (état connecté).
• Vérifiez que les pages WooCommerce (le cas échéant) sont couvertes par la condition d’affichage correcte.

FAQ

Puis-je utiliser Elementor pour modifier les en-têtes et pieds de page sans Elementor Pro ?

Oui. Installez le plugin gratuit Elementor Header & Footer Builder de Brainstorm Force. Il s’intègre à l’éditeur Elementor gratuit et vous permet de concevoir des en-têtes et pieds de page personnalisés avec des règles d’affichage, bien qu’avec moins d’options de ciblage que le Theme Builder d’Elementor Pro.

Pourquoi mon en-tête Elementor ne s’affiche-t-il pas sur mon site WordPress après la publication ?

La cause la plus courante est une condition d’affichage non configurée ou incorrecte. Ouvrez le modèle dans le Theme Builder, cliquez sur Publier et assurez-vous que la condition d’affichage est définie au moins sur Site entier ou le type de page spécifique que vous ciblez. Vérifiez également qu’aucun en-tête codé en dur au niveau du thème n’existe dans les fichiers de modèle du thème parent.

L’en-tête personnalisé d’Elementor remplace-t-il l’en-tête par défaut du thème ?

Oui. Lorsqu’une condition d’affichage est satisfaite, Elementor s’accroche à elementor/theme/before_do_header et remplace entièrement la sortie get_header() du thème. Le fichier header.php original du thème est contourné pour ces pages.

Un en-tête Elementor personnalisé ralentira-t-il mon site ?

Cela est possible si non optimisé. Elementor charge son propre fichier CSS par modèle. Assurez-vous que le logo est une image WebP compressée, évitez de charger des widgets inutiles et activez l’option Chargement amélioré des ressources d’Elementor sous Elementor > Paramètres > Avancé pour ne charger que le CSS des widgets réellement utilisés sur chaque page.

Puis-je avoir différents en-têtes pour différentes pages dans WordPress avec Elementor ?

Oui, avec Elementor Pro. Créez plusieurs modèles d’en-tête et attribuez à chacun une condition d’affichage spécifique — par exemple, un en-tête pour la page d’accueil, un autre pour les articles de blog et un en-tête minimal pour la page de paiement. Le Theme Builder Pro évalue les conditions par ordre de priorité, de sorte que les conditions plus spécifiques remplacent les conditions plus larges.