Divi 5 is in late Alpha
Divi 5 is in (hopefully) late Alpha version, 18.1 at the time of writing. This, by all technical criteria available in an engineer’s mind, should be enough to not even think about using it on a personal live site, let alone giving it to a customer. But things with Divi are running a bit different, and Elegant Themes claims it is ready to be used on new sites. So is it?
My tests, very limited unfortunately simply because time is running fast, confirms that. After all, you’re reading this on a Divi 5 website, you know. I’m trying strictly to use only Divi 5 modules, except for a few test pages where Divi 4 modules are used – I’ll always show it on the page itself. There’s one condition, though: the site must not be too complex. As I know this is a very vague statement, let’s put it this way.
In order to use full Divi 5 potential (speed and new layout options), your site must not go beyond what Divi 5 is currently ready to offer. In ither words, if you want to test a Woocommerce site, nope, you’re in the wrong place, because these modules are still under development and not available.
Can I use Divi 4 modules?
Sure. While porting from Divi 4 to Divi 5 site is just not yet perfect, you can start a Divi 5 site and use specific modules for Divi 4. The thing is, whenever you do that, the page in question will use Backward Compatibility Mode. This way, older modules will work, but you’re loosing the most wanted Divi upgrade of them all: speed.
Divi 5 is created so that its own shortcodes are gone, and because Divi 4 modules will use them, there you go – the page in question will use shortcodes and lose any advanced Divi 5 speed functionality in terms of speed.
5 Things you must know about Divi 5
Ok, back to the topic.
From what I have experienced with it so far, I can safely expose the 5 things you must know about Divi 5. For now at least, before the most awaited functionalities come (like Woocommerce modules and Flexbox).
#1: Divi 5 is not an update
As you might have heard or read already, Divi 5 is special because it’s not an actual update of Divi theme. The team at Elegant Themes decided it’s time for something completely new, and so Divi 5 was born. It’s completely rewriten, in its core and everything related to it, including the key design concepts and workflows.
The thing you’ll hear the most is that Divi 5 is getting rid of shortcodes. This might sound scary, but the thing is Divi 4 (and all Divi incarnations so far) used shortcodes heavily for every piece of information displayed. This made it limited regarding possible functionalities and made rendering of more complex pages a heavy task for the browser. Hence, Divi was always considered sluggish and slow, compared to some other page builders. It also made developing additional modules much harder for 3rd party developers.
These shortcodes are a thing of the past with Divi 5. It uses a competely different approach and the rebuilt core is using modern HTML5 output instead of shortcodes.
But isn’t WordPress all about shortcodes?
Yes, WordPress is using shortcodes heavily, and possibly every plugin you’ve ever installed uses them too. These will continue to work as before, first because it’s a WordPress thing, not the theme’s, and second because Divi 5 fully supports WordPress shortcodes. It just does not add additional shortcodes for its own operation.
It is one of the core improvements and the basis for easier 3rd party development.
How to prepare for this?
Well, it’s all about mindset, really. Everyone switching to Divi 5 (and I gues really everyone will dot it eventually) will simply have to keep an open mind for new possibilities.
The best thing you can do about it is to setup yourself a playground, maybe a local WordPress installtion or a subdomain on your existing site, install Divi 5 Alpha and dive in. Then, you can just play around and explore, but it’s even better if you start some kind of a project – a hobby site, whatever, something that will show you Divi 5 functionality through a specific need.
#2: Visual Builder is your one and only command center now
This is definitely one of the most important things you must know about Divi 5: there’s no more “wireframe” view as we’re all used to:
Instead, you’ll be redirected directly into the new Divi 5 Visual Bulder where all the magic happens.
This, for me, is not a bad thing. There are people that develop every site charting out the layout inside a wireframe and only then switch to visual builder, if at all. I’ve always liked the Visual Builder more and I’ve always started directly there, building the structure as needed.
But actually, it’s not about a personal touch, it’s much more.
The new Divi 5 Visual Builder was also created from scratch, giving us a fantastic command center for everything you need on the site. Additionaly, it’s freaking fast – you won’t believe it when you first try it!
Additionaly, the workspace is now fully customizable – it means that you can for example grab any piece (like the Layers tab) and drag & pin it to the location you want, making your workspace cleaner and more comfortable for you.
It’s such a huge improvement I’m having real troubles even testing everything inside.
How to prepare yourself?
Again, there’s no theory that can replace a little practical experience. Go in there, explore, click everything so you get accustomed to the layout, and try everything one by one.
One thing I can recomment to test is the new Attribute Management; you’ll need some thinking to wrap your head around everything that’s possible to copy in Divi 5 compared to Divi 4.
#3: New Layout Options
One thing Divi 4 was seriously limited with were more complex layout options. If there’s anything you want to see, this is definitely one of my favorites things you must know about Divi 5.
Divi 4 was limited regarding layouts for a simple enough reason – use of shortcodes. These could just go that deep and no further, otherwise the code would simply loop at some point. Since shortcodes are gone, Elegant Themes was able to get these layout options to work flawlessly. Here are the one that matter most, in order that makes sense to me (hopefully you too):
New responsive UI options with customizable breakpoints
Divi 5 now offers 7 predefined responsive breakpoints. Want more? You can easily change each of them to suit your specific needs. These settings are global and affect the whole website in a moment.
What is especially important if you’re used to Divi 4 is the way you define the design at each breakpoint.
In Divi 4 we’ve done it by selecting views and adapting values for desktop, tablet and mobile view in every module.
In Divi 5 Visual Builder, things get better. You start with a Desktop view, do your design thing and save the page. Then, you simply switch the view in the top bar, choosing one of the predefined views or customizing it for specific needs. From that point on, every setting you change will directly affect this breakpoint only.
This provides a much more convenient way of doing it and saves lots of time clicking while searching for a specific setting. Well done.
New advanced units
While we were able to use standard units like px, em or rem in Divi 4 already, Divi 5 brings some novelties that change the game alltogether.
Now, you have the option to use special functions also, for instance calc() and clamp(). These two alone can do more for the responsiveness of your website that you could ever do using standard units. They bring real responsiveness to every element on your site.
Clamp(), as an example, is primarily used for typography sizing. Inside Divi 5, it’s the same. You can get really responsive fonts all across your website by simply defining font sizes with this function.
Nested Rows
This is something that affects how you create your layouts. You can now insert rows within columns or rows, making it possible to create truly complex structures on the screen. Of course it brings a danger of overdoing it, but hey – we’re developers, we love to complicate things. In short, I love it.
Custom Column widths
Besides the predefined row structures, you can now simply define the column width in percentage of the row width. Sounds good? I can’t even remember how many times I’ve done it using special CSS tricks, in order to get a specific width for a client. So good.
Module Groups
This one is the one for the things you must know about Divi 5.
Using the Visual Builder, you can actually assign a group of modules as a module group now. Esssentially, it means everyone can create their own mini-modules now. Think about the Blurb module in Divi: it’s made up of an icon, an image, a heading and some text below. There’s nothing stopping you from creating this exact module group, but adding a text module to serve as a link, or a button module to serve as a CTA. Then you just name this group as you like and you have a completely new module you can use everywhere.
How to prepare for all those?
Experiment. Experiment. Experiment.
#4: Global Design Variables
I’ve mentioned somewhere already that it was just this spring when I found out about CSS variables. I know – my problem. This was the one thing I’ve always missed in CSS, because changing a color defined at 132 places all around the website is not fun.
Divi 5 now introduces this functionality into a WordPress theme environment.
There are groups of variable types you can define, here they are.
Under numbers, you can save anything that is a number (did I really need to write that?). This means font sizes, spacings, sizing, anything. The same goes for other groups – like maybe that company phone number that you’re using all over the site (text), a logo for specific pages (image), links to your affiliate offer (links), and of course all the colors and fonts you like.
The purpose of all this is to have all the needed settings in one place, right inside the Visual Builder. They are global, so any change here will immediately affect the whole site (careful!).
#5: Presets
Divi 4 supports presets, but only at module level. I can design a module, like a blurb for instance, and save it as a preset. Later on, I can define this same preset for any other blurb module and it will imediately be visible. Divi 5 supports this functionality directly with a thing called Element Presets. A great time saver, but only available as a module-type preset. What If I only wanted to define a preset for a color, a border, or a shadow?
That’s where Divi 5 changes things with Option Group Presets.
Now, you can create groups of presets for any setting, like color, border, shadow, whatever you can think of. Then, you can combine these presets (actually stack them) with any module you want, provided it supports the specific setting.
An example would be to create a preset for a shadow; you can easily apply this preset to every module that you want shadowed, and then define this shadow inside the preset. All modules will change upon any change to the preset, giving you an opportunity to save lots of time when designing.
Now, among the things you must know about Divi 5, this could easily take one of the top places. Why?
Imagine combining Presets and Option Group Presets with Divi’s Global Design Variables… See where I’m going? Provided you don’t overcomplicate, you can definitely create a dynamic design that you can change easily by changing any of the defined variables or presets – the whole website at once. No more searhing for that one color setting, simply change one hex code and you’re done.
This opens up possibilities to create reusable templates, of course, which you can use many times and change the presets/variables pair only to get something completely new. Ah.
5 things you must know about Divi 5 – Conclusion
So those are the things that are the most important in my opinion. So far, at least, because we’re eagerly waiting to see at least one more – the Flexbox. Until then, we have enough to test and play with, and I believe anyone trying Divi 5 will stay with it. Promptly.
Then, when the Divi Migrator is fully functional and the 3rd party modules you use are ready, the real work begins. Transfering sites from Divi 4 to Divi 5 will not go without nerve wracking situations, I’m sure, but the more you do, the easier it will get. After all, being a web developer means looking for troubles, one might say.
