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. 😁
The post Divi 5 Sneak Peek! Class-Based Design With Option Presets appeared first on Elegant Themes Blog.
# Introducing Divi 5: A Preview of Class-Based Design Features and Option Presets
The world of web design is constantly evolving, and with it comes the need for tools that not only simplify the design process but also enhance creativity and flexibility. Elegant Themes, the creators of the popular Divi theme, have been at the forefront of this evolution. With the upcoming release of Divi 5, they are set to revolutionize the way designers and developers approach website creation. This article will explore the exciting class-based design features and option presets that Divi 5 promises to deliver.
## What is Divi?
For those unfamiliar, Divi is a powerful WordPress theme and visual page builder that allows users to create stunning websites without needing extensive coding knowledge. It features a drag-and-drop interface, a vast library of pre-made layouts, and a plethora of customization options. Over the years, Divi has gained a loyal following due to its user-friendly nature and flexibility, making it a go-to choice for both beginners and seasoned professionals.
## Class-Based Design Features
One of the standout features of Divi 5 is its introduction of class-based design capabilities. This new approach allows users to apply CSS classes directly to elements within the Divi Builder, enabling a more streamlined and efficient design process. Here’s how class-based design can enhance your workflow:
### 1. **Reusable Styles**
With class-based design, users can create reusable styles that can be applied across multiple elements. This means that if you want to maintain a consistent look and feel throughout your website, you can simply assign the same class to different elements. Any changes made to that class will automatically update all associated elements, saving time and ensuring design consistency.
### 2. **Simplified Customization**
Divi 5 allows users to define custom CSS classes for individual elements, making it easier to customize specific components without affecting the entire layout. This feature is particularly beneficial for developers who want to implement unique styles while maintaining the integrity of the overall design.
### 3. **Enhanced Collaboration**
For teams working on web projects, class-based design fosters better collaboration. Designers can create and document classes that developers can easily reference, ensuring everyone is on the same page. This reduces the chances of miscommunication and helps maintain design standards across the project.
## Option Presets
Alongside class-based design features, Divi 5 introduces option presets, which further enhance the customization capabilities of the platform. Option presets allow users to save specific design settings and apply them to different elements with ease. Here’s how this feature can transform your design process:
### 1. **Quick Access to Design Settings**
With option presets, users can save their preferred design settings—such as colors, fonts, spacing, and more—and apply them to any element throughout the site. This quick access to design settings streamlines the workflow, allowing designers to focus on creativity rather than repetitive adjustments.
### 2. **Consistency Across Projects**
For agencies and freelancers who work on multiple projects, option presets provide a way to maintain brand consistency. By saving presets that align with a client’s branding, designers can ensure that every element adheres to the established guidelines, creating a cohesive look across all pages.
### 3. **Experimentation Made Easy**
Option presets encourage experimentation by allowing users to try out different styles without the fear of losing their original settings. Designers can create multiple presets for a single element, enabling them to switch between styles effortlessly and find the perfect look for their project.
## Conclusion
Divi 5 is set to redefine the web design landscape with its innovative class-based design features and option presets. By simplifying the customization process and promoting design consistency, Divi 5 empowers users to create stunning websites more efficiently than ever before. Whether you’re a seasoned developer or a beginner looking to build your first site, Divi 5 offers the tools you need to bring your vision to life.
As we eagerly await the official release, it’s clear that Divi 5 will be a game-changer in the world of WordPress design. Stay tuned for more updates and prepare to elevate your web design experience with the next generation of Divi!
Recent Comments