Today, we are excited to introduce Option Group Presets, ushering in the era of preset-based design for Divi 5. 🎉 It’s the most important feature to come to Divi in years.
Option Group Presets are shared styles that can be combined and applied to any Divi module to style your website’s base elements and create advanced design systems. It’s an absolute game-changer; once the concept clicks, there’s no going back.
Check out the following video to see the new feature in action. 👇
Divi’s Preset-Based Design Revolution
Other builders call them classes. We call them presets. Preset-based design leverages reusable styles to manage your website’s design system. You can turn Divi’s option groups into presets and apply them to any element.
Divi has long had the concept of presets. However, Option Group Presets are unique because they are not module-specific, allowing them to be mixed and matched across all elements.
If you want to use the same background, border, or title text style across multiple elements, you no longer need to design those elements repeatedly. Turn each design motif into a preset and apply it anywhere.
Whenever you modify a preset, every element using that preset gets updated.
Turn Options Into Design Presets
Let me give you an example.
Looking at the website in the video below, you can see that, as is often the case, there are many repeating styles. That’s what makes the design cohesive. A repeating background style combines color, gradient, and image to highlight several essential elements.
Instead of creating the background style repeatedly, I can turn it into a preset. Designing becomes much easier as I can apply the background preset to any element.
More importantly, if I want to adjust the style, I only have to edit the preset, and everything gets updated at once.
Apply Multiple Presets To Any Element
Option Group Presets can be combined. Each preset is a modular piece of your design system.
In the video below, you can see that various elements on the page share design motifs. They use the same border radius, border, box shadow, and title text style. And they’re all built with presets!
Edit once, and those recurring design patterns throughout the website get updated everywhere.
Layer Option Presets On Top Of Element Presets
You can stack Option Prests on top of Element Presets.
In the video below, the columns use a preset with shared background color, border radius, box shadow, and spacing. I can apply that preset whenever I want to create the appearance of an elevated card.
I also have border and box shadow presets used to highlight certain elements. I can stack those option presets on top of the column preset. I rarely have to style individual elements because my entire website is designed with presets.
Edit Default Prests To Style Your Website’s Base Components
This piece is huge. 🤯 You can modify the default preset of any option group to style your website’s base components!
For example, when I change the font of the default title preset, all the titles in all my modules get updated since they inherit styles from the default preset.
The same goes for every other option group. Adjusting default presets is like having all the Theme Customizer settings you ever wanted!
Try Divi 5 Today
Option Group Presets for Divi 5 are available today, and it’s one of many features coming to Divi this year.
You can follow along as we progress through the final release of Divi 5 and beyond, with updates every two weeks. Depending on your priorities, you can use Divi 5 now to build new websites or wait until we add more features, whatever works best for you.
As outlined in Divi 5’s original multi-phase release schedule, the Divi 5 Public Alpha is like “Divi 5 Lite.” It’s missing a few features and may not be suitable for existing websites, but it’s ready to be used on new websites if you prefer the experience to Divi 4.
We want you to try it, and if you love it, use it; when everyone loves it, we’ll make it official.
Coming Soon: Advanced Units Including CSS Functions
We’re building features fast. Every time we finish a new feature, we start a new one. Whenever we start a new feature, I give you a sneak peek.
In case you missed it, check out last week’s feature sneak peek. In it, I showcased Advanced Units, a new feature coming to Divi 5 that will introduce support for various CSS units, value functions, and variables to Divi 5.
Watch this video for all the details. 👇
More Divi 5 Updates Are On The Way
2025 is the year of Divi 5. The tedious work is behind us. We built the super-fast foundation, and now it’s time for Divi to make its comeback.
If you’re here for the Divi comeback, do us a huge favor and let us know by liking this video and leaving a comment. It means a lot to us to see you cheering Divi on, and it’s essential to feed the algorithm and spread the word.
Don’t forget to follow us on YouTube and subscribe to the Divi newsletter so you never miss an update. I’ll see you soon for another Divi 5 feature announcement, which I promise will be right around the corner. 😁
Leave A Reply