I am excited to introduce Nested Modules for Divi 5, which will significantly enhance the versatility of Divi elements and lay the foundation for an advanced component-based menu builder.
Now, you can add modules inside other modules, with infinite nestability. Build custom layouts inside sliders, tabs, accordions, and everything else. Add a button to your menu, insert an opt-in form into your blog’s grid, and much more.
This is a powerful upgrade. 💪
Check out the following video to see the new feature in action. 👇
Infinite Nestability For All Elements
In the settings panel of all native Divi elements, you’ll find a new Elements option group. Click Add Element to add a new row or module inside the current element.
As shown in the video below, I can add a button to a blurb module or build a custom layout using rows inside a tabs module. In fact, you can add a slider inside a toggle inside an accordion, which, while entirely silly, illustrates the freedom Divi gives you to build anything.
Every Element Is A Flex/Grid Container
We’ve used semantics to give meaning to structure elements, such as rows and columns. Now, any element, including modules, can be a container, and every element comes with the full suite of flex and grid settings to control the layout of its children.
You can apply flex and grid structure templates to anything. As seen in the video below, the structure template applied to my pricing tables module controls the layout of its pricing table items, just like a row can control the layouts of its columns.
A module’s layout options can also control its native content elements. For example, as shown in the video below, if I want to position a blurb module’s image to the left of its text, it’s as easy as setting its flex direction to row.
New Flex Column Options
We added flex column width options to all elements. If an element is inside a flex container, you can quickly use Divi’s pre-built column widths to build a custom layout structure, without using math to calculate optimal width and gap values.
Improved Nested Elements UI
We’ve made it easier to work with nested elements.
- Add and Paste Above/Below/Inside: First, you’ll find new right-click options to add elements above, below, or inside elements on the canvas. You don’t need to click the plus button to add elements; you can use the right-click menu, which gives you more control over where the element is added. The same options are available when pasting, allowing you to paste elements above, below, or inside the target element.
- Sortable List Interface: The sortable list inside the Element option group gives quick access to child elements.
- Improved Drag & Drop: We also enhanced Divi’s drag-and-drop system to allow you to drop elements inside modules, and improved the drag and drop indicators to work better inside grid and flex containers.
Grid & Flex Option Consolidation
Divi has various modules that had their own grid layout options, including the blog, gallery, and portfolio modules. These legacy “Grid Mode” settings overlap with Divi 5’s new Layout option group, which has a much more comprehensive set of options.
These legacy grid mode options have been deprecated and migrated to the new layout option group’s native grid options.
Similarly, various modules had unique settings to control layout direction, such as the email opt-in module’s “Form Left, Content Right” option.
These options overlap with Divi 5’s flex options in the layout option group, and have been deprecated and migrated to map to the layout option group’s native flex direction settings.
Try Divi 5 Today
Nested Modules for Divi 5 is available today and is one of many features coming to Divi this year.
You can follow along as we progress through the final release of Divi 5 and beyond, with updates every two weeks. Depending on your priorities, you can use Divi 5 now or wait until we add more features, whatever works best for you.
We want you to try it, and if you love it, use it; when everyone loves it, we’ll make it official.
The Divi 5 Beta Begins!
Divi 5 has entered the Public Beta phase, the final phase before its official release.
Divi 5 has been available for new websites for some time, but it was missing a few features that certain existing websites couldn’t live without. Those features are complete, meaning sites can migrate all their legacy Divi 4 modules to the new system and benefit from the countless new features we’ve added over the past year.
Give it a try, and let us know what you think. We’ll keep addressing your feedback before the official release.
Watch this video for all the details. 👇
More Divi 5 Updates Are On The Way
2025 is the year of Divi 5. The tedious work is behind us. We built the super-fast foundation, and now it’s time for Divi to make its comeback.
If you’re here for the Divi comeback, do us a huge favor and let us know by liking this video and leaving a comment. It means a lot to us to see you cheering Divi on, and it’s essential to feed the algorithm and spread the word.
Don’t forget to follow us on YouTube and subscribe to the Divi newsletter so you never miss an update. I’ll see you soon for another Divi 5 feature announcement, which I promise will be right around the corner. 😁
Fantastic!
Wow…
Absolutely awesome!
I’ve been waiting for this feature… forever.
Combined with the other new features, it offers truly endless layout possibilities and, above all,
the ability to create truly elaborate designs!
Thank you so much for all your work!
Right! So cool. Too bad ai is taking our jobs now, but better late than never! LOL
/s
Yay! Great work Elegant Themes. You’re definitely on the right track. Thank you for your thoughtful attention to the details and user experience. Divi has always been a great product and Divi 5 has massive potential for positive impact in WordPress landscape.
WOW, this is definitely a game changer!!! LOVE IT!!
All we need now is the ability to change the html tags on elements so where items are effectively a list they are correctly inside a ul/ok as li items and semantically correct. Yes/No?
In the mean time, you can semantically label things role=”list” and role=”listitem”
Very easy to do, especially inside of loops since you only do it once.
I am assigning a 2/3 column width to an element, but it won’t ‘hop’ alongside the previous module which has a 1/3 width. This seems to work in the video, what am I missing? The modules are in a row, which is a flex container, as far as I understand it.
What you want to check is the parent’s wrapping setting. This is the probable reason why the elements aren’t falling into place as expected. If the issue persist, feel free to reach out to our support team for help!
While I appreciate all the new features, and can see the potential in this, most of them don’t have adequate documentation yet on how to use them – I really hope the team is working just as hard to get all the documentation updated.
The number of new features, for me at least, has reached the point of slightly overwhelming and a lot of them are hard to implement without some better documentation than the ‘new feature release videos’ because it’s sometimes hard to tell which changes are a feature and which are a bug.
Have you been to our new help docs? We have 153 articles on Divi 5.
https://help.elegantthemes.com/en/collections/10650977-divi-5
Also, we do a release post, an everything you need to know post, and several how-to tutorial posts for all new features we’ve built in Divi 5 since February.
What feature(s) are you having a hard time figuring out? Maybe I can point you in the right direction.
This new version is awesome… thank you very much for this upgrade.
But, there is one feature wich I´m missing so much wich is in the Divi theme options / Color Pickers Default Palette.
Will it be gone forever or will you add it on next releases?
Thank you for the kind words! 😊
The Color Pickers Default Palette is deprecated in Divi 5. All the site colors are now managed from the Global Variable Manager. Here’s a quick refresher: Everything You Need To Know Design Variables In Divi 5.