Issue

A page built with Beaver Builder appears correct when viewed in the Beaver Builder editor; however, when viewing the page on the live website, the layout appears broken, distorted, or missing styling.

Common symptoms include:

• Sections appearing in the wrong location
• Missing fonts, colours, or spacing
• Images not displaying correctly
• Elements overlapping each other
• The live page looking different from the Beaver Builder editor

Cause

This issue is commonly caused by outdated cached CSS files.

Beaver Builder generates CSS files for page layouts. In some cases, the website may continue serving an older cached version of these files, causing the live website to display differently than the editor.

Caching plugins, server-side caching, or browser caching may also contribute to the issue.

Resolution

1. Log in to your  account
2. Click Products
3. Click Hosting

Beside your  Hosting package, click Control Panel

Login to wordpress

Locate the caching plugin in the top WordPress admin toolbar. For example, if the website uses WP Rocket, click WP Rocket and select Clear and Preload Cache. If a different caching plugin is installed, use its cache-clearing option instead.

Click on Clear and Preload Cache 

After clearing the WP rocket cache , click on Pages on the left panel.  Scroll down and locate Home page,then hoover over it , and click  Beaver Builder 

Click Done 

Click Publish , this should resolve the home page not loading correctly