Divi 5 brings in a bunch of new features. You can now use features like Loop Builder and popup builder without installing extra plugins.
What’s most exciting about Divi 5 is that it now supports flexbox, a feature that has been awaited by nearly all Divi users for so long. You can now create a design with a super complex layout thanks to the feature.
Apart from visible features, which I will cover shortly below, Divi 5 also brings in invisible features.
Divi 5 is not just a new version. It is a new foundation for the future of Divi.
Shortcuts ⤵️
The Fundamental Differences Between Divi 4 and Divi 5
Divi 4 was released in late 2019. The version included theme builder, a highly demanded feature that allowed users to go beyond creating pages.
Since then, many new features were added to Divi 4. But one thing remains unchanged: the Divi framework. The foundation.
It may take technical knowledge to understand what “framework” means as not all Divi users are developers.
In short, the Divi 4’s framework doesn’t allow for fast feature development due to the outdated structure. That’s why Divi 4 tends to be left behind compared to Elementor. It has way fewer features than its competitors.
By the way, if you haven’t tried Divi 5 yet, you can try it first.
After trying it, you will find that the editor of Divi 5 is way faster than Divi 4. That’s because Elegant Themes removed unnecessary animations in Divi 5, resulting in a faster editor.
The new editor of Divi is also much cleaner and looks more modern.
— No More Shortcodes in Divi 5
Shortcode is a feature in WordPress that allows plugins and themes to work between each other. With the feature, you can display content from a certain plugin/theme in other plugins/themes — or WordPress core.
Divi relied on shortcodes to display its content (modules, sections, settings, etc.) in WordPress.
When you add a new module (or other elements) in Divi 4 (and the older versions), a new shortcode is generated by Divi. WordPress then interprets and converts it into content.
Shortcode is generally effective and many plugins still use it. However, it adds overhead during page rendering. The process of shortcode parsing adds extra steps to content processing which increases page load times.
Divi 5 no longer uses shortcodes. Instead, it moved to a more modular framework.
Instead of generating and parsing shortcodes, Divi 5 works directly with the components on the page and loads them only when needed.
If you want to know how many shortcuts a Divi 4-powered page has, you can disable Divi and view the page.
New Features in Divi 5
Features list:
- Brand new editor
- Nested rows
- Flexbox
- Loop Builder
- Interactions
- Design variables
- Advanced CSS units
- New responsive editing experience
- HSL and relative colors
- New modules
1. Brand New Editor
This is arguably the most visible feature you will see after trying Divi 5.
Divi 5 comes with a cleaner and faster editor compared to Divi 4. Also, it looks way more modern than the old one.
Divi 5 also offers a better editing experience. You no longer need to click the Save button to save the changes you made to a module or other elements. Instead, Divi 5 automatically saves every single change you made as you edit an element.
All page builder features are also more accessible in Divi 5.
In Divi 4, you need to click the three-dot icon (the purple one) to view the available page builder features.
In Divi 5, all features are viewable on a dedicated panel on the left side.
Also, Divi 5 comes with useful breadcrumbs to allow you to jump between the settings panel of module, column, row, section, and page.
Another useful feature in Divi 5 editor is the ability to preview a page before you publish it.
Divi 4 doesn’t allow you to directly preview the page you are editing on the front-end like, for instance, Elementor.
In Divi 5, you now have a Preview button which you can click to preview the design of the page you are working on. There are also shortcuts to view a page, to edit the page and to switch back to the WordPress dashboard.
Here are five notable editing features in the Divi 5 page builder editor.
| Divi 4 | Divi 5 | |
|---|---|---|
| Autosave | ❌ | ✅ |
| Exit shortcuts | ❌ | ✅ |
| Preview | ❌ | ✅ |
| Breadcrumbs | ❌ | ✅ |
| Dark mode | ❌ | ✅ |
2. Nested Rows
Have you ever tried to convert a Figma template to Divi only to find yourself frustrated because the design has too complex layout?
Layout is one of the biggest issues in Divi 4 and the older versions. Oftentimes, you have to deal with CSS code to achieve a simple thing in Divi. Placing two buttons side by side, for instance.
In Divi 5, you can create a page with a more complex layout because you can now add rows inside rows.
When trying to add a new module in Divi 5, you will now see a new tab labelled New Row.
The best part of this feature is that you can add as many nested rows as you want although this practice is not good when it comes to performance.
In Divi 4, you can only add a new row on a section. That’s why creating a complex design layout requires extra efforts.
3. Flexbox
Another big pain when designing a page with Divi 4 is that you need to add custom CSS only to set the alignment of the content inside a container. Be it column, row or even section.
Ideally, you can do this with a single click because the essence of a page builder is to help you design a page without needing to have coding background.
The arrival of flexbox in Divi 5 makes it super easy to arrange the content alignment inside a container. You can now see a bunch of alignment options under the Design tab on the settings panel of column, row and section.
You can find the options on the Layout settings block.
Elegant Themes already know that flexbox is a critical feature to allow Divi users to create a page with a complex design layout.
However, implementing it on Divi 4 is not easy due to, once again, the outdated framework of Divi 4.
4. Loop Builder
Divi 4 already has the Blog module which you can use to create blog posts feed. You can also use the module to display blog posts (or custom post types) when you create a custom archive page or custom search results page using Divi Theme Builder.
While the Blog module is useful enough, it has some limitations. You can’t add custom content (e.g., meta data) to your feed.
Loop Builder is the solution if you want to create a content feed on your WordPress without any limitation about the content you can add. It is especially a great feature to create a dynamic site like a directory site.
With Loop Builder, you can create a page and loop every element within the page. For the dynamic content itself, you can pull it from the default content of WordPress or custom content you create with ACF.
Here are the setting options available in Loop Builder of Divi 5.
For your information, the use of Loop Builder in Divi 5 can be paired with the Pagination module.
5. Interactions
If you often use a popup to generate leads or just to show an informational banner, then this feature is something you will love about.
Well, this feature is not designed specifically to be a popup builder. Instead, it is a versatile feature which you can use to create several things, other than popups.
For instance, you can use it to create a closable banner on a single post template.
Another example, you can use it to create a switcher on a pricing table plan where you allow your customers to switch between the prices on monthly subscription and yearly subscription.
If you want to use this feature to create a popup, you have 4 trigger types to choose from:
- On click
- Exit intent
- Load
- Viewport
Here an example of a popup created with Interactions feature in Divi 5.
The Interactions feature of Divi 5 is accessible under the Advanced tab on the settings panel.
6. Design Variables
Design Variables is a feature designed for efficiency. Imagine the following case:
You have just finished your website project. After handing it over to your client, the client says that the color of the button needs to be changed.
Even worse because your client also wants you to change the border radius of the button.
The problem is that the website consists of multiple pages and each page has at least one button.
If you change the style of each button manually, then it can take a long time. With Design Variables, you can apply a new style to multiple elements at once — be it on the same page or different pages — with a single click.
Take a look at the buttons on the following screencast.
On the screencast above, I can apply a new style to four buttons at once because I use the same design variables. In this case, the variables are color and numbers.
Divi 5 itself supports six variable types:
- Number: Can be used on setting units (border radius, text size, margin, padding, etc.)
- Text: Can be used to add a global text
- Image: Can be used to add a global image
- Link: Can be used to add a global link
- Color: Can be used to set a global color
- Font: Can be used to set global font
Design Variables is accessible via the menu panel on the left side of the screen.
7. Advanced CSS Units
Advanced CSS units are a huge improvement that Divi 5 offers. Divi still uses pixel (px) as the default CSS unit, but you can now choose a different CSS unit of your choice without needing to type it manually.
In Divi 5, you can use a custom CSS unit by selecting the available options on the list. As you can see below, Divi 5 supports all CSS units. From static units (pixel) to dynamic units like percent, em, rem, etc.
8. New Responsive Editing Experience
Creating a responsive page is now easier in Divi. In Divi 4, you need to back and forth between tabs in the settings panel to set different setting values for each device (desktop, tablet, and smartphone).
Divi 5 brings in a brand-new responsive editing experience. You can now set different setting values on each device on a single panel.
On the Divi 5 settings panel, you will find a two-device icon to display a panel where you can set different values for each device.
The number of values you can set on this panel depends on how many active breakpoints you have.
To enable a new breakpoint itself, you can simply click the three-dot icon on the menu bar and switch the toggle. You can also customize the breakpoint value if you want it.
9. HSL and Relative Colors
Professional web designers often work with a design tool like Figma and Sketch before they convert their design to Divi.
Those who work with Figma before Divi usually already have a clear, vivid design concept. Including color scheme.
Speaking of color, Divi 5 introduces an advanced color management which allows you to create consistent colors on your website.
The feature allows you to create derivative colors from one base color. When you change the base color, the derivative colors will change too.
Take a look at the following screencast.
If you want to create a darker or brighter version of your base color, you can simply decrease and increase the lightness because Divi 5’s color management also supports HSL (Hue, Saturation, Lightness).
10. New Modules
Divi is a page builder that has fewest design elements (modules). In Divi 4, you only have 39 modules (outside WooCommerce modules).
As a comparison, Elementor has 88 native design elements (Free and Pro combined).
Well, more design elements don’t always mean better. But if you have to install an extra plugin only to add an icon list element, then that’s a real problem.
Divi 5 brings in a set of new modules. Now, you have 45 native Divi modules to eliminate the need to install plugins to add basic elements like an icon list or Lottie animation.
Here are the new modules offered in Divi 5:
- Group
- Group Carousel
- Hero
- Icon List
- Lottie
- Post Carousel
— Group Module
I want to cover this specific module further since I think it is a big improvement in Divi.
Once again, layout is the biggest pain point in Divi 4 and the previous versions. It’s extremely hard to create a design with a complex layout in Divi 4.
Even to create a post feed with the following layout (featured images on the left), you need to add custom CSS.
Well, Divi 5 doesn’t allow you to instantly achieve a design layout like the above with the Blog module. Maybe not yet.
But you can create a post feed with the above layout using the Group module. That’s because Divi 5’s Loop Builder is also available on the Group module (and the Group Carousel module).
To use the Group module to create a post feed, you can simply populate it (the Group module) with the elements you want and then set each element to pull dynamic content like featured image, post title, and post meta.
The Group module is super useful because you can use it to wrap elements on your design.
If you often place multiple elements close to each other, then the arrival of the Group module should be great news.
You can take a look at the following screencast for an example of how useful the Group module is when it comes to creating a complex layout. This is not a Social Media Follow button, by the way. They are Icon modules wrapped in a Group module.
Other Features ✨
Those are the notable features introduced to Divi 5 by Elegant Themes.
Apart from the features listed above, there are also features like Attribute Management, Extend Attributes and Setting Search and Filtering. All of them are aimed at speeding up your workflow when designing a page with Divi.
As I said earlier, Divi 5 is a new foundation for the future of Divi. In the future, Elegant Themes may introduce new features to Divi 5 at a faster pace thanks to its more solid, modern framework.
📝 Summary
Divi 5 is not just a new version. It is a new foundation. From the developers’ perspective, the new Divi 5 framework makes it possible for them to develop custom features and functionalities for Divi.
Some big names in the WordPress space already have good perception about Divi. Crocoblock, who previously only developed plugins for Elementor and Bricks, is even ready to make its products available for Divi.
From end users’ perspective, what has been added to Divi 5 resurrect an optimism about the future of the product they love. Divi 4, whether you like it or not, is far behind Elementor, Bricks, and even Breakdance.
Now with Divi 5, a brighter future is ahead.
A new foundation has been built, new features have been added at a faster pace than before. You can now create a page with a more complex design layout thanks to Divi 5’s flexbox feature.
Creating an advanced dynamic website is now possible too thanks to Divi 5’s Loop Builder feature.
