How to Use a Divi Module in Gutenberg

Since version 4.1, Divi has had a feature to use a template built with Divi in the Gutenberg editor. The new feature adds a new block in the Gutenberg editor called Divi Layout. Just like the name suggests, this block allows you to import a Divi layout to the Gutenberg editor.

Unfortunately, this feature only allows you to import a page layout. You cannot use it to import a section layout or row layout.

But you can use this feature to use a Divi module in Gutenberg, which is great to add creative elements to a blog post such as a call to action, gradient button, and so on.

How to use a Divi Module in Gutenberg

Before getting started, make sure you have updated your Divi. To check your current Divi version, you can go to the Dashboard -> Updates. Scroll down to the Themes section. If a new version is available, tick your theme and click the Update Themes to update your Divi theme.

Checking the Divi version installed on a WordPress site.

Or, if you use Divi Builder on a theme outside by Elegant Themes’ products (Divi and Extra), you can tick Divi Builder on the Plugins section and click the Update Plugins button to update the Divi Builder plugin.

Updating Divi in WordPress.

After updating your Divi theme/Divi Builder, create a new blog post (Posts -> Add New). Add a new Gutenberg block and should find Divi Layout block. Select this block and select Build New Layout. You will be directed to the Divi Builder front-end editor.

Select BUILD FROM SCRATCH option and click the Start Building button.

The confirmation dialog before you work with the Divi Builder editor.

On the Divi Builder front-end editor, add a row before adding a module. You can add any module you want.

Customize the module according to what you want to accomplish. Once done, click the Save & Exit button and you will be taken back to the Gutenberg editor with your module added.

Clicking the button will exit the Divi Builder editor.

If you want to edit the module you have added to Gutenberg, click the module to turn it into an editing mode and click the Edit Layout button on the right sidebar.

The Bottom Line

The new feature of Divi Builder which allows you to use a Divi module in the Gutenberg editor is pretty cool as it allows you to add creative elements to a blog post. You can, for instance, add a call to action element to your long affiliate article or a more appealing download button if you want to offer a digital product.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Want to start a profitable blog with WordPress? OF COURSE!

1 thought on “How to Use a Divi Module in Gutenberg”

  1. Hello
    Thanks for your article. Divi sent me your link.
    Please, I am just wondering how one can use “PostX – Gutenberg Blocks for Post Grid” by wpxpo in Divi.
    Have tried but failed. Any possibilities or assistance?
    Your response will be greatly appreciated.
    Thanks in advance.

    Reply

Leave a Comment

Want to outrank big websites on Google?

Without backlinks, without high DR, without digital PR. Just content optimization.

Click to enlarge.

Save your Divi assets to the cloud and access them from anywhere.
Hey 👋🏻
Got WordPress knowledge?
Why not turning it into profit? Click the button below to learn how.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.