gutenberg and new experience on divi

Gutenberg and new experience divi: 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 and new experience divi but 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 negative effects of the change by explaining the options available and the steps necessary for the new Divi Builder experience to be successfully operational on Gutenberg and new experience divi.

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.

gutenberg and new experience on divi

The importance of installing the latest version of Divi when upgrading to Gutenberg and new experience divi

The latest version of Divi is compatible with Gutenberg and new experience divi. Therefore, if you are upgrading to Gutenberg and new experience divi, 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 plugin are also compatible with Gutenberg and new experience divi. So it is better to update them also when upgrading.

How the new Divi builder works with Gutenberg by default

Once you’ve updated Gutenberg and new experience divi and installed Divi 3.18 (the latest version), you’re 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”.

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

If you quit 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.

Indeed, Gutenberg and new experience divi have removed the classic editor and replaced it with the block editor (Gutenberg). As a result, 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 Gutenberg and new experience divi (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 Creator tab. Under the generator options, click the Advanced tab. There you will find the options to activate the latest Divi Builder experience and to activate the classic editor (WordPress). You will need to activate these two options to take advantage of the new Divi Builder on the backend. Then click Save changes.

Note: the option to activate the classic editor in Divi’s theme options replaces the use of the classic editing plugin 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.

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

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 a few 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.

The “Build on the forehead” button

<
p style = ”text-align: justify”>

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.

View modes now available on the backend

<
p style = ”text-align: justify”>

The new Divi Builder editor has introduced the Visual Builder and all its features in the backend. Now you no longer need to travel to edit your page. 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) to see your page visually (like with Visual Builder) on the back end without having to leave the page.

The new Divi Builder user interface

<
p style = ”text-align: justify”>

Besides the ability to switch between different display modes on the backend, the Divi Builder user interface works seamlessly on the backend when 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 viewing your changes in real-time.

Go back to Classic Divi Builder

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.

The new features of Divi Builder

<
p style = ”text-align: justify”>

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 performance and usability improvements with this new Divi Builder. These upgrades include:

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

Read more: 10 Divi layouts for new WordPress projects

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’ve made the change, the background page editor will look almost the same as before, with a few minor tweaks. 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 to switch to the new Divi Builder by clicking on a link located at the bottom of Divi Builder in the backend.

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

Final thoughts

The launch of Gutenberg alone is a bit overwhelming for the most part. The WordPress page editor that 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.

 

For website maintenance service contact us.

Leave a comment

echo "";