Access Divi Modules & Build Divi Layouts In Gutenberg
Combine The Power Of Divi With The New WordPress Editor
Today we are improving Divi’s integration with Gutenberg, WordPress’s new post editor, with the introduction of the Divi Layout Block. The Divi Layout Block brings the power of Divi to Gutenberg, allowing you to load Divi layouts or build new Divi layouts right inside the Gutenberg editor. This means you don’t always need to make the hard choice between using Divi or using Gutenberg, but instead can mix and match the two to get your desired result.
What Is Gutenberg?
Gutenberg is the codename for the block-based editor that was recently introduced in WordPress 5.0. This new editor replaced the TinyMCE-based Classic Editor that has been a WordPress staple for many years. Last year we introduced initial support for Gutenberg, which allowed Divi users to toggle between Gutenberg and the Divi Builder when creating pages. Today we are taking that integration a step further by allowing Divi users to combine Divi Modules and Gutenberg Blocks on the same page.
Bringing Two Builders Together
We think Divi is the best builder on the web and it has many significant advantages over Gutenberg. Many Divi users will never touch Gutenberg and that’s totally fine. That being said, Gutenberg shouldn’t be seen as Divi’s competitor. The two builders can work together! We plan to continue following WordPress’s progression and ensure that Divi works great with all future WordPress versions and each new version of Gutenberg too.
The Divi Layout Block
Use The Divi Builder Anywhere Inside Of Gutenberg
The Divi Layout Block is a Gutenberg block that works like a mini version of the Divi Builder. You can use it anywhere inside of a page built with Gutenberg to add Divi modules or create Divi layouts. When you add a Divi Layout Block, you can use it to load a pre-made layout or a saved library item on the page. Around it, you can use other Gutenberg blocks. Once a Divi layout is added to the page, you can modify it using the Divi Builder interface you are already familiar with.
Using The Divi Layout Block
When you add blocks in Gutenberg you will notice that a new Divi Layout block is available in the list. This block can be added anywhere on your page and within it you can build anything you want using the Divi Builder. You can use it to build large complex layouts or you can use it to add single modules that don’t exist in your block library. Around the Divi Layout block you can use other Gutenberg blocks just like you would normally. This allows the two builders to be used in harmony. No longer must you choose between using Divi or Gutenberg. You can use them both!
Load Pre-Made Layouts Or Build New Layouts From Scratch
Once you add a Divi Layout block to the page, you can choose to either load a pre-made layout or build a brand new layout from scratch. If you choose to load a pre-made layout, you will be greeted with the Divi Library popup and you can browse our selection of layouts and your saved library items. If you choose to build a new layout, the Divi Builder will be opened in a modal pop-up where you can use the Visual Builder and all of its features to build your layout. There are no page refreshes and once you are done editing your layout it will appear in Gutenberg.
Use Multiple Divi Layout Blocks On A Single Page
You can add as many Divi Layout blocks as you want to your page. This allows you to mix and match Divi Modules with Gutenberg Blocks to create just about anything. The Divi Layout block supports all basic block functionality. You can create re-usable Divi Layout blocks and current blocks can be easily moved, edited, duplicated and deleted.
Live Editing With No Browser Pop-ups Or Refreshes
The Divi Layout block goes beyond loading static layouts from your library. All Divi Layout blocks are stand-alone layouts that can be built and modified independently, without having to access the Divi Library. Editing Divi Layout blocks is done on the fly using a Visual Builder overlay. You can utilize the full power of the Visual Builder without having to navigate away from Gutenberg or refresh the page.
Join Or Upgrade Today For 10% Off!
Today's The Best Day To Get Divi Or Upgrade Your Account To Lifetime
Join the most enthusiastic and loving WordPress theme community on the web and download Divi 3.0 today. Using the new Visual Builder, you can build websites faster than ever before with its incredibly fast and intuitive visual interface. You have to see it to believe it!
Join Today For 10% OFF!
Renew Your Account Today For 10% OFF!
Upgrade Your Account Today For 10% OFF!
and vice versa? i need to put some gutemberg block into divi builder, in elementor you can choose gutemberg blocks into visual builder directly… why this feature is not avaible in divi builder, ?????? we are in 2020 pleaseee
hello everyone I studied Divi for almost two months and I always discover new things. I am happy but also a little tired because I have to look for information in many different places.
an updated and complete guide with various resources would be useful.
now I’m happy that DIVI works with Gutenberg but
I’m tired because I don’t understand how to make full-width galleries.
the DIVI module adjusts to the width of the gutemberg block
and I can’t take a strip of photos from right to left on the page.
What pain ..
where can i find the solution now ??
Great addition! I will help a lot, especially with clients who are not that tech-savvy and do not want to handle the DIVI builder.
I just updated Divi and now I see the option to use the Divi Layout inside Gutemberg.
However, when I tried to create a layout, the spinner runs for a few minutes and finally, I get a blank page.
so, this might seem like a silly question.. but does this mean we no longer have to use the Classic Editor Plugin? Even if we only choose to use the divi builder?
How does this effect the usage of the Classic Editor Plugin?
I realize there was a update for this to be activated within the Divi options I’m just looking for a little further explanation…
Divi / Options
Builder / Advanced
Enable classic editor
I do not like this change neither guttenberg.
It seems a mandatory change.
There should be an option to design as before this new version.
Last update ended in never ending builder loading… reverted immediately to the previous 🙁
What most developers never seem to understand is that most customers don’t have time to learn new ways of doing things. This has been a problem for 20 years. People need their online business operations to remain in familiar comfort zones the vast majority of the time, the only exception being change for a substantial and needed improvement for the customer base, something that is in huge demand that people are willing to make changes (learn a new way of doing things) for.
So all of our websites are set to the old default format to build Divi, because it’s what we know and goes fastest for us, despite having definite disadvantages. The front end builder, per what I’m stating above, was becoming too much of a time hog for us to continue trying to learn it, when we already know how to build with Divi the way we initially learned it. Hence, we now also always download the anti-gutenburg plugin so that that whole mess, that created a disaster on our sites a few years back, is eliminated. (WP’s fault, not yours).
A side note; we have never…ever…had a user-friendly font system to work with, an endless headache for us in Divi. The existing settings for fonts in Divi never work, never have worked, so we were forced a long time ago to use TinyMCE to have a kitchen sink in our editor that easily gives us everything we need. BUT…even tho it provides us with what we need, it is an added plugin in/bloat, and it too has never worked properly (such as there being no way to set default font/size/color settings of text. This has been and always will be a hugely inconvenient, time-wasting headache. Indirectly Elegant’s fault, since it’s not your plugin, but your fault because you have no text editor that is easy to use, works, offers user-set default for the above text options. FTR, we’ve tried repeatedly to MAKE it work, but it never has on any of our sites).
Of equal or greater importance, as another poster has stated, is speed, speed, speed. I’m aware a certain percentage of that boils down to our hosts/servers. But it also unquestionably involves the builder we use and how code bloated they are. We’re over-conscious of any/all plugins, using only those we absolutely need. But unfortunately Elegant and Divi has had a long-standing issue with load times that I suspect at this point can’t be resolved due to the nature of the platform.
I believe this is the best selling WP theme there is. It has tons of great stuff. It also doesn’t really have a solid competitor…yet…that offers another easy and streamlined way to build a WP site. When that competition does come, if they have a way to increase load times and provide us with a very user-friendly building experience that people would readily recognize from general online experience with windows and other common operating systems, I will definitely be considering moving over to it. With all the great stuff Divi has, it just has too many disadvantages as well.
(End rant). ;p
Load times, load times, load times…
I totally agree with you with this issue.
This is the deal breaker for advanced Divi users.
Once they find another home for themselves then the once most selling Divi theme advantage will be lost rapidly.
Howdy Nick Roach!
Really, Gutenberg is a different ly for me and other bloggers.
So, now I’m using Classic Editor Plugin!
amazing — looking forward to using this feature
Don’t care about your endless updates until you fix the core product and support line which doesn’t function much outside US business hours. Been trying to get support for 3 days and it’s just a random disorganised process. Also having not looked closely for 2+ years until recently and DIVI now appears increasingly bloated, latest update has also broken my site. Get the basics right first and support your product.
Awesome update! Thank you for all your continued work and improvements to Divi
This is the type of update I was looking for! I like that Divi seems to be always improving ! !
This is the future for divi with Gutenberg! But launch some dedicated plugins for divi and that is high speed optimization, security … (paid)!
Ex:
– Divi popular posts
– Divi Slider Banner Pro ….
Hey Nick, you´re offering Divi 3.0 instead of Divi 4.1 on your CTA at the end of the post!
It reads: “Join the most enthusiastic and loving WordPress theme community on the web and download Divi 3.0 today.”
What is the purpose of this feature? Pages would usually use the Divi Builder. Posts would usually use Gutenberg. Inserting Divi Layout Block into a POST in Gutenberg is a very bad idea, because this would make it too hard to change themes down the track. Inserting Divi Layout Block into a PAGE in Gutenberg – well, it is better to just use Divi Builder for the whole page. Does anyone have a use case they can provide as an example so I can understand how this would help ?
Hey, this looks like a really good idea! I am currently working on a site using the Astra Theme, which is great for speed, but here and there I need a little fancy feature which Divi does with ease. This is ideal for me.
Yepp running Astra theme for speed and being able to use Divi Builder where you need more fancy content might be a good combination.
Best would be if Divi Theme was as fast or faster then Astra and other minimal themes from the start.
Divi builder is already using too many server resources and has left me with no option than to switch to higher hosting plans. Do you think Gutenberg is going to consume fewer resources compared with Divi Builder? I was hoping for a fast running site rather than adding extra blot to my website.
Cool !
Good news. I hope the WordPress community could stronger the Gutenburg editor day after day and Divi could be one of the important players in this game.
Divi 4 is a huge update for Divi with great features like this one.
Also all of Divi Nation count seconds for stronger header builder. Individual search element, add modules to menu or submenu, stronger mega menu and etc like other advanced menu plugins in the market. I’m sure it could be a serious game-changer for the Elegantthemes and also for Divi nation.
good work
Congratulations . This feature is a radical addition to the power of DIVI. 🙂
It would also be very powerful for DIVI to allow Gutenberg blocks to be included in it. That would give it great power, since currently all the new plugins that are appearing on the market are prepared for Gutenberg.
Thank you for all your efforts.
Good stuff 😉
Wow – this is great. So happy that I went with Divi as my developer solution. The constant updates and regular blog posts are great. thanks!
Always great work pushing Divi forward so more users can use the product.
That said, can you PLEASE add ability for Divi to display image captions?
Unless I’m missing something, only way to display image captions is to add a separate text module below the image. Does anyone know an easier way?
This is good news! You are doing a tremendous job at Elegant Themes in developing the Divi theme. I have been worried about becoming locked in to your solution by swallowing all those (short)codes that hide behind the elegant front end. This latest move from you is a good strategy. You now seem able to tempt new costumers with a fall-back solution in case they/we would like to try something else. I would suggest that you continue that line in the future. For my part, I use the Divi theme and builder for pages (few) and not for posts (a lot). Perhaps that will change if you continue this new line of development.
Cool!
i love it!
thanks!
When you update bloom and Monarch? Right now its not working fine!
In bloom i can’t just create banner to show all who came on website i need email! but i just whant pop-up! why in divi so many problem to use pop-up??
and about speed im agree!
Nice this is good thinks!
THanks you for that!
But plz start code optimization, site speed, turn off unnecessary styles when they are not in use! more google optimization rules! Need site speed, easy SEO optimization, and tips on what else you need to do on the site in order for Google to be happy!
P.S. On other TOP templates and site builders, sites are much faster initially without extraneous plug-ins! I love divi, I recommend Eleganthemes! Please give us speed and cool optimization!
divi does a lot of heavy lifting for many website designers who are not developers as well. strong seo should be established during the UI design phase and followed through with solid implementation in development, best practices and most importantly… validating a business across google servers. that is not a divi issue to resolve, that is a developer/designer issue to resolve.
DIVI also needs numerous improvements in relation to Yoast SEO, Yoast analyzer does not work with DIVI.
This is a shame for SEO analysis.
There is a plugin called Asset Cleanup that I came across recently. It allows you to unload most resources that are not being used on a page or post. It is very flexible and can be applied to individual posts/pages or across post types in general. The interface is a bit intimidating and you mention extraneous plugins but this plugin does work.
For example I recently added the new reCaptcha that is now available in the contact module. This seems to add an extra load site wide due to external files from Google. Using the Asset Cleanup plugin I was able to unload the inclusion of these files on page other than those using the form.
Hope this is of useful
I’ve been using it too – very helpful.
Awesome update! Thank you for all your continued work and improvements to Divi!!!
Good Job!!
No more features, and better code quality and speed, please. After many years, I’m seriously thinking to move to Oxygen or Elementor.
Oxygen has many shortcomings, it doesn’t even have support for WPML or Yoast.
+1
1+
+1
If you are experiencing performance issues be sure to contact our support team so we can take a look. We are definitely dedicated to speed and stability, and if you look at the Divi changelogs you can see just how much work goes in to maintaining Divi beyond just adding new features 🙂
I just updated Divi this morning and it has broken my site. I contacted Bluehost, and they discovered a problem with the core file. I contacted Elegant Themes support, but have not received help. Meanwhile, my team can’t access the site on a Monday morning. Any advice would be appreciated. Thanks!
Hi Nick can I add that I have been doing some testing on the Page Builder Framework theme and you can use the Divi Builder plugin with it. It does perform better than the Divi theme. Ok, there is a lot more under the hood perhaps that the Divi theme does but I always see room for improvement. Perhaps a new theme with the Divi builder built in. Would be nice to see the best Extra included.
I was kind of hoping that Divi 4 would be the Builder based on blocks but that probably isn’t possible yet seeing how rudimentary blocks are. Not saying that the block editor is all the bad; it’s still in its infancy. I built a site exclusively in blocks recently and what I do like is how updating is asynchronous, no long page reload. That is a big time saver. Perhaps this update is the answer?
+1
This super cool. I prefer to use Gutenberg for blog posts to keep it simple and avoid bloat.
But often wish I could make the posts prettier without having to resort to converting it to a divi builder.
I just hope this doesn’t bloat my posts too much.
Please make the theme 100% ADA Compliant!!!!!
What is ADA?
Ummmm… WOW! I am simply amazed at how you all continue to innovate, continue to deliver value. Thank you, Thank you, Thank you! I’ve been with you for years and I keep recommending you to those I know develop websites. I hope you know what you all are doing is a blessing and I thank you! Our next step is to find a Divi genius to keep up with all your wonderful changes so we can leverage what’s best for our audience in new ways on our sites!
No longer must you choose between using Divi or Gutenberg. You can use them both!
That should have been moved up to the very top of email message and this webpage. Huge Benefit : ) : ) : )
I don’t like Gutenberg…..
This might have a chance of changing my mind!
+1
I am always happy to see that your team continues to bring great ideas and changes that keep coming with DIVI. Wonderful job. Keep rolling!!
Just one more observation where you add Divi content into a layout. If you are adding to say columns, surely you should be able to add a Divi module without the section and row elements. It seems to me that all this will add unnecessary markup and too much nesting. Can’t be good for performance?
Nice one. Haven’t completely studied this thoroughly yet but I am seeing many use case already.
Closely related to this, has align-wide and the other one for full width been implemented in Divi for the block edito?
And again. The famous Toolset question. Any sign of custom fields made by Toolset being available as. Dynamic content in templates made in them builder. And the ability to pre select a post for preview in the theme builder that renders something meaningful to make judgment calls on designs.
+1
+1
Yep the Toolset one is also big for me. Been stuck in 4.0.7 since Toolset shortocdes are not working anymore in the Theme Builder.
I am also Toolset user and still having some issues. If you place Toolset shortcode inside conditionals, it doesn’t work in Divi Theme Builder. I tried to use {!{…}!} and […], but without luck.
Now that you can use DIVI in Gutenberg theoretically there should be no problems with Toolset, since Toolset will make all the improvements for Gutenberg. They are fabulous news.
That’s great! Has been frustrating up till now.
Hi Philippe,
That may be fixed or, at least there may be a workaround. I kind of half encountered the problem a while ago and did my own fix by rectifying the odd {!{…}!} shortcode version that Toolset has been using since they introduced their Divi implementation. Changing the curly brackets {!{ to the regular square brackets [short-code] variety fixed things for me. A pain I know. But, you may not even have to do that. I spotted as one of the items of one of the last release change logs a reference to a fix to the {!{ in Toolset.
– Fixed Toolset Views {!{ … }!} shortcode compatibility with Theme Builder layouts.
Speak productivity! That’s a great addition to Divi. Well done.
Seems cool but what’s the difference in speed? I feel like using Divi builder with Gutenberg will add on extra bloat that might not be needed?
The addition of the Divi Layout Block does not add bloat and you are free to choose how you use Divi and Gutenberg.
+1