Divi 5 Sneak Peek! Class-Based Design With Option Presets

I’m here to give you a sneak peek at a feature coming soon to Divi 5. With Divi 5’s foundation complete and many bugs fixed, 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! Buckle up. It will be an exciting year with back-to-back sneak peeks and feature releases. 🥳

Today, I am excited to talk about Options Group Presets, a new feature that will play an essential role in Divi’s design system. Option Group Presets are like module presets, except they can stack on top of modules and be used across all module types to apply a shared style or define your website’s base styles, such as buttons, title text, and body text.

Preset-based design, also called “class-based design” on other platforms, will change how you build websites for the better.

Get all the details in this video. 👇

What Are Divi Presets?

In Divi, a preset is a set of styles shared across multiple elements. You can adjust your default presets to style the base elements of your website and create additional presets for unique variations. When you update a preset, every element using that preset gets updated at once, significantly improving the efficiency of designing and managing your websites.

How Option Group Presets Will Work

Option Group Presets are just like Module Presets, except they are for individual option groups. For example, your website likely has two to three title text variations. Instead of defining those repeatedly, you can create a title text preset and apply it to any module. The same goes for background styles, buttons, and other module sub-elements.

It’s similar to creating and adding a CSS class to multiple HTML elements. Divi Prestes are classes, and you can combine different module and option group presets to style your entire site, creating a holistic design system that is incredibly easy to manage.

Add a new module, select your desired preset, and then layer option group presets on top to add a twist, such as a specific box shadow, background style, or border.

What To Expect From Option Group Presets Version One

The initial release of Option Group Presets, which you can expect in as little as three weeks, will focus on the base set of option groups shared between all modules. That includes, for example, background, text, border, box-shadow, animation, etc.

These are most important because they can be used across all module types. We will add option groups unique to individual modules in a future release, and in the meantime, you can still create module presets to style those elements.

Have You Tried Customizable Responsive Breakpoints?

In case you missed it, check out my video from last week announcing the release of Customizable Responsive Breakpoints. It’s a great new feature that’s available for Divi 5 today.

Get all the details in this video. 👇

Many More Features Coming Soon

Watch for Option Group Presets, which will launch very soon. We’re on a mission to leapfrog the competition in 2025 with dozens of new features, and this is just the beginning!

Let us know your thoughts in the comments or if you have any questions. 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 sneak peek, which I promise will be right around the corner. 😁