Introduction
Divi makes it easy to design visually, and most people naturally start by entering values directly into each setting as they build. You choose a font size here, pick a color there, and adjust spacing as needed as the layout comes together.
That approach works just fine at first, but as your pages grow, it becomes harder to stay consistent. The same values get repeated in multiple places, small differences start to creep in, and making changes across your site takes more time than it should.
That’s where Divi 5’s design system helps. Rather than repeating values and styles, you can set them once and reuse them in a more organized way. This gives you more control, keeps your designs consistent, and makes updates much easier.
In this guide, we’ll show you how the system works by exploring variables, option group presets, and element presets, and how they all fit together as you build.
▶️ Please watch the video above to get all the exciting details! 👆
Entering Values Manually in Divi
When you begin working in Divi, the easiest way to style something is to type values straight into the settings. You just open a module, change the design options, and enter what you want, like a font size, color, spacing, or border radius.
This approach is simple and easy to understand, which is why most people start this way. You make choices as you go, and you can see the changes happen right away.
As your layout gets bigger, things can get tricky. You might use the same font size in several places, repeat the same spacing in several sections, or use the same color throughout the page. At first, this seems fine and feels manageable, but over time, it gets harder to keep everything consistent. Small differences start to appear, and if you want to change something later, you have to find and update every single field manually.
There’s nothing wrong with entering values directly, and you’ll still do that sometimes. But if you rely on this method for everything, your design becomes harder to manage as it grows. This is exactly the problem the Divi 5 design system is meant to solve, and the first step is learning about variables.
Using Variables In Divi 5
As your design grows, you’ll start to notice patterns. The same font sizes, colors, spacing values, and other settings get used again and again across different parts of your site. Instead of typing those values over and over, Divi 5 lets you set them once and reuse them anywhere you want using the Variable Manager feature.
What A Variable Is
This is exactly where variables come in. A variable is simply a saved value. It might be a color, a font size, a spacing value, or even text or a link. Once it’s created, you can insert that variable into any supported field instead of typing the value manually.
For example, instead of setting a heading to 42px in several places, you can make a variable called “Heading Size” and use it everywhere. If you want to change it later, just update the variable once, and all the headings will update too.
Why Variables Matter
This makes a big difference as your site grows. You’re no longer managing individual values scattered across modules, but instead working with a small set of controlled values that stay consistent throughout your design.
Instead of tracking lots of different values in different places, you work with a few set values that keep your design consistent.
What Variables Are Not
It’s also important to understand what variables are not. They don’t store full module styles or combinations of settings. A variable is just one value at a time. Variables get even more useful when you start combining them with other features, such as option group presets, which we’ll cover next.
Variable Generator
There is also a helpful variable generator, allowing you to quickly create sets of variables of things like font sizes and spacing. This can be very helpful to get your site set up.
Using Option Group Presets in Divi 5
Once you start using variables, you stop repeating the same values over and over. However, you still make the same styling choices, like setting typography in multiple places, reusing similar spacing, and applying the same border styles repeatedly.
What An Option Group Preset Is
Option group presets are designed to solve this problem. Instead of saving a single value, an option group preset saves a group of related settings, such as typography, spacing, borders, or shadows. You can then apply that preset anywhere those same settings exist, without setting them up from scratch each time.
For example, you could make a typography preset for headings that includes your font family, weight, size, and line height. Or you might set up a spacing preset to keep padding consistent. After saving these, you can use them across different modules to keep everything aligned, without having to adjust each setting one by one.
Divi 5 also includes nested option presets. This means a module can include nested sub-elements with their own option presets, allowing you to define smaller styling rules, like an image or button, and reuse those styles inside modules like a Person or Blurb module instead of setting them up each time.
How They’re Different From Variables
This is the main difference between variables and option group presets. A variable holds a single value, while an option group preset is a set of settings for one part of an element.
Option group presets stay linked wherever you use them, unless you override a specific setting. If you update a preset, every place that uses it will update too. This makes it much easier to adjust your design later, without having to find and change each spot yourself.
Another key point is that these presets are not limited to a single module or module type. For example, a typography preset can be used in a Blurb module, a Call-To-Action module, or anywhere you have typography settings, making it flexible and easy to reuse throughout your site.
Using Variables Inside Option Group Presets
You can also include variables inside option group presets. This lets you combine reusable values with reusable style groups, so you don’t have to manage everything separately. It makes the system feel more organized and intentional.
At this point, you’re doing more than just entering or reusing values one at a time. You’re starting to define consistent patterns in how your site is styled, and that will carry through as you continue building.
Using Element Presets In Divi 5
At this point, you’ve seen how variables handle individual values and how option group presets handle groups of related styles. Element presets bring everything together into a complete, reusable element.
What an Element Preset Is
An element preset is a saved setup for an entire element, whether that’s a module, row, or section. It includes all the design settings you’ve applied, so instead of rebuilding the same element over and over, you can apply a preset and start from a consistent foundation.
For example, you might create a Blurb module used for feature cards with your preferred typography, spacing, and colors. Once saved as an element preset, you can apply and reuse that exact setup on other Blurb modules without reconfiguring each setting.
How Element Presets Relate to Option Group Presets and Variables
Element presets don’t replace variables or option group presets, they build on top of them.
If you’ve used a typography option group preset or a spacing preset inside your element, those are included as part of the setup. If you’ve used variables for things like font size or color, those are included as well.
So instead of saving raw values, you’re often saving a combination of:
- variables (individual values)
- option group presets (groups of styles)
- plus any additional settings
That’s what makes element presets feel complete. They bring everything together into a single, reusable design.
What Happens When You Make Changes
Element presets bring everything together, but they don’t control the variables or option group presets inside them. They simply use them as part of the setup.
When you apply an element preset, it can include option group presets and variables that are already defined elsewhere. Those remain connected to their original source.
If you want to change a variable or an option group preset itself, you would edit it directly where it’s defined. Any updates you make there will apply everywhere it’s used, including inside element presets.
When you edit an element preset, you’re adjusting how that preset is configured. This includes things like:
- applying or removing an option group preset
- switching which variable is used in a field
- or overriding a value directly
For example, if your element preset includes a spacing option group preset and you change the top padding directly in the preset, you are overriding that specific value for this preset. You’re not changing the original option group preset itself.
In that situation, the element preset keeps its own value for that setting instead of relying on the option group preset for it. Other elements using the original option group preset are not affected.
This gives you flexibility. You can rely on shared styles where it makes sense, and override specific settings when needed, without breaking the rest of your design system.
Conclusion
The Divi 5 design system may seem a little overwhelming at first, especially when you start hearing terms like variables, option group presets, element presets, and nested presets all at once. But once you understand the role each one plays, the system starts to feel much more practical.
Variables help you manage individual reusable values. Option group presets help you reuse groups of related styles. Element presets bring everything together into complete reusable designs.
The goal is not to make building more complicated. It’s to help you create more consistent websites without repeating the same work over and over. As your layouts grow and your projects become more complex, these tools make it much easier to stay organized, make updates, and maintain a consistent design system throughout your site.
Thanks so much for this! I knew basically how it all worked, but this put it together. Do you think you could do one for Flex and Grid. Again, I get the basics, but I am still struggling a bit. Thanks for all your tutorials, they have really helped me over the years also!
Hi Leslee,
You’re welcome! That’s so nice to hear, I’m glad they are helpful! And yes, that’s an excellent idea to do one on Flex and Grid! I’ll keep that in mind as I plan more content, probably after I release a new Divi 5 course (trail guide).
I thoroughly loved this format/style of video. This is exactly what I’ve been looking for. I want to move to Divi 5 but I’m so scared because it’s so different from 4. And I’m terrified it will break or I won’t be able to design like I used to in 4. But this was super helpful for me. I would love a best practices/how to set up a site with the new system. Thank you so much for this and I hope you continue this deep dive for the new Divi. I know some of it will be me having to get my feet wet but having a starting place and guide, kind of “do this first” type thing would be so helpful. Thank you so much for your time and releasing this.
Hi Denise,
I am really glad to hear your feedback! I’m so glad it was helpful. There still is no rush, so like I said in our Divi 4 to Divi 5 Trail Guide, take it slow and explore a few specific things at a time on a test site. Also, I am working on a 5 part series in this same format about building a real website with Divi 5 from scratch!