Since version 4.1 of Divi and its new "Divi Layout Block" feature, you can insert Divi modules in the Gutenberg editor (the new WordPress editor)!
Even in my wildest dreams, I would never have imagined this possible!
- 1 - What is Gutenberg?
- 2 - Why use Gutenberg within Divi ?
- 3 - What is the "Divi Layout Block"?
- 4 - Divi Layout Block: how does it work?
- 5 - My general opinion...
Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.
1 - What is Gutenberg?
Do we still have to introduce Gutenberg? I'm wondering... But I'm especially thinking about new WordPress users: you must be wondering what is Gutenberg?
Well yes, if you've been using WordPress for a long time, Gutenberg is a word you're familiar with, it was a big topic of discussion when WordPress 5.0 was released in December 2018. But let's think about the users who discovered WordPress in 2019. They may not understand the term...
To make a quick overview (lightning, even): Gutenberg is the WordPress editor. Doesn't tell you much, does it? The editor is simply the interface you use within WordPress when you create your content (page, articles, etc.).
In the past, before December 2018, the WordPress editor looked roughly like a "Word" page. A kind of blank page with a toolbar that allowed you to format the text.
It was a bit of a dinosaur. Gutenberg came to put a big kick in all this... The rise of Wix (among others) certainly has something to do with it...
In short, all this to say that the release of the new WordPress content entry interface (called Gutenberg), has done a bit of harm to some Page Builders.
In fact, I wrote an article about it in which I told you how... keep the Divi Builder in back-office after the release of Gutenberg. Yes, not everyone likes change 😉 ...
But I guess Divi bounced back. Well, it took a while, I'll grant you that... But today, you'll be able to enjoy the power of Divi within Gutenberg himself!
Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"
2 - Why use Gutenberg within Divi ?
That's a very good question. Conversely, why use only the Divi Builder?
This could almost become a national debate.
But this is my opinion, the one I give to all my students during my training:
- A theme is used to define the overall design of a WordPress site.
- A page builder is used to create so-called "complex" pages: sales pages, landing pages, homepages, etc.
- Gutenberg is used to write blog posts.
On Divi Tips and on my other blog (La Webeuse), it is this philosophy that I apply.
Why use a powerful and resource-hungry tool to simply display text and a few images here and there?
It's like driving a 4×4 in the city, is it really useful? Not to mention that you'll have to find a suitable place to park... A 4×4 is made for driving on steep roads. In town, you can take the tram or rent a small electric scooter. It's simpler, easier, faster... Hi hi hi, I digress!
So here it is, to write simple articles, no need for a page builder, whatever it is...
But that's where all the frustration is. We are still missing that little module, that little extra that we would have liked to insert in our article. For example: an accordion, a blog module or whatever!
Phew, version 4.1 of Divi finally allows us to combine the 2. No more need to add addons for Gutenberg to get a complete tool.
3 - What is the "Divi Layout Block"?
The Divi Layout Block is a new feature of Divi that allows you to insert Divi modules within your Gutenberg layouts.
Since a video is often more meaningful than words, here is Nick Roach who presents this feature:
So what do you say?
I couldn't resist the temptation to test these Divi Layout Blocks right away and I'll tell you how it works ...
4 - Divi Layout Block: how does it work?
Nothing could be simpler, you're not going to get lost. Here's the procedure:
4.1 - Insert a Gutenberg block
Create or edit content (page or article) with the WordPress editor (Gutenberg).
Click on " + Add a block ".
This is the same process you use to insert any Gutenberg block.
4.2 - Insert the " Divi Layout " block
A new block has appeared: the Divi Layout block.
Select this new block...
You'll have two choices... you can..:
- Build New Layout: you will build your section
- Load from Library: Your section is already built and you download it from your Divi Library.
4.3 - Building the Divi/Gutenberg block
If you make choice n°1, you will discover 3 new options:
- Building from scratch
- Choose the layout
- Cloning an exiting page
I'm sure you're familiar with this screen. These are Divi's classic options for the layout construction.
If you choose the "Build from scratch" option, you will then add :
- A new line
- Then a module offered by Divi.
You will have the choice of 46 Divi Builder modules.
For this example, I have inserted a module of "tariff table" .
Each module can be configured with Divi options, if you are familiar with the Divi Builder, you won't be confused ...
As usual, you will not forget to save your Divi construction using the purple cross and the green button at the bottom of the page.
4.4 - Editing the Divi/Gutenberg block
Once the Divi Layout Block is inserted, you can change the settings using a context menu that appears on mouse-over.
- You can convert the Divi Block Layout into a "group" block, but honestly, I don't see much point in doing that...
- The pencil icon will allow you to edit the Divi block.
- You will be able to modify your layout against a pre-built layout.
- Clear Layout: This option removes the layout created with Divi.
- Update layout: updates the block.
- Additional options: these are the classic Gutenberg options.
4.5 - Layout analysis with Gutenberg and Divi
For a better understanding, I offer you an explanation of the layout in detail:
On the screenshot above, I will try to explain the layout:
- Green box: here it is the Header and Footer of the site. These are "original", i.e. they were made with the Divi theme. Simply put.
- Purple box: this is the article template created with the Divi Theme Builder, as explained in this article.
- Pink box: the article template built with the Divi Theme Builder uses the Publish Content" module. This means that the module will display the content of the publication, whether it was built with Divi or with Gutenberg. On this capture, it's the Gutenberg contents.
- Blue box: this is the Divi Layout Block inserted previously! It blends in...
Need more resources on Divi? Visit ElegantThemes' blog full of ideas and tutorials!
5 - My general opinion...
Divi Block Layout is an interesting feature that does not confuse any user who knows a minimum of WordPress and Divi.
It's great for inserting sections we've previously saved in our library or for creating a Divi section on the fly, which will simply appear within Gutenberg.
I guess this feature will come in handy sooner or later...
Note that this feature also exists for the Elementor Page Builder but the difference is that you have to add an add-on to get it and you can only insert elements that are already registered in your Elementor library. With Divi, it's different since the modules you insert can be built within Gutenberg itself .
I also think that Elegant Themes should now focus on redesigning some modules that have become a bit old-fashioned over time...
What do you think of this new feature?