How to Use a Divi Module in Gutenberg

In Elementor, you can use a widget (Elementor widget) in the Gutenberg editor with the help of the Elementor Blocks for Gutenberg plugin. The same feature is now also available in Divi Builder. The difference, you don’t need to install an extra plugin. The feature is an integral part of Divi Builder. The feature is available on Divi version 4.1 and the newer versions so make sure to update your Divi in case you haven’t done so in order to be able to use the feature.

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 and cannot be used 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 that is not developed by Elegant Themes (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.

Final words

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.