« Le style ne s’applique pas. » C’est la remontée reçue après l’import d’un Kit Elementor sur un projet déjà avancé, précisément sur une grille de produits construite avec un Container en mode Grid. Les couleurs et espacements du Kit fraîchement importé s’appliquaient partout, sauf sur ce widget précis, comme si une règle invisible bloquait l’héritage attendu.
L’import d’un Kit Elementor (Site Settings > importer un Kit) remplace les styles globaux (couleurs, typographies, valeurs par défaut des Containers) définis au niveau du site, mais ne touche pas aux styles appliqués individuellement à un widget ou un Container déjà présent dans une page existante. C’est cette distinction, souvent mal comprise, qui explique le comportement observé ici.
Reproduire le symptôme précisément
Sur la page de catalogue, le Container Grid affichait ses cartes produit avec les anciennes couleurs de fond, alors que le reste de la page (en-tête, pied de page, boutons du panier) affichait bien les nouvelles couleurs du Kit importé. L’inspection du CSS généré, via les outils de développement du navigateur, a révélé deux règles en concurrence sur la même propriété background-color.
La cause : une spécificité CSS plus forte sur l’ancien style
Le Container Grid avait été stylé, avant l’import du Kit, avec une couleur de fond appliquée directement sur son identifiant Elementor unique (.elementor-element-a1b2c3d), une classe très spécifique en CSS. Les styles globaux importés par le Kit, eux, s’appliquent via des classes plus générales (.e-con combinée à une variable de couleur globale), moins spécifiques dans le calcul de priorité CSS du navigateur.
/* Ancien style, spécifique au widget, non touché par l'import du Kit */
.elementor-element-a1b2c3d {
background-color: #f4f4f4;
}
/* Style global importé par le Kit, moins spécifique */
.e-con {
background-color: var(--e-global-color-secondary);
}
En CSS, une règle ciblant un identifiant spécifique l’emporte toujours sur une règle plus générale, indépendamment de l’ordre d’apparition dans la feuille de style. C’est exactement ce qui se produisait ici : le Kit avait bien changé la variable globale, mais l’ancien style local continuait de s’appliquer par priorité.
Le correctif appliqué
Deux options existaient : réécrire manuellement le style local du Container Grid pour qu’il pointe vers la nouvelle variable de couleur globale, ou supprimer purement le style local pour laisser hériter naturellement du style global du Kit. La seconde option a été retenue, plus propre à long terme, en repassant le contrôle de couleur du Container sur « Global » dans le panneau de style de l’éditeur plutôt que sur une couleur personnalisée figée.
Étapes suivies pour corriger
- Sélectionner le Container Grid dans l’éditeur Elementor
- Ouvrir l’onglet Style, section Arrière-plan
- Repasser le sélecteur de couleur sur l’onglet Global plutôt que Personnalisé
- Choisir la couleur globale correspondante fraîchement importée par le Kit
- Régénérer les fichiers CSS via Elementor > Outils > Régénérer les fichiers CSS
Repérer ce genre de conflit avant qu’il ne se reproduise
Après ce cas, une règle de projet a été ajoutée : tout style de couleur ou de typographie appliqué manuellement sur un widget doit être justifié par un commentaire dans la documentation du projet, sinon il doit pointer vers une valeur globale du Kit. Cette discipline évite qu’un futur import de Kit ne se heurte au même type de silence apparent.
- Préférer systématiquement les couleurs et polices globales aux valeurs personnalisées figées
- Vérifier après chaque import de Kit les widgets ayant reçu un style manuel antérieur
- Régénérer les fichiers CSS après tout changement de Kit pour éviter un cache de style obsolète
Cet article ne couvre ni le processus d’export d’un Kit ni la migration complète d’un site vers un nouveau thème, deux sujets adjacents mais distincts de ce cas de conflit de priorité CSS.
Un Kit qui « ne s’applique pas » n’est presque jamais un bug d’Elementor : c’est le plus souvent un style local oublié, qui continue de gagner la bataille de spécificité CSS.
En résumé
Ce cas rappelle une règle simple mais souvent négligée sur les projets Elementor de longue durée : un style appliqué localement à un widget résiste à tout import de Kit, par construction du CSS. La solution durable consiste à limiter les styles personnalisés au strict nécessaire et à privilégier systématiquement les références globales du Kit.
