« Mon style ne s’applique pas, pourtant je l’ai bien mis dans le panneau » : c’est la phrase la plus fréquente que nous entendons de la part de clients qui découvrent Elementor. Neuf fois sur dix, la réponse tient en un bouton : Regenerate CSS. Mais avant de le cliquer par réflexe, mieux vaut comprendre ce qu’Elementor fait réellement avec vos styles.
Contrairement à un thème classique qui charge une unique feuille style.css, Elementor génère un fichier CSS distinct pour chaque contenu que vous éditez. Ce choix a des conséquences directes sur la performance, la mise en cache et le comportement que vous observez quand quelque chose « ne se met pas à jour ».
Où vit le CSS d’une page Elementor
Par défaut, Elementor écrit un fichier physique par contenu édité, nommé post-{ID}.css, dans wp-content/uploads/elementor/css/. Ce fichier ne contient que les styles réellement utilisés sur cette page précise : les couleurs, marges, typographies et effets définis dans l’éditeur pour ce contenu, plus les règles issues des Global Colors et Global Fonts référencées.
post-12.csspour la page d’accueil (ID 12).post-45.csspour un article de blog.- Un fichier global pour les styles du Site Settings partagés entre tous les contenus.
Ce fichier est ensuite enregistré comme une feuille de style classique via wp_enqueue_style(), avec un numéro de version dérivé d’un hash. Tant que le contenu n’est pas republié, ce hash ne change pas, et le navigateur comme les caches serveur continuent de servir l’ancien fichier.
Le mode Interne vs le mode Fichier externe
Dans Elementor > Réglages > Avancé, l’option CSS Print Method propose deux comportements :
| Mode | Comportement | Quand l’utiliser |
|---|---|---|
| Fichier externe | Écrit un fichier .css physique, mis en cache par le navigateur | Par défaut, recommandé en production |
| Interne (Embedding) | Injecte le CSS directement dans le <head> de la page | Débogage ponctuel, environnements sans écriture disque possible |
Le mode Interne est pratique pour vérifier rapidement qu’un style s’applique bien sans se soucier d’un cache disque, mais il alourdit chaque requête HTML et n’est pas mis en cache par le navigateur de la même façon. Il ne doit rester qu’un outil de diagnostic temporaire.
Que fait vraiment Regenerate CSS ?
Le bouton Outils > Régénérer les fichiers CSS & Données ne recalcule rien d’intelligent : il supprime purement et simplement tous les fichiers présents dans uploads/elementor/css/, ainsi que les métadonnées de cache associées à chaque post. Au prochain affichage de chaque page côté public, Elementor régénère le fichier à la volée, une seule fois, puis le remet en cache.
- Utile après une modification des Site Settings qui ne semble pas se propager.
- Utile après une migration ou un import de kit, quand les chemins d’upload ont changé.
- Inutile, voire nuisible en boucle, sur un site à fort trafic : la première requête après régénération est plus lente le temps que le fichier soit réécrit.
Sync Library : un bouton souvent confondu
Juste à côté, dans Outils > Général, se trouve Synchroniser la bibliothèque. Beaucoup de développeurs pensent qu’il régénère aussi le CSS : ce n’est pas le cas. Ce bouton recharge la liste des modèles disponibles depuis la Bibliothèque Elementor (templates par défaut, blocs, pages) et met à jour le cache local des catégories et vignettes affichées dans le panneau d’insertion de templates.
Sur nos projets, nous recommandons de ne toucher à Sync Library qu’en cas de bibliothèque de templates qui semble figée ou incomplète dans l’éditeur — jamais comme réflexe de dépannage CSS, où il n’a strictement aucun effet.
Comportement en cas de cache tiers
Un plugin de cache de pages (WP Rocket, W3 Total Cache…) ou un CDN peut continuer à servir l’ancien fichier CSS même après une régénération côté Elementor, puisque celle-ci ne vide pas ces caches externes. Il faut alors purger le cache de la page dans l’outil concerné après toute régénération CSS, sans quoi le correctif reste invisible pour le visiteur alors qu’il est déjà en place côté serveur.
En résumé
Elementor sépare volontairement son CSS par contenu pour éviter de charger des styles inutiles sur chaque page. Regenerate CSS vide ce cache de fichiers et force une réécriture, ce qui règle la grande majorité des soucis de style « qui ne s’applique pas ». Sync Library, lui, n’a rien à voir avec le style : il ne fait que rafraîchir la liste des templates disponibles. Confondre les deux fait perdre un temps précieux en debug — gardez cette distinction en tête avant de cliquer au hasard.
