# Le constructeur de pages a cassé la mise en page du site

> Une mise en page qui se casse juste après une mise à jour d’Elementor, de Divi ou du thème n’est presque jamais un hasard : le constructeur de pages génère son propre CSS, mis en cache par page, et ce cache reste souvent périmé par rapport à la nouvelle version installée jusqu’à ce qu’il soit reconstruit.

- Source canonique : [https://allaux.fr/wordpress-woocommerce/problemes/constructeur-pages-casse-mise-en-page](https://allaux.fr/wordpress-woocommerce/problemes/constructeur-pages-casse-mise-en-page)
- Langue : FR
- Dernière mise à jour : 2026-08-03

## Réponse directe

> Régénérez d’abord le CSS produit par le constructeur : Elementor le stocke fichier par fichier sous wp-content/uploads, et un seul fichier périmé suffit à décaler toute la page. Vérifiez ensuite que l’add-on payant et le plugin gratuit sont sur la même version. Si la mise en page reste cassée, basculez temporairement sur un thème par défaut pour savoir si le thème est en cause.

## Comment je procède

1. **Identification du déclencheur** — Je vérifie ce qui a été mis à jour juste avant : le constructeur lui-même, une extension complémentaire (Elementor Pro par exemple), le thème, ou un changement de thème complet.
2. **Régénération du CSS généré** — Je vide et reconstruis le CSS généré par le constructeur, souvent stocké page par page, qui peut rester périmé après une mise à jour et entrer en conflit avec le nouveau balisage.
3. **Contrôle des versions entre add-on et cœur** — Je vérifie que la version d’un add-on payant comme Elementor Pro correspond bien à celle du plugin gratuit : un décalage entre les deux est un déclencheur fréquent juste après une mise à jour.
4. **Vérification des réglages globaux** — Je regarde si les couleurs, polices ou largeurs de conteneur définies au niveau du thème entrent en conflit avec les réglages globaux propres au constructeur, les deux cherchant à imposer les mêmes variables CSS.
5. **Correction ou reconstruction** — Selon l’ampleur, je réaligne les versions et régénère les caches, ou je reprends la mise en page d’une page trop dépendante de la structure de l’ancien thème.

## Ce que je traite régulièrement

- Une mise en page normale la veille, décalée ou superposée après une mise à jour du constructeur
- Des sections ou des colonnes qui s’empilent n’importe comment sur certaines pages seulement
- Du texte de shortcode brut affiché à l’écran au lieu du contenu attendu, après un changement de thème
- Des couleurs ou des polices qui ne correspondent plus à ce qui était réglé dans le constructeur
- Le problème disparaît en reconstruisant une page à la main, mais revient sur les autres

## Pourquoi une mise à jour casse la mise en page

Les constructeurs de pages comme Elementor ou Divi génèrent leur propre feuille de style, souvent mise en cache page par page ou article par article. Après une mise à jour du constructeur ou du thème, ce CSS généré peut rester périmé et entrer en décalage visuel avec le nouveau balisage, jusqu’à ce qu’il soit régénéré.

Un décalage de version entre un add-on payant, comme Elementor Pro, et le plugin gratuit correspondant est un déclencheur très courant juste après une mise à jour : les deux doivent être mis à jour ensemble, jamais séparément.

Les réglages globaux (couleurs, polices, largeurs de conteneur) définis au niveau du thème peuvent entrer en conflit avec les réglages globaux propres au constructeur, si les deux cherchent à imposer les mêmes variables CSS. Enfin, un changement de thème sans vérification de compatibilité laisse des shortcodes ou des blocs orphelins dans le contenu, que le nouveau thème ne sait pas interpréter : du texte brut ou des espacements cassés apparaissent alors à la place de la mise en page attendue.

## Vider un cache CSS, ou reconstruire une page

> Vider et régénérer le CSS du constructeur, réaligner les versions d’un add-on avec le cœur, se règle rapidement. Une page construite d’une manière qui dépend de la structure d’un thème précis demande une vraie reconstruction, pas un simple vidage de cache.

## Autres sujets liés

- **Site WooCommerce lent** — Un constructeur de pages mal optimisé pèse aussi souvent sur la vitesse de chargement, pas seulement sur l’affichage. ([/wordpress-woocommerce/site-lent](/wordpress-woocommerce/site-lent))
- **Contrat de maintenance** — Vérifier la compatibilité des mises à jour avant de les appliquer en production évite ce type de casse. ([/services/maintenance](/services/maintenance))
- **Toutes les interventions WooCommerce** — Les autres pannes et évolutions que je traite sur WooCommerce. ([/wordpress-woocommerce](/wordpress-woocommerce))

## FAQ

### Pourquoi seulement certaines pages sont cassées, pas toutes ?

Parce que le CSS généré par le constructeur est souvent mis en cache page par page. Une page reconstruite manuellement régénère son cache ; les autres restent sur une version périmée jusqu’à intervention.

### Faut-il mettre à jour Elementor Pro et Elementor en même temps ?

Oui, un add-on premium et le plugin gratuit correspondant doivent rester sur des versions compatibles entre elles. Un décalage entre les deux est l’un des déclencheurs les plus fréquents juste après une mise à jour.

### Je peux vider le cache moi-même ?

Vider et régénérer le CSS du constructeur, ou réaligner deux numéros de version, est accessible à un généraliste. Reconstruire une page dont la structure dépend d’un thème précis relève du développement.

### Comment éviter que ça se reproduise à chaque mise à jour ?

Je peux tester les mises à jour du constructeur et du thème sur un environnement de préproduction avant de les appliquer sur le site en production.