Elegant Themes

Encountering the "Divi Builder Could Not Be Displayed" error can be frustrating, as it prevents you from editing and customizing your website. This issue can arise from various factors, including plugin conflicts, server issues, or incorrect settings. 

In this article, we will guide you through the process of diagnosing and fixing the "Divi Builder Could Not Be Displayed" error.

The Could Not Be Displayed error is usually caused by two possible reasons:

<a href="#plugins-conflict">Plugin(s) conflict</a>

<a href="#h_fe0aa0352f">Broken Layout</a>

<a href="#h_ac323afbb9">Other server issues</a>

1. <a href="#plugins-conflict">Plugin(s) conflict</a>
2. <a href="#h_fe0aa0352f">Broken Layout</a>
3. <a href="#h_ac323afbb9">Other server issues</a>

Some of the cache plugins could optimize JS files incorrectly. This can lead to JS file errors, affecting the Visual Builder's functionality.

Shortcodes in third-party plugins could also have incorrect HTML markup, which may affect the HTML markup of the Visual Builder.

To check if any of the third-party plugins causes the issue, follow these steps:

Go to WordPress Dashboard → Plugins → Add New Plugin

Install and Activate the <a href="https://wordpress.org/plugins/health-check/" rel="nofollow noopener noreferrer" target="_blank">Health Check &amp; Troubleshooting</a> plugin

Go to Tool → Site Health → Troubleshooting

Click on the Enable Troubleshooting Mode button

1. Resolved
 1. Go to WordPress Dashboard → Plugins 
 2. For each previously active plugin, click on the Enable while Troubleshooting link. 
 3. After each plugin is enabled, check if the issue is resolved
 4. Repeat those steps for each previously active plugin
2. Not Resolved
 1. Go to WordPress Dashboard → Divi → Support Center
 2. Enable the Safe mode
 3. Check if the issue is resolved

1. Go to WordPress Dashboard → Plugins → Add New Plugin
2. Install and Activate the <a href="https://wordpress.org/plugins/health-check/" rel="nofollow noopener noreferrer" target="_blank">Health Check &amp; Troubleshooting</a> plugin
3. Go to Tool → Site Health → Troubleshooting
4. Click on the Enable Troubleshooting Mode button
5. Check if the issue is resolved
6. If the issue is
 1. Resolved
 1. Go to WordPress Dashboard → Plugins 
 2. For each previously active plugin, click on the Enable while Troubleshooting link. 
 3. After each plugin is enabled, check if the issue is resolved
 4. Repeat those steps for each previously active plugin
 2. Not Resolved
 1. Go to WordPress Dashboard → Divi → Support Center
 2. Enable the Safe mode
 3. Check if the issue is resolved

Incorrect HTML markup could break the entire page's HTML markup. Unfortunately, WordPress doesn't automatically fix incorrect HTML markup, and a broken layout may be causing this error. &nbsp;

The <a href="https://www.elegantthemes.com/documentation/divi/divi-library/" rel="nofollow noopener noreferrer" target="_blank">Divi Library</a> feature can help you find the broken part of the layout.

Remove each module and section from the layout, one by one, to find the broken one.

1. Save the page layout to the Divi Library
2. Load it on another page. 
3. Remove each module and section from the layout, one by one, to find the broken one.

Note: Restoring the page's previous <a href="https://wordpress.org/documentation/article/revisions/" rel="nofollow noopener noreferrer" target="_blank">revisions</a> could help if the layout was not broken from the beginning.

Sometimes, server-related errors might also prevent the Visual Builder from loading or working correctly. 

The first step would be to enable the WordPress debug mode. Please check the article on enabling <a href="https://help.elegantthemes.com/en/articles/8548251">WordPress Debug Mode</a> for more information.

Learn how to identify and resolve conflicts, adjust server settings, and ensure your Divi Builder functions correctly.

Plugin(s) Conflict

Broken Layout

Other server-related issues