Elementor est un constructeur de pages visuel pour WordPress qui 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 pour remplacer les en-têtes et pieds de page sont le Theme Builder d’Elementor Pro et le plugin gratuit Elementor Header & Footer Builder, qui reproduit cette fonctionnalité pour les utilisateurs de la version gratuite.
Prérequis et contexte
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. 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.
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, allez à 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. Donnez un nom au modèle (par exemple, Main Header) et choisissez éventuellement un bloc prédéfini. Dans le canevas Elementor, les widgets couramment utilisés pour un en-tête sont :
- Logo du site - synchronisé avec le cœur de WordPress
- Menu de navigation - menu enregistré sous Apparence > Menus
- Formulaire de recherche - champ de recherche en direct
- Bouton - CTA comme « Obtenir un devis »
- Panier (WooCommerce) - icône dynamique avec le nombre d’articles
Écueil critique : si vous faites glisser une Section et définissez sa largeur sur Full Width, l’arrière-plan de l’en-tête peut s’étendre correctement sur toute la fenêtre d’affichage. En Boxed, la couleur d’arrière-plan s’arrête à la largeur du contenu.
Étape 4 : Configurer l’en-tête fixe
Pour que l’en-tête reste en haut lors du défilement :
- Cliquez sur la section enveloppant l’en-tête. Ouvrez l’onglet Avancé.
- Sous Effets de mouvement, activez Fixe et définissez-le sur Haut.
- Optionnel : définir un point de rupture Fixe pour désactiver la fixation sur mobile.
Cas particulier : les en-têtes fixes interagissent avec la barre d’administration WordPress lorsqu’un utilisateur est connecté. Elementor gère cela dans la plupart des cas, mais vérifiez le z-index personnalisé si besoin.
Étape 5 : Définir les conditions d’affichage pour l’en-tête
Après avoir cliqué sur Publier, Elementor invite à définir les Conditions d’affichage. C’est l’une des fonctionnalités les plus puissantes et les plus mal comprises. Les exemples :
- Site entier - un en-tête universel
- Page d’accueil - un en-tête dédié à l’accueil avec une navigation de style héros
- Singulier > Page - appliquer uniquement aux pages statiques
- Singulier > Type de publication - cibler un type de publication
- Archive > Catégorie - en-tête différent pour une catégorie de blog
- Utilisateur connecté (Pro) - en-tête pour membres authentifiés
Vous pouvez empiler plusieurs conditions en utilisant Inclure et Exclure. Par exemple : inclure l’ensemble du site, mais exclure la page de paiement.
Étape 6 : Créer ou modifier le modèle de pied de page
Le flux est identique à l’en-tête. Cliquez sur l’onglet Pied de page, puis Ajouter nouveau. Widgets et modèles typiques :
- Éditeur de texte ou Titre pour les droits d’auteur avec la balise dynamique [current_year]
- Liste d’icônes ou Icônes sociales
- Menu de navigation secondaire
- Image pour badges de paiement
- Shortcode pour intégrer des plugins tiers
Définissez les conditions d’affichage puis Enregistrer & Fermer. Si vous utilisez la version gratuite, le plugin Elementor Header & Footer Builder de Brainstorm Force offre une fonctionnalité presque identique.
Méthode 2 : Elementor Header & Footer Builder (Gratuit)
Étape 1 : Installer le plugin
Accédez à Extensions > Ajouter, recherchez Elementor Header & Footer Builder, installez et activez. Note de compatibilité : ce plugin fonctionne avec la plupart des thèmes majeurs, mais nécessite que votre thème actif prenne en charge les hooks header.php et footer.php. Les thèmes FSE peuvent nécessiter une approche différente.
Étape 2 : Créer un modèle d’en-tête
Allez à Apparence > Elementor Header & Footer Builder, Ajouter nouveau, Type sur Header, nom descriptif, Créer le modèle. L’éditeur Elementor est le même que pour Pro - utilisez Logo, Menu, Bouton, etc.
Étape 3 : Attribuer des règles d’affichage
Après publication, la boîte méta Règles d’affichage détermine les conditions (Site entier, Pages spécifiques, Toutes les pages singulières, Toutes les pages d’archive). Le système est moins Granular que Pro.
Étape 4 : Créer un modèle de pied de page
Retournez à Apparence > Elementor Header & Footer Builder, Ajouter nouveau, type Footer, puis concevez et appliquez les règles comme pour l’en-tête.
Comparaison rapide
- Coût : Pro est payant; le gratuit couvre les bases via le plugin dédié.
- Conditions d’affichage : avancées (Pro) vs basiques (gratuit).
- Balises dynamiques : disponibles en Pro, non dans le gratuit.
- Intégration WooCommerce : oui avec Pro, non dans le gratuit.
Techniques de personnalisation avancées
Conception responsive de l’en-tête et du pied de page : trois modes d’affichage (bureau, tablette, mobile). Ajustez les marges et tailles de police par rupture, et adaptez le menu en mode mobile (bouton hamburger). Evitez les mêmes valeurs de rembourrage sur tous les points de rupture pour éviter l’effet étouffant sur mobile.
Ajouter un en-tête transparent ou déclenché au défilement :
- Pour Pro : régler l’arrière-plan sur None et activer Fixe avec Effets de transparence.
- Pour le gratuit : utiliser du CSS personnalisé pour obtenir un effet similaire.
Utilisation des balises dynamiques dans le pied de page (Pro) : insérez les données en direct, par exemple l’année en cours, sans coder en dur.
Considérations de performance et dépannage
Les en-têtes et pieds de page personnalisés chargent du CSS et du JavaScript supplémentaires sur chaque page. Utilisez Query Monitor pour vérifier les requêtes, et réalisez un audit Lighthouse avant et après l’activation. Purgez le cache CDN après chaque mise à jour pour éviter la diffusion d’anciens éléments. En environnement VPS, ajustez memory_limit si nécessaire.
Tableau de synthèse
| Aspect | Elementor Pro Theme Builder | Elementor Header & Footer Builder (Gratuit) |
|---|---|---|
| Coût | Payant | Gratuit |
| Conditions d’affichage | Avancées (inclure/exclure, utilisateur, CPT) | |
| Balises dynamiques | Oui | |
| Intégration WooCommerce | Oui | |
| SEO et performance | Impact dépendant du code |
Pour les débutants comme pour les utilisateurs avancés, remplacer Muffin Builder par Elementor sans perdre le contenu repose sur une gestion soignée des modèles et des règles d’affichage, ainsi que sur une vérification systématique des performances et du cache.