Simple Steps to Use Gutenberg Blocks in Divi Builder

A month back, one of our users told us he wanted to use Gutenberg Blocks in Divi Builder. So, I decided to write about that. Surprisingly, in my research, I found that integrating Gutenberg blocks and Divi builder enables more interesting customization options for the users.

In the WordPress industry, Divi is one of the most widely used premium themes and visual page builders. Here, you will get a lot of customization options to design beautiful websites.

On the contrary, Gutenberg is a block editor launched in 2019 with WordPress 5.0. Since then, it has become super popular in the WordPress industry for its simple and user-friendly interface.

As a result, many users use popular page builders like Elementor, Divi Builder, etc. However, they also want to use Gutenberg blocks to make their website more attractive to the audience.

So, in this article, I’ll write how you can use Gutenberg blocks in Divi Builder.

What is the uniqueness of Gutenberg Blocks Editor?

Well, there are countless benefits to using Gutenberg blocks. Most importantly, the Gutenberg editor allows non-technical users to add headings, paragraph text, images, videos, tables, buttons, and more through blocks. Also, there is a wide range of customization options for colors, widths, alignment, size, content position, and many more.

Why do we need to use Gutenberg Blocks in Divi Builder?

You may have a question, why do you need to use the Gutenberg blocks when you have premium plugins like Divi Builder? Well, no such plugins will give you a 100% solution. In terms of Divi Builder, it also has some lacking. To overcome these lacking, we need to take the help of other block editors, page builders plugins, etc. 

I will give you some vital points below that will help you understand my viewpoint. Of course, you can use Gutenberg blocks in Divi builder in many ways, but I will discuss the simplest way, where you just need to install a free plugin named PostX.

Some Useful Features of Gutenberg Which You Don’t Find in Divi Builder

In Divi Builder, you can’t transform blocks. For example, suppose you have a paragraph block; you cannot transform it into a quote block in Divi Builder. For the transformation, you need to create that block again. That is time-consuming and irritating. But, the Gutenberg editor, in this case, allows the transformation of blocks. You easily turn the blocks form into another.

In Gutenberg, you can save a block/group of blocks to use later in any post or page on your site by using reusable blocks. If you frequently add the same content to the same block or group of blocks, reusable blocks will save a significant amount of time.

You do not get any options for document outline in Divi Builder. But, in Gutenberg, you will get the document outline options. The Document Outline generates a content outline based on the title and headings used in your post/page. When you click a header, the editor will navigate to that section of your post or page.

Process of Using Gutenberg Blocks in Divi Builder

With the help of the PostX plugin, you can very easily use the Gutenberg blocks in Divi Builder. More interestingly, besides the Gutenberg blocks, PostX also offer some other useful blocks, layout, pre-made design, and essential settings option like meta, pagination, query, etc. To use Gutenberg in Divi, you must enable PostX Saved Template addons and create a shortcode.

(You can create WordPress custom shortcodes, but that takes time and a little coding. Also, the feature was not that flexible like the PostX shortcode block.)

Here, I will explain the steps to use Gutenberg through the PostX plugin.

Step 1: Installation of PostX

Users need to activate the free version of the PostX plugin to use the Gutenberg blocks in Divi Builder.  With the free version, users get an addon named “Saved Template” that will enable users to use PostX block features in Divi Builder. 

You can easily get the PostX free version by using some quick steps given below:

• First, Go to WordPress plugin options, click on Add New
• Then, write “PostX” in the search bar
• Install the “PostX” plugin
• Activate the “PostX” plugin.

👉 Get PostX Pro to unlock all exciting features and make amazing Websites

Step 2: Enable the “Saved Template” Addons

You will get an option named PostX in your WordPress after the successful activation of the PostX plugin.

Now, Go to the PostX dashboard option, and click on Addons. In the Addons option, You will see some useful addons. From them, you need to enable the addons named Saved Template.

Step 3: Create Template and Generate Shortcode

After enabling “Saved Template,” users will see a PostX option with a similar title. First, select “Saved Template” and then “Add New.” Users will now be taken to a new page with editable Gutenberg blocks. Users can customize the page to their personal preferences by selecting the desired blocks.

Step 4: Customization of Template

PostX provides a wide range of customization features and the Gutenberg blocks. To customize your block, you can use Post List, Post Grid, Post Slider, table of contents, spacer, and so many useful blocks.

After the customization, when you save the page, the shortcode will be automatically generated for the page. Now, you can easily copy that short code and use it in Divi Builder. 

Step 5: Add Gutenberg Blocks in Divi Builder via Shortcode

Begin editing the page with the Divi Builder now. In the search bar, write “code.” If you paste your saved template shortcode, your saved template will be updated automatically in the Divi Builder. 

You can use the saved template anywhere on your site. But, you cannot edit the template directly using Divi Builder. Instead, you need to go back to the saved template option, where you can again customize it as per your need. Once you publish the edited one, it will automatically be updated everywhere on the web pages where the template has been used. 

👉🏻If you find it difficult here’s our guide to convert Gutenberg Blocks into Shortcodes.

Frequently Asked Questions

👉🏻You can also check our guide to display Gutenberg Blocks in Elementor!

Conclusion

So, you need not worry about missing any Gutenberg and Divi Builder features. With the help of the PostX plugin, you can now easily use the Gutenberg blocks in Divi Builder.

If you have any queries, do not forget to write us. Our support team is always ready to resolve your queries.

You can check out WordPress video tutorials on our YouTube Channel. Also, find us on Facebook and Twitter for regular updates!

👉 Get PostX Pro to unlock all exciting features and make amazing Websites

Written byWPXPO

We are a group of WordPress professionals. We enjoy it's playing around and crafted WordPress Plugins & Themes.