Créer des templates Elementor pour header, footer et single

Si votre header change d’une page à l’autre sans raison, ou si votre footer disparaît dès que vous activez Elementor, le problème vient presque toujours d’un mélange “thème + templates Elementor + conditions d’affichage” mal maîtrisé. Une fois les bons réglages posés, Elementor Theme Builder devient très fiable — mais il faut le traiter comme un système de templates, pas comme une page “jolie”.

Ce qu’on va construire

Vous allez mettre en place une structure complète basée sur Elementor Theme Builder (Elementor Pro), avec :

Un header global (logo, menu, bouton/CTA, comportement sticky optionnel).
Un footer global (colonnes, liens, mentions légales, copyright dynamique).
Un template Single Post (titre, image mise en avant, métadonnées, contenu, auteur, navigation, articles liés).

Le résultat vise des sites de contenus (blog, magazine, site vitrine avec blog), où vous avez besoin d’un design cohérent et d’une maintenance simple (changer un menu une fois, pas 30).

À la fin, vous saurez :

Créer des templates “Theme Builder” propres, avec des Display Conditions sans conflits.
Contrôler qui rend quoi (thème vs Elementor) et diagnostiquer les doublons.
Ajouter du CSS/JS de manière compatible WordPress 6.9.4 / PHP 8.1+, sans “snippet magique” fragile.

Résumé rapide

Activez Elementor + Elementor Pro, puis vérifiez que le thème n’impose pas déjà un header/footer “verrouillé”.
Créez Header et Footer dans Templates → Theme Builder, puis définissez des Display Conditions explicites.
Créez un Single Post avec widgets dynamiques (Post Title, Featured Image, Post Content, Author Box…).
Ajoutez CSS/JS via enqueue (thème enfant ou mini-plugin), pas via 12 endroits différents.
Testez sur plusieurs types de pages (home, page, article, archive, 404) et videz les caches.

Quand utiliser cette solution

Vous utilisez Elementor Pro et vous voulez centraliser header/footer/single sans toucher aux fichiers PHP du thème.
Vous avez plusieurs modèles (ex : header différent sur landing pages, footer minimal sur pages de vente).
Vous travaillez avec un thème “léger” (Hello Elementor, GeneratePress, Astra…) ou un thème qui laisse Elementor prendre la main.
Vous devez livrer un site à un client : le Theme Builder est plus simple à maintenir qu’un mélange de templates PHP custom non documentés.

Quand ne PAS utiliser cette solution

Vous n’avez pas Elementor Pro : le Theme Builder (header/footer/single) dépend de Pro. Sans Pro, vous pouvez bricoler, mais vous perdez la moitié de l’intérêt.
Votre thème (ou un builder concurrent) impose déjà un système complet (ex : certains setups Avada/Divi) et vous n’êtes pas prêt à gérer la cohabitation.
Vous cherchez une perf maximale et un rendu 100% “core” : un thème bloc (FSE) + templates natifs peut être plus léger.
Vous avez un site e-commerce complexe : Elementor peut gérer WooCommerce, mais le travail sur les templates produit/caisse demande des tests plus lourds (et des risques de régression).

Avant de commencer (prérequis)

Versions et environnement

WordPress : 6.9.4 (avril 2026) ou plus récent.
PHP : 8.1 minimum recommandé (8.2/8.3 souvent plus confortable).
Elementor + Elementor Pro à jour.

Sauvegarde et sécurité

Faites une sauvegarde (fichiers + base) et, si possible, travaillez sur une préprod/staging.
Évitez de coller du code dans 3 plugins de snippets différents. J’ai souvent vu un site cassé parce que “le même snippet” était actif deux fois.
Si vous ajoutez du code, préférez un thème enfant ou un mini-plugin dédié (plus propre, plus portable).

Sources officielles utiles

Étape 1 : préparer le terrain (thème, emplacements, conditions)

1) Vérifier que le thème laisse Elementor gérer header/footer

Dans l’admin WordPress :

Allez dans Apparence → Personnaliser (ou options du thème si Avada/Divi/Astra).
Désactivez les options qui “forcent” un header/footer custom du thème si vous voulez que Elementor remplace tout.
Dans Elementor → Réglages, vérifiez que vos types de contenus sont activés (Pages, Articles, éventuellement CPT).

Résultat attendu : votre thème affiche encore son header/footer pour le moment, mais il ne “bloque” pas Elementor (pas de header dupliqué quand Elementor prendra la main).

2) Comprendre le mécanisme : qui rend quoi

