In Divi 5, the Preset Manager and Preset Preview systems give you a central place to manage all your presets and a safe preview area to edit them without touching your actual page content.
You can browse every preset on your site, edit and reorder them, and see the results in a dedicated preset previewer before you commit.
You can also import and export presets and variables, which makes it easy to reuse a full design system on new sites.
What are the Preset Manager and Preset Preview systems?
Preset Manager: A sidebar tool that lists every preset on your site (for modules/elements and option groups) in one place.
From here, you can create, edit, duplicate, delete, reorder, and set defaults for your presets. The list is searchable and filterable, so it scales well even when you have a big library.
Preset Preview system: A dedicated preview panel that appears when you add or edit a preset from the Preset Manager. It shows a live sample of the preset and lets you tweak it without affecting the page you are currently editing.
You can even test it against different background colors based on your site’s color variables.
Together, they turn presets into a proper design system manager rather than something you only touch from individual modules.
Where to find the Preset Manager
You access the Preset Manager from the Divi 5 Visual Builder sidebar.
Open any page in the Divi 5 Visual Builder.
Look in the left sidebar for the Preset Manager icon
(it sits alongside tools like the Variable Manager and Style Inspector).Click the icon to open the Preset Manager panel.
Inside, you’ll see:
A list of all element/module presets (Element Presets).
A list of all option group presets (Option Group Presets).
Search and filters to narrow down what you’re looking for.
You can work on presets without selecting anything on the page, which is a big shift from editing them only through individual modules.
Managing presets from one place
The Preset Manager is your central control panel for presets. From here you can:
Create new presets
Add new Element Presets for modules and layout elements.
Add new Option Group Presets for specific groups like Typography, Button, Border, Spacing, etc.
Edit existing presets
Open any preset in editing mode and adjust its settings.
Changes apply across your site to every element using that preset.
Duplicate presets
Clone a preset as a starting point for a variation (for example, duplicate a base button preset to make an “outline” version).
Delete presets
Remove presets you no longer need to keep your library tidy.
Set default presets
Mark any Element Preset as the default for that module/element type so all new elements start with those styles.
Because the list is searchable and filterable, you can quickly jump to, say, all Button presets or all presets related to a specific module type and adjust them in one focused session.
Using the Preset Preview panel
When you add or edit a preset from the Preset Manager, Divi 5 switches into preset editing mode:
The settings panel is now editing the preset itself, not a specific module on your page.
A Preset Preview panel appears to show what the preset looks like on a sample element.
Key benefits:
No disruption to page content
You are not editing real page modules while you tweak presets.
Your current page layout stays as it is until you save and exit preset editing.
Live preview of changes
As you change options in the settings panel, the preview updates in real time.
You can see exactly what the preset will look like before you apply it across your site.
Preview on different backgrounds
You can test the preset against different background colors pulled from your site’s color variables.
This is especially useful for checking contrast and readability for buttons, text, and card styles on light vs dark sections.
This workflow lets you design and refine presets as reusable components away from the distractions of a complex page.
Preset sorting and ordering
The Preset Manager also lets you reorder presets, and that order is reflected in the preset select menus you see in module settings.
You can:
Drag presets to rearrange them.
Move your most-used presets to the top.
Organize variations (for example, Primary, Secondary, Tertiary) in a logical sequence.
This seems small, but it makes a difference when you pick presets dozens of times a day. You see your favorites and base system presets first instead of hunting through the full list.
Importing and exporting presets and variables
The Preset Manager connects to Divi 5’s design system export tools. You can export and import:
All presets on a site.
All variables on a site (Global/Design Variables).
From the Preset Manager (and Variable Manager), you’ll find an import/export icon:
Export presets
Click the export icon to download a file containing your site’s presets.
Use this as your “preset starter kit” for new projects.
Import presets
On a new site, open the Preset Manager.
Click the import icon and upload the exported file.
The presets become available immediately in the builder.
Use cases:
Share a preset library across multiple client sites.
Maintain your own design system and reuse it across projects.
Standardize button, typography, card, and layout presets for a whole team.
Variables (colors, fonts, spacing numbers, text, links, images) can be exported and imported in the same way, so you can move your entire design system, not just presets.
How to use these systems in your everyday workflow
Here’s how the Preset Manager and Preset Preview systems typically fit into daily Divi 5 work.
1. Design and refine your preset library
Open any page in the Visual Builder.
Open the Preset Manager and run through your main modules: Buttons, Text, Headings, Blurbs, Cards, Woo modules, etc.
For each, create clear, well-named presets (using your existing Module Preset and Option Group Preset articles as your internal reference) and refine them using the Preset Preview panel.
You are effectively building your design system here.
2. Organize and prioritize your presets
Use sorting to move base presets and most common variations (Primary, Secondary, Light/Dark) to the top.
Archive or remove experimental presets you no longer need.
This keeps preset selection simple when you’re in the flow of building pages.
3. Build pages using presets first
On real pages, rely on presets (Element Presets + Option Group Presets) as your first choice before doing one-off tweaks.
Because the Preset Manager and Preview make it easy to adjust presets, you spend less time micro-editing single modules and more time improving the core presets.
4. Iterate on your design system safely
When something about your site’s look needs to change:
Open the Preset Manager instead of editing individual pages.
Edit the relevant preset in preset editing mode, watching the Preset Preview panel until it feels right.
Save the preset and then check a few key pages to confirm everything looks good.
You get global changes, guided by a controlled preview, rather than risky edits on live modules.
5. Reuse your system on new sites
Once you have a set of presets and variables you like:
Export your presets and variables.
Import them into new Divi 5 sites as a starting point.
That way, every new project starts with a familiar, proven design system instead of from scratch.
When you combine the Preset Manager, Preset Preview panel, presets themselves, and your global variables, Divi 5 turns into a design system tool, not just a page builder. You define how things should look once, preview them safely, and then reuse that work everywhere.