Skip to Main Content

Gutenberg and the new experience with Divi Builder

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

The season for change is upon us. The recent arrival of WordPress 5.0 introduces a brand new block editor (aka Gutenberg). And the release of our new Divi Builder experience not only offered a smooth integration with Gutenberg, but it also upgraded the entire website design experience with Divi.

These new changes will no doubt cause concern and confusion about how Divi and Gutenberg are working together and how best to use Divi with all of these changes. This guide aims to mitigate the adverse effects of the change by explaining the options available and the steps necessary for the new Divi Builder experience to be successfully operational on WordPress 5.0.

For those of you who aren't ready for Gutenberg or the new Divi Builder experience, don't worry. we will talk about the options available to allow you to continue working as usual. And for those who are ready to go on an adventure into the unknown, this guide will help you find your way.

Here's what we'll cover in this tutorial:

  • The importance of installing the latest version of Divi when upgrading to WordPress 5.0
  • How does the new Divi constructor work with default Gutenberg
  • How to activate the new Divi Builder on the backend with WordPress 5.0 (preferred method)
  • Editing a new page with the new Divi Backend Builder user interface
  • Using Classic Divi Builder with New Divi

The importance of installing the latest version of Divi when upgrading to WordPress 5.0

The latest version of Divi is compatible with WordPress 5.0. Therefore, if you are upgrading to WordPress 5.0, be sure to update Divi to version 3.18+ as well. This new version fixes many compatibility issues with the new Gutenberg block editor. If you are keeping an older version of Divi, you will have difficulty accessing Divi Builder and other page settings before the upgrade.

The latest versions of Extra, Bloom, Monarch and the Divi Builder plug-in are also compatible with WordPress 5.0. So it is better to update them also when upgrading.

How does the new Divi constructor work with default Gutenberg

Once you have updated WordPress 5.0 and installed Divi 3.18 (latest version), you are ready to start building your website. If you add a new page, a pop-up window allowing you to use Divi Builder or the default WordPress editor (now Gutenberg) is offered to you. Simply click on “Use Divi Builder”.

use divi builder.jpg

You will notice that you will be directly launched in Visual Builder.

divi builder choose an option.png

If you exit Visual Builder and edit the page on the backend, you will see that there is no Classic Divi Builder available. You will only be able to launch Divi Builder in front-end mode.

no classic editor only the front editor.jpg

Indeed, WordPress 5.0 has removed the classic editor and replaced it with the block editor (Gutenberg). Therefore, all connected apps including Classic Divi Builder have been deleted. In short, there is no Classic Divi Builder without the classic WordPress editor.

How to activate the new Divi Builder on the backend with WordPress 5.0 (preferred method)

A few clicks are enough to access the new Divi Builder on the server. From your WordPress dashboard, go to Divi> Theme options. Once there, click on the tab Creator. Under the generator options, click on the Advanced tab. There you will find the options to activate the latest Divi Builder experience and activate the classic editor (WordPress). You will need to enable both options to enjoy the new Divi Builder on the backend . Then click on Save changes.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

interface divi.jpg

Note: the option to activate the classic editor in the Divi theme options replaces the use of the editing plugin training provided by WordPress contributors to people who are not ready to use Gutenberg.

Once you have activated the latest version of Divi Builder and the classic editor from the theme options, you are ready to start building your pages with the New Divi Builder experience.

Editing a new page with the new Divi Backend Builder user interface

With the new Divi Builder activated on WordPress Classic Editor, you will see the well-known “Use the Divi Builder” button. Click on this button as usual to deploy Divi Builder.

editor divi builder.jpg

Then select how you want to start designing your page from the three options that appear.

selection mode divi builder.png

You are now ready to make full use of the new Divi Builder experience. You will notice that the new Divi Backend Builder is similar to the classic Divi Builder with some powerful new features at your fingertips.

Here are some notable features of the Page Editor UI that will help you understand the new experience a bit better.

divi builder interface dashboard wordpress.jpg

The button "Build on the front"

<

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

p style = "text-align: justify">construction divi builder.png
The “Build in Foreground” button has replaced the traditional “Use Visual Builder” button, but the functionality is the same. It will deploy Divi Builder on the facade for a complete visual experience of the building as before. The main reason for the wording of this button is that there is no longer a separate visual builder. There is only one Divi Builder that we now have access to on the backend and the front end.

The view modes now available on the backend

<

p style = "text-align: justify">modes available on the backend divi builder.png
The new Divi Builder editor has introduced the Visual Builder and all its features in the backend. Now you don't have to travel to edit your page anymore. To enable the visual generator experience on the backend, you can switch between the different display modes located at the top of the generator. By default, the wireframe display mode is active, which makes sense as it closely matches the look of the classic backend builder we're used to seeing. However, you can switch between the different view modes (desktop, tablet and smartphone) in order to see your page visually (like with Visual Builder) on the back end without having to leave the page.

editor visual builder dashboard.gif

The new Divi Builder user interface

<

p style = "text-align: justify">new interface divi builder.png
In addition to the ability to switch between different display modes on the backend, the Divi Builder user interface works seamlessly on the backend while editing your page.

For example, when changing an item's settings on the backend, the modal settings can be moved to any location in the browser window, giving you the space you need to change the backend while still visualizing your modifications in real time.

real-time editing divi builder.gif

Return to Classic Divi Builder

return to the editor visual divi builder.png

If you are not quite ready for the new Divi Builder experience, you can still use Classic Divi Builder as before. The latest version of Divi has incorporated an extremely easy way to deploy Classic Divi Builder which can be found at the very bottom of the Divi Builder user interface in the dashboard when editing your page. You will see a link there that will allow you to return to Classic Divi Builder with a single click.

Note: You can also switch to Classic Divi Builder under Theme options. Click the Generator tab, then click the Advanced Options tab. There you can find the option to activate or deactivate the latest Divi Builder experience. Simply deactivate this option to keep Classic Divi Builder as before. But remember, to see Classic Divi Builder on the backend, you need to make sure that the Classic Editor option is also enabled.

disable the new editor divi.jpg

The new features of Divi Builder

<

p style = "text-align: justify">new feature divi builder.jpg
The new Divi Backend Builder also includes all of the powerful new features that were previously only available on Visual Builder. And if that's not enough, you also get brand new improvements in performance and usability with this new Divi Builder. These upgrades include:

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

  • A faster build experience than ever with the use of cache memory
  • 100% accurate representation of your page in all view modes using React Portal
  • The ability to copy and paste between pages in Visual Builder exactly as you can in Classic Builder.

Using Classic Divi Builder with New Divi

As mentioned above, you can use Classic Divi Builder using the link provided in the new Divi Backend Builder page editor or by disabling the latest version of Divi Builder in the theme options.

Once you make the change, the background page editor will look almost exactly the same as before, with a few minor changes. You will notice that the old "Use Visual Builder" button now says "Build on Server", but the function is still the same as before. You will also have the option of switching to the new Divi Builder by clicking on a link located at the bottom of Divi Builder in the backend.

classic editor divi builder.jpg

Keep in mind that Classic Divi Builder will always miss all the new features now available on the backend in New Divi Builder.

Latest Thoughts

Launching Gutenberg alone is a bit overwhelming for the most part. The WordPress page editor we all know is completely different! But, luckily, the release of the new Divi Builder integrates seamlessly with Gutenberg, so you can keep the familiar user interface you love now. And with all the powerful features now available on the backend, Divi Builder is faster and more reliable than ever.

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
6 shares
Share6
tweet
Save