Elementor Pro Theme Builder rend ses templates via des conditions d’affichage. Si vous créez un header “Entire Site”, Elementor va :

Injecter son header à la place (ou par-dessus) celui du thème, selon la compatibilité.
Rendre le template le plus spécifique quand plusieurs matchent.

Les bugs typiques viennent de :

Deux headers actifs en même temps (un “Entire Site” + un “Pages” mal exclu).
Un cache (plugin, serveur, Cloudflare) qui sert un ancien rendu.
Un thème qui ne déclare pas correctement la compatibilité header/footer (rare, mais je l’ai vu sur des thèmes très custom).

3) (Optionnel mais conseillé) Créer un mini-plugin pour CSS/JS et petits ajustements

Vous pouvez tout faire sans code. Mais dès que vous voulez un sticky header propre, un CSS global stable, ou un petit JS (menu mobile), un mini-plugin évite de dépendre d’un “Custom CSS” dispersé.

Créez un fichier : wp-content/plugins/bpcab-elementor-theme-builder/bpcab-elementor-theme-builder.php

<?php
/**
 * Plugin Name: BPCAB - Elementor Theme Builder Helpers
 * Description: CSS/JS et petits ajustements pour les templates Elementor (header/footer/single).
 * Version: 1.0.0
 * Requires at least: 6.9
 * Requires PHP: 8.1
 * Author: Votre Nom
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Sécurité : empêche l'accès direct au fichier.
}

add_action( 'wp_enqueue_scripts', function () {
	// CSS global (chargé côté public).
	wp_enqueue_style(
		'bpcab-etb',
		plugins_url( 'assets/css/etb.css', __FILE__ ),
		array(),
		'1.0.0'
	);

	// JS optionnel (décommenter si vous en avez besoin).
	wp_enqueue_script(
		'bpcab-etb',
		plugins_url( 'assets/js/etb.js', __FILE__ ),
		array(),
		'1.0.0',
		true
	);
}, 20 );

Créez ensuite :

wp-content/plugins/bpcab-elementor-theme-builder/assets/css/etb.css
wp-content/plugins/bpcab-elementor-theme-builder/assets/js/etb.js

Activez le plugin dans Extensions.

Résultat attendu : aucun changement visuel immédiat, mais vous avez une base propre pour la suite. Et vous évitez l’anti-pattern “CSS dans 4 endroits”.

Étape 2 : créer un Header global propre (avec menu + logo + CTA)

1) Créer le template Header

Allez dans Templates → Theme Builder.
Onglet Header → Add New.
Nommez : Header – Global.
Choisissez un modèle (ou “Start from scratch”).

2) Construire la structure (pragmatique)

Dans l’éditeur Elementor, je pars souvent sur 1 conteneur (flex) avec 3 zones :

Gauche : Logo (Site Logo).
Centre : Menu (Nav Menu).
Droite : Bouton (Button) ou icônes (recherche, compte…).

Réglages recommandés :

Conteneur principal : Width = Full, Max width = 1140/1200/1280 selon design.
Alignement vertical : center.
Padding vertical : 12–20px (évitez 40px, le header devient vite énorme sur mobile).

3) Configurer le menu WordPress correctement

Avant d’accuser Elementor, vérifiez le menu :

Apparence → Menus (ou Apparence → Éditeur de site selon thème, mais les menus classiques restent fréquents).
Créez/choisissez un menu “Principal”.
Ajoutez vos pages, catégories, liens custom.

Dans le widget Nav Menu Elementor : sélectionnez ce menu.

4) Ajouter un CTA et gérer le responsive

Sur mobile, le CTA + menu + logo ne tiennent pas. Deux approches :

Masquer le CTA sur mobile (réglages responsive Elementor).
Transformer le CTA en icône (plus propre si vous avez un module “Icon” + lien).

5) (Optionnel) Sticky header sans effet “saut”

Le sticky “au scroll” est souvent la source d’un bug pénible : le contenu “saute” parce que le header passe en fixed sans réserver sa hauteur. Je préfère une approche CSS simple quand le header est déjà sticky via Elementor.

Dans Elementor, donnez au conteneur du header une classe CSS : bpcab-header.

Dans assets/css/etb.css :

/* Header : base */
.bpcab-header {
  background: #ffffff;
}

/* Exemple : si vous utilisez l'option sticky d'Elementor,
   vous pouvez ajouter un léger shadow quand l'état sticky est actif.
   Elementor ajoute souvent des classes liées au sticky selon config,
   mais elles varient. Je cible un cas simple : shadow en permanence. */
