Presets are among the most powerful tools in Divi 5, enabling you to build consistent, efficient, and scalable designs across your entire website. Whether you’re building a cohesive brand style, speeding up repetitive tasks, or managing complex projects, presets let you define them once and apply them everywhere.
We’ve taken the system a step further with the Preset Manager. It puts you in control of your presets by consolidating them in one convenient location, ready for you to browse, create, edit, and organize.
In this post, we’ll explain what the Preset Manager is, explore its key features, and show you how to use it.
Let’s get started.
What Is The Preset Manager In Divi 5?
The Preset Manager is a dedicated feature in Divi 5 that gives you a single, centralized view of all presets on your site. Whether you’re working with Element Presets or Option Group Presets, everything appears neatly organized in one powerful interface.
Subscribe To Our Youtube Channel
Its main purpose is to make preset management effortless. From this location, you can easily browse your entire preset library, organize them for quick access, create new ones on the fly, edit existing styles, and apply them across your whole site, all while maintaining design consistency and keeping your workflow smooth.
To access it, simply open any page in the Visual Builder. Look in the left sidebar for the new Preset Manager icon.
Key Features Of The Preset Manager
A Centralized List Of Presets
The list of presets is the heart of the Preset Manager, displaying all presets on your site in a single, organized view. Presets are neatly grouped by module type or option group, allowing quick, intuitive navigation, no matter how big the list gets. This single dashboard brings clarity and speed to the design process, so you can focus on creativity rather than searching.
Search And Filtering
Powerful search and filter options make it easy to locate specific presets, even in large collections. Simply type in a keyword or apply filters to narrow down results, helping you find what you need. This capability turns what could be a time-consuming task into a seamless experience, keeping your workflow fluid and productive.
Preset Actions
Each preset comes with a full set of actions. You can edit any preset to refine its styles, duplicate it to create quick variations for different use cases, delete presets, or set a favorite as the default so new elements automatically adopt it. These actions help you manage your design system, making updates and customizations feel natural and efficient.
Create Presets Faster
You can easily add new presets without ever leaving the Preset Manager. Whether starting fresh or basing it on an existing style, you can generate presets of any type — Element or Option Group — on the spot. This makes it easy to expand your preset library and encourages experimentation as ideas come to you.
Improved Organization
The Preset Manager improves organization with easy sorting, reordering, and overall management of your collections. Rearrange presets so your most-used ones appear at the top, and watch the changes reflected immediately in the Manager. This flexibility lets you create a personalized, accessible design system that grows with your projects and team.
Import And Export Presets And Variables
You can import or export your presets (and variables), letting you share and reuse your design systems across multiple Divi 5 projects. An import/export icon in the Preset Manager enables you to export all your site’s presets as a simple JSON file and import them into a new website to jumpstart a fresh build. This makes collaborating with teams, migrating designs, or standardizing client projects faster and more consistent.
The Built-In Preset Preview Panel
The Preset Preview System is a dedicated preview panel that opens automatically whenever you create or edit a preset with the Preset Manager. The system gives you a clear, focused space to refine designs without leaving the Manager interface.
It works by providing a live, isolated preview of your preset changes inside a sandbox environment. When preset editing mode activates in the settings panel, the Preset Preview window displays the preset applied to an element, letting you see exactly how your styles come together in real time.
You can even preview the preset against different background colors pulled from your website’s color variables, helping you ensure perfect harmony across your site’s design system.
The key benefit is the ability to view and test updates instantly without affecting your actual page content or disrupting your overall design flow. Your live page remains untouched while you experiment, meaning edits stay contained within the preview panel until you’re ready to save them.
How To Use The Preset Manager
Getting started with the Preset Manager is quick and intuitive. The entire process flows smoothly, helping you build and maintain your design system with ease.
Accessing The Preset Manager
Open any page or post in the Visual Builder. In the left sidebar, look for the new Preset Manager icon. Click this icon to open the full Preset Manager panel, displaying your complete preset library in a clean, organized view.
When the Presets Manager appears, you’ll have access to every preset used on your website. To quickly locate a preset, use the search feature to input a keyword.
Alternatively, you can use filtering to browse available presets. Upon clicking a keyword, every available preset for that module will appear.
You can sort and reorder presets. By default, presets are organized alphabetically, making it easy to browse your collection.
Creating A New Preset
From inside the Preset Manager, click the Add New Preset button. When in the Element tab, you can create presets for any module in Divi. On the other hand, while in the Group tab, you can create option group presets for various style settings, including buttons, box shadows, spacing, filters, and more.
For example, after clicking the Add New Preset button in the Element tab, you’re presented with a list you can browse to create a new preset.
Upon selecting an element, the Preset Preview will launch, along with the Preset panel. Make any content or design changes, then save the preset by clicking the Save Preset button.
Editing An Existing Preset
Use the Preset Manager to select a preset to edit. Click the Edit Preset icon to make changes to your preset.
This will launch the Preset Preview. Use the Preset Settings in the Content tab to change the preset’s name. Use the Design tab to make any style changes to colors, typography, spacing, shadows, or other settings.
Once all changes are made, finalize them by clicking the Save Preset button.
Duplicating And Reorganizing Presets
Each preset in the list includes action options for easy management. Hover a preset to reveal actions for duplicating or deleting.
You can also easily assign a preset as a favorite by enabling the star icon.
To reorganize presets, simply drag them to reorder them.
You can move your favorites to the top for priority access, and the new order will instantly appear in preset menus across your pages.
Benefits Of Using The Preset Manager
Streamlined Workflow
The Preset Manager transforms the way you work with Divi 5. Instead of jumping between modules, pages, or scattered settings, you can handle everything from a single, intuitive panel. This centralized approach leads to noticeably faster design decisions, letting you spend more time building pages and less time managing styles.
Enhanced Consistency
One of the biggest advantages is the consistency it brings to your entire website. With the Preset Manager, maintaining and updating styles becomes faster and more organized. Make a change to a preset once, and it can instantly reflect across every element or option group that uses it. That way, all of your typography, colors, spacing, shadows, and other design elements stay perfectly aligned.
Greater Efficiency
The Preset Manager can handle even the largest preset libraries. The built-in search, filtering, sorting, and drag-and-drop reordering mean you can find, edit, or reorganize presets in seconds. What used to feel overwhelming with dozens of presets now feels organized and approachable.
Safe Experimentation
The Preset Preview system allows you to safely experiment with styles without breaking them on your site. You can edit or create presets with confidence, watching every adjustment live in a sandbox that never touches the live page content. This risk-free environment encourages users to try new color combinations, refine shadows, or test typography.
Scalability
Finally, the Preset Manager is built for scalability, making it an ideal companion for complex sites, growing teams, agencies, freelancers, or anyone who wants to create powerful, reusable design systems. If you want to bring consistency to your brand or export presets to jumpstart new builds, this feature grows with you.
Try The Preset Manager In Divi 5 Today!
The new Preset Manager in Divi 5 provides a major leap forward in how you design and maintain consistent websites. By putting full control of your presets into one dedicated tool, it streamlines your workflow, boosts efficiency, ensures harmony in your brand styles, and gives you the freedom to experiment. Whether you’re a freelancer or agency owner, these features make managing presets more productive than ever.
Now is the perfect time to dive into Divi 5. Download the latest Divi 5 Public Beta, experiment with the Preset Manager, and let us know what you think in the comments.
Leave A Reply