I’m here to give you a sneak peek at a feature coming soon to Divi 5. With Divi 5’s foundation complete, we’re now focused on aggressive feature development, with new features in the works as part of the Divi 5 feature swap.
Every time we finish a feature, we start working on a new one, and every time we start working on a new feature, I’m going to tell you all about it!
Earlier this week, we released Option Group Presets, and the team involved is already working on their next project: Divi Design Variables.
It’s a bold step in a new direction for Divi and an essential part of Divi 5’s design system, which we are building to satisfy the needs of advanced web designers.
Get all the details in this video. 👇
What Are Design Variables?
Thanks to Divi’s global color system, you should already be familiar with the concept of design variables. Global colors are a type of design variable. They are data saved in your database, in this case, colors, that can be used throughout your website.
With the introduction of Divi Design Variables, you won’t be limited to global colors; you can define global anything! You can define variables for colors, units, strings, fonts, and images. These variables can be plugged into module settings and presets.
When you change a variable, it gets updated across your entire website. That makes designing with variables very efficient.
Furthermore, all of Divi’s input fields in the settings panel will be updated to support variables and dynamic content!
Designing Websites With Variables
How will design variables be used? In so many ways! For example, let’s consider number variables.
You can create a balanced sizing system for your website using a few number variables within your default presets. Define variables for your large, medium, and small font sizes and plug those variables into your presets and modules. If you ever want to change the size of your fonts, you only have to edit the variables!
Are you using the same border-radius value on dozens of elements? Turn that into a number variable, and then you can easily change your website’s border radius.
The same thing goes for fonts. Define and assign font variables to your title and body text presets or within static modules. If you ever want to switch things up and change your website’s fonts, you only need to update the variables, not your collection or presets, and certainly not a disparate set of modules on various pages.
You can also define variables for things like content strings and images. For example, you may have a company phone number, email, or address referenced throughout your website. If you turn that into a content variable, updating your company’s contact information is easy; digging through hundreds of pages is unnecessary.
The Divi Design System Is Evolving
The design system we’re building for Divi 5 is a beautiful thing. Preset-based design and variable management will usher in a new era of web design for Divi users, and you won’t have to wait long. Option presets were released a few weeks ago, and Variable Management isn’t far behind.
Let us know your thoughts in the comments or if you have any questions. Will the Divi Design Variables change how you build websites? I want to hear what you think!
Have You Tried Option Group Presets?
In case you missed it, check out my video from a few days ago announcing the release of Option Grou Presets.
Option Group Presets ushers in the era of preset-based design for Divi 5. You can create option presets for things like backgrounds, borders, and text and use those presets with any element, just like applying CSS classes to multiple HTML elements.
Get all the details in this video. 👇
Many More Features Coming Soon
Let us know your thoughts in the comments or if you have any questions. Before you go, I have a favor to ask. We are on a mission to leapfrog the competition in 2025 with dozens of new features, and we want you to know about all of them.
That’s why you must subscribe to our YouTube channel, as it’s the primary way we spread the word (in addition to the Divi newsletter). Over 50% of our viewers keep returning to watch these updates but aren’t subscribers. If that’s you, consider clicking the subscribe button and following along as Divi makes its comeback.
All it takes is one little click. 😁
We will fill this year with feature announcements and sneak peeks you don’t want to miss. Stay tuned, and I’ll see you for another sneak peek, which I promise is right around the corner.
This will be awesome to have. I hope there are a series of tutorials and guides that come out with these features explained in detail.
Additionally, will there be and easy place to set up all of these at the beginning of the build rather than as you go? Perhaps a Divi library layout with all modules where you can set all you presets, and options from the jump?
This could be huge!! So here is a question. Will text string variables be available inline to the text? This would be crucial for allowing a set of varibles to be used in content.
Very nice feature!! Well Done!
I’m looking forward to loop modules… now only possible with Divi Machine. It will be a game changer!