.bpcab-header {
  box-shadow: 0 2px 18px rgba(0,0,0,0.06);
}

Résultat attendu : un header global cohérent, menu fonctionnel, rendu propre sur desktop et mobile.

1) Créer le template Footer

Templates → Theme Builder.
Onglet Footer → Add New.
Nommez : Footer – Global.

2) Structure recommandée

Un footer maintenable, c’est rarement un seul gros bloc. Je le découpe en :

Zone haute : 3–4 colonnes (liens, catégories, newsletter, contact).
Zone basse : mentions, politique de confidentialité, copyright.

3) Copyright dynamique (sans widget “magique”)

Elementor propose des widgets, mais j’ai déjà vu des sites où un widget tiers “copyright” injectait du JS inutile. Ici, on fait simple : shortcode maison.

Ajoutez ce code dans votre mini-plugin (même fichier PHP) :

add_shortcode( 'bpcab_year', function () {
	// Retourne l'année courante, échappée (même si ici le risque est faible).
	return esc_html( gmdate( 'Y' ) );
} );

add_shortcode( 'bpcab_site_name', function () {
	return esc_html( get_bloginfo( 'name' ) );
} );

Dans Elementor (footer zone basse), ajoutez un widget Shortcode avec :

Résultat attendu : un footer global, facile à modifier, sans dépendance à des addons.

Étape 4 : créer un Single Post (article) avec zones dynamiques

1) Créer le template Single

Templates → Theme Builder.
Onglet Single Post → Add New.
Nommez : Single Post – Standard.

2) Ajouter les éléments dynamiques indispensables

Dans l’éditeur :

Post Title (titre dynamique).
Post Info (date, auteur, catégories) ou widgets séparés selon votre design.
Featured Image (image mise en avant).
Post Content (le contenu réel de l’article).

Je vois régulièrement une erreur : des gens mettent un widget “Text Editor” à la place de Post Content. Résultat : le template affiche toujours le même texte sur tous les articles. Vérifiez bien que vous utilisez Post Content.

3) Ajouter une table des matières (optionnel) sans plugin lourd

Si vous avez de longs articles, vous pouvez ajouter une TOC via plugin dédié. Si vous voulez rester minimal, Elementor n’a pas besoin d’un monstre à 40 scripts. Un plugin TOC réputé peut suffire, mais testez le rendu avec votre template.

Si vous ajoutez un plugin TOC, vérifiez qu’il cible bien le contenu rendu par Post Content (et pas uniquement the_content dans certains contextes).

4) Auteur, navigation et articles liés

Widget Author Box (ou équivalent) : utile si blog “personnel”.
Widget Post Navigation : améliore la profondeur de navigation.
Widget Posts avec requête “Related” (catégories/tags) : attention à la performance si vous empilez des requêtes.

5) Largeur, typographie, cohérence

Sur WordPress 6.9.4, beaucoup de thèmes gèrent déjà des variables CSS globales. Elementor peut entrer en conflit si vous forcez des tailles partout. Mon approche :

Définir la typographie globale dans Elementor → Site Settings.
Limiter les overrides par widget, sinon vous allez “chasser” des incohérences pendant des heures.

Résultat attendu : n’importe quel article s’affiche avec le même layout, tout en restant dynamique.

Étape 5 : maîtriser les Display Conditions (et éviter les conflits)

1) Header : conditions simples et sûres

Pour Header – Global :

Include : Entire Site

Si vous avez des landing pages sans header :

Exclude : Pages → sélectionnez vos pages “Landing”

Évitez un mélange flou du type “Include: Pages” + “Include: Posts” + “Include: Archives” : ça devient ingérable.

2) Footer : même logique

Pour Footer – Global :

Include : Entire Site

3) Single Post : ciblage précis

Pour Single Post – Standard :

Include : Posts → All

Si vous avez un CPT (ex : “podcast”), ne le mélangez pas : créez un autre template “Single Podcast”.

4) Ce qui se passe quand deux templates matchent

Elementor prend le template le plus “spécifique”. Le piège : vous créez un template “Single Post” pour une catégorie particulière, puis vous oubliez qu’il existe. Trois mois plus tard, vous changez le template standard et vous pensez que “ça ne marche pas”. J’ai vu ça sur des sites éditoriaux très souvent.

Résultat attendu : un rendu déterministe. Vous pouvez expliquer pourquoi telle page utilise tel template.

Étape 6 : ajouter CSS/JS proprement (sans casser Elementor)

