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.

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.

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.

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.

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.