Skip to main content

Have questions? I can help!

< All Topics
Print
Table of Contents

Why doesn't my site look like the demo?

1. Double-Check the Import Steps

Because Divi 5 uses a decoupled design system, layouts rely heavily on global settings to render correctly. If your colors are completely off, fonts are default, or buttons look plain, a step might have been missed.

  • Did you import the Global Settings (Variables & Preset) first? If you import a page layout or a module preset before importing your variables file, the modules won't know which global colors, padding scales, or typography settings to pull from. Go back to the Variable Manager, import that file first, and then re-import your presets. Repeat the process for the Preset Manager.

  • Did you import the Theme Builder templates? If your home page looks fine but your headers, footers, blog posts, 404 page, or search results are totally blank or default, you missed the Theme Builder import. Page layouts only affect the main content body. To get the global structures, navigate to Divi > Theme Builder, click the Portability icon (?) in the top right, and import the Theme Builder .json file containing your global header, footer, blog, 404, and search page assignments.

  • Did you remember to click Save? Unlike older versions of Divi, importing a design variable or preset inside the Divi 5 workspace updates the local panel immediately, but it won't apply site-wide until you click the main Save button in the builder interface.

2. Clear Your Caches (The Most Common Culprit)

If you are 100% certain you imported everything in the right order, your browser or server is likely holding onto an old version of your style sheets.

Step A: Clear Divi's Internal Generation Cache

Divi creates static CSS files to make your site load faster. Sometimes it holds onto old styles during an import.

  1. Navigate to Divi
  2. Click Theme Options .
  3. Click Clear CSS Cache
WordPress dashboard showing Divi Theme Options with various settings toggled, and an arrow pointing to the "Clear CSS Cache" button on the top right of the screen.

Step B: Clear Your WordPress Plugin & Server Cache

If you use a caching plugin (like WP Rocket, LiteSpeed Cache, or SiteGround Optimizer), the old version of your site is still being served to visitors.

  1. Click the Purge All / Clear Cache button at the top toolbar of your WordPress dashboard.
  2. If your hosting provider has a built-in server cache (e.g., Flywheel, Bluehost, Kinsta), clear the cache from your hosting panel as well.

3. Check for Plugin Conflicts

If parts of the layout are still overlapping or broken, a third-party optimisation or script-minification plugin might be interfering with Divi 5’s new architecture.

Try temporarily disabling any optimisation plugins to see if the layout pops back into place. If it does, you may just need to exclude Divi's files from minification.

Fixing a Broken Blog Page (Disconnect WordPress Defaults)

If your blog page is completely ignoring your imported design layout and just showing a generic, plain list of standard WordPress posts, WordPress is fighting with Divi over who controls that page.

To fix it, you need to tell WordPress to let go of the page layout control:

  1. Go to your WordPress Dashboard and navigate to Settings > Reading.
  2. Look for the Posts page dropdown setting.
  3. If your blog page is selected there, click the dropdown and change it back to — Select — (blank/deselect it).
  4. Click Save Changes. This forces WordPress to stop applying its basic default blog archive styling, allowing your beautiful Divi layout and Theme Builder templates to take over perfectly!
WordPress dashboard showing Divi Theme Options with various settings toggled, and an arrow pointing to the "Clear CSS Cache" button on the top right of the screen.