If you are trying to use the Divi Builder and you get a popup with a “Divi builder timeout warning – Oop, it looks like the Divi Builder failed to load.” you will need to troubleshoot with these 3 fixes below to get your Divi builder working again. These can help when your Divi layouts are getting stuck on 1% or not fully loading too so make sure all your settings are correct to avoid issues when using the Divi Builder.
The Divi builder timeout warning popup
If you get the Divi builder timeout warning like in the screenshot above that asks you to reload the builder, there are 3 main changes you can make to your hosting settings. Any of the 3 fixes listed below could fix your Divi Builder timeout (and any other Divi errors you may have). These setting changes do require you to be a little familiar with your hosting account settings, so If you are not sure how the changes should be implemented then you can contact your hosting providers’ tech support for assistance.
The update to Divi version 3.20 ( updated on March 7th, 2019 ) adds a new Support Center which has a system status area that shows what settings you currently have along with the recommended settings for Divi. If your settings are not correct there will be a red warning icon to let you know changes need to be made. Along with giving you the status of your PHP settings, the System Status area will also allow you to enable Safe Mode to check if your Divi Builder Timeout issues are being caused by conflicts with a 3rd party plugin.
Any red warning icons in the System Status of your site mean your server settings need updating. Follow the 3 steps below to solve your timeout errors in Divi.
1. Update your hosting PHP version to 7.2+
The PHP version recommended by Elegant Themes for use with any Divi website is version 7.2 or higher, which will give you the best Divi experience (and fix any Divi builder timeout errors you may have).
To change your PHP version in cPanel you will need to navigate to your PHP Version Manager. and select the version from the options listed.
2. Increase your hosting PHP variables limits
To change your PHP variables limits in cPanel you will need to navigate to your PHP Variables Manager, select which folders to edit and then change all associated PHP variables (as shown in the image above).
The recommended PHP variables settings from Elegant Themes for use on a Divi website are as follows;
- memory_limit – 128M or higher
- post_max_size – 64M or higher
- max_execution_time – 180 or higher
- upload_max_filesize – 64M or higher
- max_input_time – 180 or higher
- max_input_vars – 3000 or higher
3. Increase your hosting servers Apache limits
To increase your Apache limits, and to stop the Divi builder hitting server limits, you will need to add the following lines of code into your .htaccess file, which you can find in your WordPress root directory.
General troubleshooting steps to fix Divi errors
There are a few steps you can take before you update any of your server settings that may help fix any errors you are seeing when using the Divi builder. These are quick and easy fixes that may be worth a try.
1. Update Divi to the latest version
Updates to Divi often include bug fixes that have been discovered since previous updates so it is worth updating Divi to the latest version. You will also get the benefit of access to new features that are released along with any bug fixes. You can see all of the Divi updates in the Divi Changelog on Divi Theme Examples.
2. Clear plugin/browser/CDN caches
Caches of outdated theme or plugin files can cause issues so it is always a good idea to clear all of the caches associated with your site so you know you are using the latest files. You will need to clear any plugin caches (such as purging WP Supercache etc), your CDN (such as purging Cloudflare cache or activating developer mode) and then clear your cache in the browser (such as Chrome).
3. Clear local storage cache with Chrome Dev Tools
Local storage caches will need to be cleared separately from the general browser caches. For Chrome you can follow the steps below;
1. When on the page with the issue open Chrome Developer Tools (f12)
2. Select the Application tab > Clear storage > Click Clear site data button at the bottom (*this will log you out of your site)
3. Log back into the site and cross your fingers!
Did you get the timeout error yet?
Which solution worked for you? Let us know which solutions worked for you in the comments below.