Simple Steps to Use Gutenberg Blocks in Divi Builder - WPXPO
up to 35% off
Days :
Hours :
Mins :
Seconds
Logo
Back To Blog

Simple Steps to Use Gutenberg Blocks in Divi Builder

How to Use Gutenberg block in Divi Builder

A month back, one of our users mailed us that he wanted to use Gutenberg Blocks in Divi Builder. So, I decided to write about that. Surprisingly, in my research, I found that the integration of Gutenberg blocks and Divi builder enable 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 that launched in 2019 with WordPress 5.0. Since then, it becomes super popular in the WordPress industry for its simple and user-friendly interface. As a result, even though many users use popular page builders like Elementor, Divi Builder, etc., they also want to use Gutenberg blocks to make their website more attractive to the audience. 

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, there are no such plugins that 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. 

Now, I will give you some vital points below that help you to understand my viewpoint. By the way, 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 Feature of Gutenberg Which You Don’t Find in Divi Builder

In Divi Builder, you can’t transform blocks. Suppose, if 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.

transferrable blocks
Transferrable Blocks of Gutenberg Editor

In the 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.

reusable blocks option in gutenberg
Reusable Blocks Option in Gutenberg

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.

document outline option
Document Outline Option

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 need to enable PostX Saved Template addons and create a shortcode.

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

Here, I will give you the steps on how you can 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.
display gutenberg blocks in Divi builder
Display Gutenberg Blocks in Divi Builder

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.

saved template to use gutenberg block in Divi builder
Saved Template for Using Gutenberg Blocks in Divi Builder

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.

add new template
Add New Template

Step 4: Customization of Template

PostX provides you with a wide range of customization features along with the Gutenberg blocks. You can use post list, post grid, post slider, table of content, spacer and so many useful blocks to customize your block.

Customization of Template
Customization of Template

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. 

Divi builder code option
Code Option in Divi Builder
inserting short code
Inserting PostX shortcode in Divi Builder

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

Frequently Asked Questions

Is Divi compatible with Gutenberg?

Yes, Divi is completely compatible with Gutenberg. With the help of the PostX plugin, you can use both Divi and Gutenberg altogether.

Will Gutenberg replace Page builders?

Well, still you need page builders to build a professional website. Though Gutenberg provides a wide range of customization features along with many useful blocks, still it cannot be substituted for potential page builders like Elementor, Divi Builder, etc.

How to use Gutenberg Blocks in Divi Page Builder

You can use Gutenberg Blocks and Divi Page Builder altogether with the help of the PostX plugin. You just need to follow the below steps;

Step-1. Install PostX Plugin
Step-2. Turn on Save Template
Step-3. Create Custom Designs with Gutenberg Post Blocks to Generate Shortcode
Step-4. Add the Custom Designs to Any Page While Editing with Divi Builder via Shortcode

Conclusion

So, you need not worry about missing any feature from Gutenberg and Divi Builder. 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.

Like this article? Spread the word

Written byMd Zahidul Islam

I am a content writer and SEO Expert. Currently, I am working with WPXPO as a content executive. I love writing on WordPress, Themes, and Plugins.

Leave a Reply

Get Discount