1) CSS global : ciblez des classes stables

Évitez de cibler des classes auto-générées par Elementor (elles changent quand vous dupliquez des sections). Préférez :

Des classes que vous définissez vous-même (ex : bpcab-header, bpcab-single).
Des sélecteurs courts, pas body.elementor-page-123 .elementor-element.elementor-element-abcd....

Exemple dans assets/css/etb.css :

/* Largeur de lecture confortable sur le template Single */
.bpcab-single .bpcab-content {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Images dans le contenu : évite les débordements */
.bpcab-single .bpcab-content img {
  max-width: 100%;
  height: auto;
}

Dans Elementor (template Single), ajoutez :

Classe sur le wrapper : bpcab-single
Classe sur la zone de contenu : bpcab-content

2) JS : chargez-le seulement si nécessaire

Le JS global est souvent inutile. Si vous en avez besoin (ex : micro-interaction), gardez-le minimal.

Exemple (fichier assets/js/etb.js) :

/* Petit script côté front.
   Gardez-le minimal et évitez de dépendre de jQuery si vous n'en avez pas besoin. */
(function () {
  'use strict';

  // Exemple : ajoute une classe au body quand on scrolle (utile pour variations de header).
  var lastKnownScrollY = 0;
  var ticking = false;

  function onScroll() {
    lastKnownScrollY = window.scrollY || 0;

    if (!ticking) {
      window.requestAnimationFrame(function () {
        document.body.classList.toggle('bpcab-scrolled', lastKnownScrollY > 10);
        ticking = false;
      });
      ticking = true;
    }
  }

  window.addEventListener('scroll', onScroll, { passive: true });
})();

Vous pouvez ensuite ajuster le header via CSS :

body.bpcab-scrolled .bpcab-header {
  box-shadow: 0 6px 22px rgba(0,0,0,0.10);
}

Résultat attendu : CSS/JS centralisés, stables, et pas de régression quand vous modifiez un template.

Le résultat complet

Si vous voulez tout copier d’un coup, voici le contenu complet du mini-plugin (fichier bpcab-elementor-theme-builder.php) avec les shortcodes + enqueue. Adaptez les versions et chemins si vous changez la structure.

<?php
/**
 * Plugin Name: BPCAB - Elementor Theme Builder Helpers
 * Description: CSS/JS et shortcodes utilitaires pour header/footer/single Elementor.
 * Version: 1.0.0
 * Requires at least: 6.9
 * Requires PHP: 8.1
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Sécurité : empêche l'accès direct.
}

/**
 * Enqueue des assets front.
 * Priorité 20 : laisse les styles du thème se charger, puis surcharge si besoin.
 */
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style(
		'bpcab-etb',
		plugins_url( 'assets/css/etb.css', __FILE__ ),
		array(),
		'1.0.0'
	);

	wp_enqueue_script(
		'bpcab-etb',
		plugins_url( 'assets/js/etb.js', __FILE__ ),
		array(),
		'1.0.0',
		true
	);
}, 20 );

/**
 * Shortcode : année courante.
 * Usage : [bpcab_year]
 */
add_shortcode( 'bpcab_year', function () {
	return esc_html( gmdate( 'Y' ) );
} );

/**
 * Shortcode : nom du site.
 * Usage : [bpcab_site_name]
 */
add_shortcode( 'bpcab_site_name', function () {
	return esc_html( get_bloginfo( 'name' ) );
} );

Personnalisations utiles

Ajoutez un shortcode téléphone ou email si vous voulez centraliser l’info de contact.
Ajoutez une option (réglage) via get_option() si vous voulez modifier ces valeurs sans toucher au code.

Adapter pour Divi 5 / Elementor / Avada

Elementor (votre cas)

Restez sur Theme Builder + conditions simples.
Centralisez CSS/JS (mini-plugin ou thème enfant).
Évitez les addons Elementor “fourre-tout” : ils ajoutent souvent des assets partout.

Divi 5 (compatibilité / cohabitation)

Divi 5 a son propre Theme Builder. Si vous activez Elementor Theme Builder en parallèle :

Choisissez un seul “maître” pour header/footer. Sinon, vous aurez des doublons.
Si vous devez cohabiter (cas migration), désactivez temporairement le header/footer Divi sur les pages test, puis basculez progressivement.

Dans la pratique, je conseille : Divi gère tout, ou Elementor gère tout. Les mélanges coûtent cher en debug.

Avada (Fusion Builder)

Avada embarque ses propres headers/layouts. Pour utiliser Elementor Theme Builder :

