What’s new in Divi 5 compared to Divi 4?
There’s so much new in Divi 5 compared to Divi 4 that I can hardly choose the order in which to write them down. So, for the sake of simplicity, I’ll just use the Alpha release notes to show the biggest and most important changes, at least for me. You might think some of them not so important and some that are missing to be really important, but that’s how people operate and depends mostly on your personal needs.
Table of Contents
We’ve talked about vanishing shortcodes already – this is no doubt the greatest change. It will have a huge impact on the speed of websites created with Divi 5 compared to Divi 4, some estimates about the new theme speed even go as far as 3-5 times faster. While I can neither confirm nor deny those, it’s painfully clear that Divi 5 is much faster than Divi 4. It’s on you to judge the actual difference though, as it just depends on too many factors.
In any case, this basic change that demanded the core to be completely rewriten will affect any other change also. So let’s go one by one of what I think to be the most important changes.
New Visual Builder
For one, I’m extremely happy with the new Visual Builder. Not only it runs super smooth in Divi 5 compared to Divi 4, it has all sorts of changes included that are a subject of long time discussions.
In the image below, you can see the new Divi 5 Visual Builder interface, and in Dark mode. Yes, this is on +e of the changes that has been mentioned numerous times.
If you’d like to see it in operation, check the video below. It’s by all means shortened and most edits shown maybe make little sense, but that’s besides the point. Just observe of the responsiveness of the Visual Builder itself. If you’ve ever used Divi 4, tears might come to your eyes.
Tree View – Layers
One thing you might easily miss in the above video is the new tree view that Divi 5 now shows. It’s called Layers.
It shows very clearly the complete structure, as well as the active module that is selected inside the Visual Builder panel.
It was present in Divi 4 also, and I can safely say it will bring a cleaner view of the page under construction. In Divi 4, you had to call it specifically with the right-click, which opened a new popup. A true waste of space compared to this solution.
It does exactly what the Layers popup in Divi 4 did, but in a much cleaner way. So if you input the Admin Label fields for elements, you’ll see it all here.
Design Variables
As I’ve mentioned somewhere in a post, I’ve just recently discovered that CSS supports variables. I don’t know when that happened, but I’m thrilled by the “news”. I’m also developing some SAAS projects, using php frameworks (Codeigniter, to be precise), and I’m in process of changing my CSS philosophy to include variables. Oh, what a shame. 🙂
Divi 4 had no way of including variables, other than pure CSS. Well, in Divi 5 compared to Divi 4, these are fully supported and you can now define these:
- Numbers: here you can define variables for spacing, sizing, and anything else that is represented by a number.
- Text: default texts for your website, like a copyright message or an address.
- Images: default images, like logos etc.
- Links: I’m using my own shortcode + ACF solution to insert some default links all over the site. That’s over now!
- Colors: While Divi 4 suported Default colors, this is a much cleaner way to do it. Imagine, you can name your colors, making it much easier to find the right one when designing a module.
- Fonts: Problems with typograhy defaults? Creating custom CSS solutions? Here’s the solution to all that!
These settings are all saved on a global level, meaning they’re available all over the website for any module. You can easily define the basic graphical design parameters here and keep your site nice and congruent, because any change you need (like a Submit button color), you can easily do it right here and have the whole site updated upon the next refresh.
Here’s what it looks like inside the builder.
A word of advice, though.
Don’t get crazy by defining variables for every possible font (or color, or text, or…) you might need. The idea here is to make things easier, not more complicated. And by defining a custom -everything- you could just over-complicate an already complicated development process.
Divi 5 compared to Divi 4: A Fully Preset Based System
Presets, by definition, are instructions grouped in such a way that they can be used on modules that support settings included in the preset group. In Divi 4, we’ve had Module Presets and that was it. While wildly helpful, it was far from what can be done now. In Divi 5 compared to Divi 4 we have three levels of presets:
- Design Variables
- Option Group Presets
- Element Presets
Each of these has its own reach, and each can be added to various elements and modules, providing that the module or element supports the settings within the preset.
So let’s shortly describe one after another.
Design Variables and Units
In Divi 5 compared to Divi 4, the Design Variables now support all CSS units.
This means you can easily use CSS functions like clamp() for font sizes, for instance, calc() for dynamic spacing calculations, and so on. There’s literally nothing left that can’t be done. I’m so excited to try these on more examples…. 🙂
As of writing this, I’m literally using only a few:
- the basic colors,
- the basic typography,
- two links I’m using in the footer,
- and some basic spacing settings.
Design Variables are really helpful in Divi 5’s preset-based design system. They provide a streamlined framework for applying consistent styles across elements like buttons, sections, or headers. Variables act as the building blocks within this system, allowing you to manage your design choices conveniently. Whether you’re setting colors for brand consistency or a number variable that adjusts typography on the fly, variables will enable you to build cohesive and adaptable sites.
Option Group Presets
Option Group Presets are something that one doesn’t even miss, but once you try it there’s just no going back.
Under this somewhat misterious name, Divi 5 hides a gem: presets that can be configured by value and then used on any module on the site.
This means you can define a style for font size, for instance, with the color and spacing defined, and save it. Later on, when you create modules inside columns, you can use that preset for any module that supports the settings – in the case as described you could use it on most of the modules available in Divi.
Now, create another preset with the settings such as border and shadow, then another one with font weight defined…. Beginning to see where this is going?
In Divi 5, the Option Group Presets is awfuly close to the standard CSS classes. You can define your own and then stack them for modules and elements as needed. All that without writing a single line of CSS or other code…
Then, if you need to change something, just like in CSS you just need to change the preset. Bum, the website follows your instruction immediately on all modules you’ve used the preset on.
This is probably one of the most important updates to Divi philosophy that has been developed in years. It really allows the developer to create a fully specific design system inside a website.
Element Presets
Divi 4 fully supported the Module Preset system. I could define a blurb module, for instance, and then create a preset based on the settings. Then, I was able to use that specific preset for any other blurb module on the website or set it as a Default, which caused all subsequent blurb modules to use the preset.
In Divi 5, the flow goes like this:
- Define the Variable Presets: define the most used presets for colors, fonts, etc.
- Define the specific settings like color, font weight, border or shadow type etc. and save these within Option Group Presets.
- Choose a module, a blurb for instance, and use previously defined Option Group Presets to style it to your liking. Then, save this as an Element Preset – and you’ve won the game.
So shortly, Element Presets are what you want to define; blurbs have to look alike, headings and images as well, and so on. The specific settings are however based on sub-settings (Variables and Option Group Presets) that have a function similar to classes in standard CSS:
It’s honestly nothing that could not be realized with purre CSS and setting your element’s ID and Class properly.
But hey. I don’t have to do any CSS now. I don’t care about my element’s CSS class.
And that’s what makes this so important, especially for beginners – or actually anyone who does not want to mess around CSS code.
Nested Rows
One fo the things I’ve personally missed a lot (and I’m certainly not alone) was nesting.
Nesting is something that makes it possible for the developer to create literally any layout, not just what the theme supports by default.
In Divi 4, this was addressed by the use of something called Specialty Sections. While it works, it’s terribly limited. You always only have the option to create what the developers at Elegant Themes deemed important.
This is what it looks like in Divi 4; inside the orange part, you can only insert a single column, while the green parts show possible columns in that part. Like I said, it works; but hey, there are 9 options here out of unlimited. So limitation is the right word.
I’m doing a separate post on this, as it really is something worth using.
Module Groups
Well, this one is a cutie.
Imagine everything already said has been done and delivered to the website. So, you have presets all over the place, and any setting that looks not-quite-alright to you, you can change inside either Design Variables, Option Group Presets or Element Presets, depending on the level of change you want, of course.
But what if you could actually build your own modules, create something that you really need and is not available easily, and just make it a global module? And beware, with no coding needed?
You can do exactly that using Module Groups!
As an example that Elegant Themes showed us, let’s take a Blurb module. You know, the box with image (or icon) on top, title and text below? The one very similar to the standard Blog module in Divi 4, but with some added functionality? That’s the one.
If you look at it closer, you’ll notice it has a standard structure:
- Image or Icon
- Title
- Text (bod text)
It’s all packed into a box (a div) and you can change many settings to look it exactly the way you want it. Like I’ve mentioned above, with Element Presets, you can save the design under your own name and apply to any Blurb module you want.
Using Module Groups, we can make our own Blurb module, but more to our specific needs.
Let’s say we want an additional field, Meta. We’ll go and create a structure similar to the one above, just not exactly:
- Image or Icon
- Title
- Meta
- Text (body text)
The moment I save it as a Module Group, I have myself a new module ready to be used throughout the website. It will still be made of 4 elements, which all can have their specific settings (based on preserts, of course….), so I honestly have unlimited possibilites to design and control this “module”.
How cool is that? I can hardly wait to get my hands on that training… 🙂
Divi 5 compared to Divi 4: Conclusion
I’m not at the end of changes that make Divi 5 compared to Divi 4 stand out. There’s many more, especially in details that are sometimes not as obvious at the first glance. But I will continue to dig deeper.
First, I have to take care of my footer – it’s embarassinly empty right now. 🙂
Tomorrow, I plan on designing my first module. Yes, I know how it sounds, but using these tools now makes it possible for me to redesign any module, a blurb module for instance, and make it my own by exactly defining everything it should include by my opinion.
Right now, I’m going to rething what I want this very site to look like and try to define that following the Divi 5 Design Framework creation guide. Let’s see what that means and what will happen to my design flow I’m used to.
P.S. Honestly, I’m getting used to Divi 5 interface. This causes me to feel somewhat limited every time I open any site I’ve created in Divi 4. Is this dangerous? How will it affect my work on those sites? Should I start planning to convert them? So many questions, and so little time.
You may also like
