Using Divi with WordPress 5.0 and Higher


Using Divi with WordPress 5.0 and Higher

With WordPress 5.0, the editing experience has been overhauled, now using blocks of content that can be rearranged as needed. To read about how to use this editor as is, check out our guide on the Gutenberg editor here. If you’re using a Divi theme, however, and are not used to using the Visual Builder, this post will explain what to do!

The Problem

After upgrading to WordPress 5.0, if you have not made any changes to Divi settings, you will be given a page that looks similar to this when attempting to edit a page:

A Divi-built page after upgrading to WordPress 5.0

Clicking on the “Edit with The Divi Builder” button will open the Visual Editor, which allows you to move content around on the page visually; Divi has had this option available for a while, and you may be familiar with it. If so, you do not need to make any changes—the visual editor works just as it always has. However, if you are used to being able to edit Divi pages from this screen, you will have to make some changes in the Divi settings.

The Solution

To fix this, navigate to Divi > Theme Options in the bottom right of the WordPress dashboard. This will take you to the Divi Options page. From here, click the purple Builder tab at the top, and then the Advanced sub-tab directly under it. There are two options here that need to be turned on: “Enable the Latest Divi Experience” and “Enable Classic Editor.” Once these are switched on, save the settings, and go back to editing the page. You should now see a screen that looks similar to this:

The page editor after enabling the classic Divi Editor

Note that this page has a significant amount of content already on it. If you are editing an existing page, it may look similar. However, if you are creating a new page, it will not contain all of the items that this page does.