Vérifiez dans Avada que vous pouvez désactiver header/footer sur une page (layout/override).
Testez une page “vierge” : si Avada réinjecte un header malgré tout, vous devrez configurer Avada pour laisser Elementor gérer, ou accepter un mode “Elementor dans le contenu” uniquement.

Vérification finale

Ouvrez la home : header + footer Elementor visibles, pas de doublon.
Ouvrez un article : le template Single Post – Standard est appliqué (titre dynamique, contenu correct).
Ouvrez une page “Landing” exclue : pas de header si vous l’avez exclu.
Testez mobile : menu burger, alignements, CTA (masqué ou adapté).
Videz cache plugin + cache serveur/CDN + cache navigateur si vous utilisez un système agressif.

Mini check technique

Pas d’erreur dans Outils → Santé du site.
Pas d’erreur 500 dans les logs PHP (souvent une parenthèse oubliée dans un snippet).
Pas de CSS “cassé” parce qu’un fichier etb.css n’est pas trouvé (chemin incorrect).

Si le résultat n’est pas celui attendu

Voici les cas que je rencontre le plus souvent sur WordPress 6.9.x + Elementor récent.

1) Header/footer en double

Cause probable : le thème affiche son header + Elementor injecte le sien.
À vérifier : désactivez temporairement Elementor Pro Theme Builder (ou mettez conditions sur “None”) et voyez si le thème affiche encore un header.
Solution : utilisez un thème compatible (Hello Elementor) ou désactivez les options header/footer du thème si possible.

2) Le template Single ne s’applique pas

Cause probable : conditions d’affichage trop larges/contradictoires, ou un autre template plus spécifique prend la main.
À vérifier : dans Theme Builder, cherchez un autre Single Post (catégorie, tag, auteur…).
Solution : simplifiez : un seul template “All Posts”, puis ajoutez des variantes avec exclusions claires.

3) Modifications non visibles

Cause probable : cache (plugin, serveur, CDN) ou CSS minifié.
À vérifier : test en navigation privée + purge cache.
Solution : purge + désactivez temporairement l’optimisation CSS/JS pour valider la source du problème.

4) Erreur critique après ajout du code

Cause probable : syntaxe PHP (point-virgule manquant), fichier au mauvais endroit, PHP trop ancien.
À vérifier : logs serveur, version PHP (8.1+), et que le plugin est bien dans wp-content/plugins/.
Solution : corrigez la syntaxe, ou désactivez le plugin via FTP si vous êtes bloqué.

Tableau de diagnostic

Symptôme	Cause probable	Vérification	Solution
Header en double	Thème + Elementor affichent tous les deux	Désactiver conditions Elementor temporairement	Désactiver header du thème / changer de thème / configurer compatibilité
Single Post non appliqué	Autre template plus spécifique	Liste des templates Single dans Theme Builder	Supprimer/ajuster conditions, ajouter exclusions
CSS non pris en compte	Cache/minification	Voir si `etb.css` est chargé dans l’onglet Network	Purger caches, exclure le fichier de la minification
Menu burger ne s’ouvre pas	Conflit JS / assets non chargés	Console navigateur	Désactiver plugins d’optimisation, tester sans addons Elementor
Erreur critique après snippet	Syntaxe PHP / mauvais emplacement	Logs PHP + validation du fichier	Corriger, repasser via mini-plugin propre

Pièges et erreurs courantes

Erreur	Cause	Solution
Mettre du contenu statique dans le template Single	Widget “Text” au lieu de “Post Content”	Utiliser Post Content pour rendre l’article
Conditions d’affichage “en mille morceaux”	On empile des Includes sans stratégie	Partir sur “Entire Site” / “All Posts”, puis affiner avec exclusions
CSS ciblant des classes auto-générées	Les IDs/classes Elementor changent	Ajouter vos propres classes stables (préfixe `bpcab-`)
Code collé dans le mauvais fichier	Confusion thème enfant / plugin / snippets	Centraliser dans un mini-plugin, activer/désactiver proprement
JS/CSS “disparaît” après optimisation	Minification agressive	Exclure vos fichiers, tester sans optimisation, puis réactiver
Tester directement en production	Pas de staging	Travailler sur préprod, snapshot, puis déployer

Variante / alternative

Alternative 1 : thème bloc (FSE) + templates natifs

Si votre priorité est la légèreté et la compatibilité “core”, vous pouvez utiliser un thème bloc et construire header/footer/single avec l’éditeur de site (Full Site Editing). Sur WordPress 6.9.4, c’est une option mature pour beaucoup de sites.

