The Divi Layout Block feature allows you to insert Divi modules into the Gutenberg editor without activating the Visual Builder!
Even in my wildest dreams, I would never have imagined this possible!
- 1 - What is Gutenberg?
- 2 - Why use Gutenberg in Divi?
- 3 - What is the Divi Layout Block?
- 4 - Divi Layout Block: how does it work?
- 5 - My general opinion...
Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.
1 - What is Gutenberg?
Do we still need to introduce Gutenberg? I wonder... But I'm thinking especially of new WordPress users: you must be wondering what Gutenberg is?
Well yes, if you've been using WordPress for a long time, Gutenberg is a word you're familiar with, it was a big deal when WordPress 5.0 was released in December 2018. But let's think about the users who discovered WordPress in 2019. They might not understand the term at all...
To give you a quick overview: Gutenberg is the WordPress editor. That doesn't tell you much, does it? The editor is simply the interface you use within WordPress when you create your content (pages, posts, etc.) without a page builder.
In the past, before December 2018, the WordPress editor looked roughly like a "Word" page. A sort of blank page with a toolbar that allowed you to format the text.
It must be said that it was a bit of a dinosaur. Gutenberg came and put a big kick in all that... The rise of Wix (among others) is certainly a factor...
Anyway, all this to say that the release of the new WordPress content entry interface (called Gutenberg), has hurt some Page Builders a bit.
By the way, I had written an article on this subject which explained how keep the Divi Builder in the back office following the release of Gutenberg. Yes, not everyone likes change 😉 ...
But I guess Divi has bounced back. Well, it took a while, I'll give you that... But today, you'll be able to take advantage of Divi's power within Gutenberg itself!
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 in Divi?
This is a very good question. On the other hand: why use only the Divi Builder?
This could almost become a national debate.
But here is my opinion, the one I give to all my students during my training courses:
- 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, home pages, etc.
- Gutenberg is used to write blog posts.
To (re)read 👉 WordPress / Divi / Theme Builder / Page Builder: the basics.
On Divi Tips and my other blog (The Webeuse), this is the philosophy I apply.
Why use a powerful and resource-intensive tool to simply display text and a few images here and there?
So there you have it, to write simple articles, you don't need a page builder, whatever it is...
But this is where the frustration lies. We are still missing that little module, that little extra that we would have liked to insert into our article. For example: an accordion, a blog module or whatever!
Phew, Divi version 4. 1 finally allows us to combine the two. No 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 in Divi that allows you to insert Divi modules within your Gutenberg layouts.
Since a video often speaks louder than words, here is Nick Roach introducing this feature:
So what do you think?
I couldn't resist the temptation to test these Divi Layout Blocks immediately and I'll explain how they work...
4 - Divi Layout Block: how does it work?
Nothing could be simpler, you will not be lost... Here is 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 will have two choices... You can :
- Build New Layout: you will build your section
- Upload from library: Your section is already built and you upload it from your Divi Library.
4.3 - Building the Divi/Gutenberg block
If you choose #1, you will discover 3 new options:
- Building from scratch
- Choose the layout
- Cloning an exsiting page
You may already be familiar with this screen. These are the classic Divi options for construction of a layout.
If you choose the "Build from scratch" option, you will then add :
- A new line
- Then a module offered by Divi.
You can choose from the following 46 Divi Builder modules.
For this example, I have inserted a "rate table" module...
Each module can be set up with Divi options, so if you are familiar with the Divi Builder, you won't be confused...
As usual, don't forget to save your Divi build 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 contextual 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...
- The pencil icon will allow you to edit the Divi block.
- You will be able to change 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 - Analysis of the layout created with Gutenberg and Divi
For a better understanding, I propose an explanation of the layout in detail:
In the screenshot above, I will try to explain the layout:
- Green box: this is the Header and Footer of the site. These are "original", i.e. they were made with the Divi theme. Quite simply.
- 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 show the content of the publication, whether it was built with Divi or Gutenberg. On this capture, it is the Gutenberg content.
- Blue box: this is the Divi Layout Block inserted earlier! It blends into the background...
Need more resources on Divi? Visit the ElegantThemes blog which is 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 that you've previously saved in your library or for creating a Divi section on the fly, which will simply appear within Gutenberg.
I suppose I will need this feature sooner or later...
Note that this functionality 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 saved in your Elementor library. With Divi, it's different because the modules you insert can be built within Gutenberg itself...
I also think that Elegant Themes should now focus on redesigning some of the modules that, over time, have become a bit dated...
What do you think of this feature?