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.
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.
Frequently Asked Questions
Is Divi Compatible with Gutenberg?
Yes, Divi is completely compatible with Gutenberg. Furthermore, with the help of the PostX plugin, you can use both Divi and Gutenberg.
Will Gutenberg Replace Page Builders?
Well, you still need page builders to build a professional website. Unfortunately, Gutenberg cannot substitute potential page builders for now. However, Gutenberg provides a wide range of customization features and many useful blocks, which can universally replace page builders.
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
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.