Vous perdez certains widgets Elementor, mais vous gagnez :

Moins de dépendance à un plugin.
Des templates versionnés côté thème.
Une meilleure cohérence avec l’écosystème Gutenberg.

Alternative 2 : sans code mais plus “Elementor pur”

Si vous ne voulez pas de mini-plugin :

Mettez le CSS dans Elementor → Site Settings → Custom CSS (si disponible selon licence).
Gardez une convention stricte de classes (sinon vous allez vous perdre).

Je le fais parfois sur des sites très simples, mais dès qu’il y a 2-3 intervenants, le mini-plugin est plus robuste.

Conseils sécurité, performance et maintenance

Réduisez le nombre d’addons Elementor : chaque addon ajoute des scripts/styles. J’ai vu des headers charger 600 Ko de CSS pour un simple menu.
Évitez les shortcodes “non échappés” : même si ici on renvoie une année, prenez l’habitude d’échapper (XSS). Référence : Escaping (WordPress).
Chargez vos assets proprement via wp_enqueue_scripts. Référence : Including CSS & JavaScript.
Surveillez les erreurs PHP : PHP 8.1+ est plus strict sur certains points. Référence : Migration PHP 8.1.
Documentez vos conditions : un simple fichier interne “Templates actifs + conditions” évite les surprises à 6 mois.
Performance : limitez les widgets “Posts/Related” multiples sur le single. Chaque requête compte, surtout avec un cache froid.

Pour aller plus loin

Créer un header alternatif pour les pages de vente (Include: Pages X, Exclude: Entire Site sur le global).
Créer un Single Post différent par catégorie (ex : “Tutoriels” vs “News”), mais avec une stratégie stricte de priorités.
Ajouter des données structurées (schema.org) via un plugin SEO, et vérifier que le template n’empêche pas l’injection JSON-LD.
Créer un CPT “Ressources” et un template “Single Resource” dédié.
Mettre en place des tests de non-régression : au minimum une checklist + captures avant/après.

Ressources

FAQ

Faut-il forcément Elementor Pro pour header/footer/single ?

Pour le Theme Builder complet (Header, Footer, Single, Archive) : oui, dans la pratique c’est Elementor Pro qui fournit ce workflow. Sans Pro, vous pouvez faire des entêtes “dans le contenu”, mais vous perdez la gestion globale et les conditions.

Pourquoi mon header Elementor n’apparaît pas sur certaines pages ?

Presque toujours une condition d’affichage (Include/Exclude) ou un autre template plus spécifique. Vérifiez la liste complète des headers actifs et leurs conditions.

Pourquoi j’ai un header en double ?

Le thème affiche son header, Elementor injecte le sien. Corrigez côté thème (options) ou changez de thème (Hello Elementor est souvent le plus simple pour éviter ce cas).

Dois-je utiliser un thème enfant ?

Si vous ajoutez du code : oui, ou un mini-plugin. Pour un site Elementor, le mini-plugin est souvent plus propre, car vous ne dépendez pas du thème.

Où mettre mon CSS : dans Elementor ou dans un fichier ?

Pour un site pro : fichier (enqueue) ou mini-plugin, surtout si vous avez plusieurs personnes qui interviennent. Le CSS dans Elementor peut être pratique, mais il devient vite difficile à auditer.

Comment éviter que mes styles cassent après duplication d’une section Elementor ?

N’utilisez pas les classes auto-générées. Ajoutez vos propres classes (préfixées) et ciblez-les.

Pourquoi mes modifications ne se voient pas malgré “Update” ?

Cache. Purgez plugin de cache, CDN, cache navigateur. Et vérifiez que vous modifiez le bon template (ça arrive plus qu’on ne le pense).

Est-ce compatible avec un plugin de cache agressif ?

Oui, mais vous devez purger au bon moment. Si vous minifiez/concaténez CSS/JS, excluez vos fichiers si vous observez des comportements étranges (menu, sticky, etc.).

Comment gérer un header différent sur une seule page (landing) ?

Créez un second header avec condition “Include: Page X” et, sur le header global, ajoutez “Exclude: Page X”. Ne faites pas l’inverse (un global compliqué), sinon vous perdez la lisibilité.

Comment déboguer proprement un conflit Elementor / thème ?

Désactivez temporairement : (1) plugins d’optimisation, (2) addons Elementor, (3) repassez sur un thème neutre (Hello). Si le bug disparaît, réactivez un par un.