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. 😁
The post Introducing Preset-Based Design For Divi 5 (Most Important Feature In Years) appeared first on Elegant Themes Blog.
# Overview of Preset-Based Design in Divi 5: A Significant New Feature
Divi, developed by Elegant Themes, has long been a favorite among web designers and developers for its flexibility and user-friendly interface. With the release of Divi 5, a significant new feature has emerged: Preset-Based Design. This innovative approach to design not only enhances the user experience but also streamlines the workflow for creating stunning websites. In this article, we will explore what preset-based design is, its benefits, and how it can transform your web development process.
## What is Preset-Based Design?
Preset-based design refers to the ability to create and apply predefined styles, layouts, and design elements across a website or specific sections of a website. In Divi 5, this feature allows users to save their custom styles as presets, which can then be reused throughout the site. This means that designers can maintain consistency in their projects without the need to manually replicate styles, leading to a more efficient design process.
### Key Components of Preset-Based Design
1. **Global Presets**: These are styles that can be applied universally across the entire website. For example, if a designer creates a specific button style or typography setting, they can save it as a global preset. Any changes made to this preset will automatically update all instances where it is applied, ensuring uniformity.
2. **Local Presets**: Unlike global presets, local presets are specific to individual modules or sections. This allows for greater flexibility, as designers can customize styles for particular areas of a site while still leveraging the benefits of preset-based design.
3. **Easy Customization**: Preset-based design in Divi 5 allows users to easily modify existing presets. If a designer decides to change the color scheme or typography, they can do so in one place, and the changes will propagate throughout the site wherever that preset is applied.
## Benefits of Preset-Based Design
### 1. Consistency Across Designs
One of the most significant advantages of preset-based design is the ability to maintain consistency across a website. With global presets, designers can ensure that elements like buttons, headings, and backgrounds have a uniform look and feel. This consistency is crucial for branding and user experience, as it helps visitors navigate the site more intuitively.
### 2. Time Efficiency
Creating a website can be a time-consuming process, especially when it comes to styling elements. Preset-based design allows designers to save time by reusing styles rather than starting from scratch for each element. This efficiency can lead to faster project completion and the ability to take on more clients or projects.
### 3. Simplified Collaboration
For teams working on web design projects, preset-based design simplifies collaboration. Team members can easily share presets, ensuring that everyone is on the same page regarding design elements. This reduces the risk of miscommunication and helps maintain a cohesive design vision.
### 4. Enhanced Flexibility
While consistency is essential, flexibility is equally important in web design. Preset-based design allows for easy adjustments to individual elements without disrupting the overall design. Designers can create variations of presets for different campaigns or seasonal changes, making it easy to adapt to evolving needs.
### 5. Improved User Experience
A well-designed website enhances user experience, and preset-based design contributes to this by ensuring that design elements are not only visually appealing but also functional. Consistent styling helps users understand how to interact with different components, leading to a smoother navigation experience.
## How to Get Started with Preset-Based Design in Divi 5
To leverage the power of preset-based design in Divi 5, follow these steps:
1. **Create a New Preset**: Start by designing a module or section with your desired styles. Once you’re satisfied, save it as a preset.
2. **Apply Global or Local Presets**: Decide whether you want to apply the preset globally or locally. Use global presets for elements that should remain consistent across the site, and local presets for specific modules.
3. **Modify Presets as Needed**: If you need to make changes, simply edit the preset. All instances where the preset is applied will automatically update to reflect the changes.
4. **Share with Team Members**: If you’re working in a team, share your presets to ensure everyone can access and utilize the same design elements.
## Conclusion
The introduction of preset-based design in Divi 5 marks a significant advancement in web design capabilities. By enabling designers to create, save, and apply styles efficiently, this feature enhances consistency, saves time, and improves collaboration. As web design continues to evolve, embracing tools like preset-based design will be essential for creating modern, user-friendly websites that stand out in a crowded digital landscape. Whether you are a seasoned designer or just starting, Divi 5’s preset-based design offers a powerful way to elevate your web development projects.
Recent Comments