# The page builder broke the site layout

> A layout that breaks right after an Elementor, Divi or theme update is almost never a coincidence: the page builder generates its own CSS, cached per page, and that cache often stays stale against the newly installed version until it’s regenerated.

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

## Direct answer

> Regenerate the CSS the builder produces first: Elementor stores it file by file under wp-content/uploads, and one stale file is enough to shift a whole page. Then check that the paid add-on and the free plugin are on matching versions. If the layout is still broken, switch temporarily to a default theme to find out whether the theme is at fault.

## How I go about it

1. **Identifying the trigger** — I check what was updated right before: the builder itself, an add-on (Elementor Pro for instance), the theme, or a full theme switch.
2. **Regenerating the generated CSS** — I clear and rebuild the builder’s generated CSS, often stored per page, which can stay stale after an update and clash with the new markup.
3. **Checking versions between add-on and core** — I check that a paid add-on’s version, like Elementor Pro, matches the free plugin’s: a mismatch between the two is a common trigger right after an update.
4. **Checking global settings** — I check whether colours, fonts or container widths defined at theme level clash with the builder’s own global settings, both trying to own the same CSS variables.
5. **Fixing or rebuilding** — Depending on the scale, I realign versions and regenerate caches, or rebuild a page that’s too dependent on the old theme’s structure.

## What I handle regularly

- A layout that was fine the day before, now shifted or overlapping after a builder update
- Sections or columns stacking randomly, only on some pages
- Raw shortcode text showing on screen instead of the expected content, after a theme switch
- Colours or fonts no longer matching what was set in the builder
- The issue disappears when rebuilding a page by hand, but comes back on the others

## Why an update breaks the layout

Page builders like Elementor or Divi generate their own stylesheet, often cached per page or per post. After a builder or theme update, that generated CSS can stay stale and visually clash with the new markup until it’s regenerated.

A version mismatch between a paid add-on, such as Elementor Pro, and the corresponding free plugin is a very common trigger right after an update: the two need updating together, never separately.

Global settings (colours, fonts, container widths) defined at theme level can clash with the builder’s own global settings if both try to own the same CSS variables. Finally, switching themes without checking compatibility leaves orphaned shortcodes or blocks in the content that the new theme doesn’t know how to render: raw text or broken spacing shows up instead of the expected layout.

## Clearing a CSS cache, or rebuilding a page

> Clearing and regenerating the builder’s CSS, realigning an add-on’s version with core, is quick to fix. A page built in a way that depends on a specific theme’s structure needs proper rebuilding, not just a cache clear.

## Related pages

- **Slow WooCommerce site** — A poorly optimised page builder often weighs on load speed too, not just on display. ([/wordpress-woocommerce/site-lent](/wordpress-woocommerce/site-lent))
- **Maintenance contract** — Checking update compatibility before applying it to production prevents this kind of breakage. ([/services/maintenance](/services/maintenance))
- **All WooCommerce work I handle** — Other faults and features I handle on WooCommerce. ([/wordpress-woocommerce](/wordpress-woocommerce))

## FAQ

### Why are only some pages broken, not all of them?

Because the builder’s generated CSS is often cached per page. A manually rebuilt page regenerates its cache; the others stay on a stale version until fixed.

### Do I need to update Elementor Pro and Elementor at the same time?

Yes, a premium add-on and its corresponding free plugin need to stay on compatible versions. A mismatch between the two is one of the most common triggers right after an update.

### Can I clear the cache myself?

Clearing and regenerating the builder’s CSS, or realigning two version numbers, is within reach of a generalist. Rebuilding a page whose structure depends on a specific theme is development work.

### How do I stop this happening on every update?

I can test builder and theme updates on a staging environment before applying them to the production site.