Element Presets in Divi 5 let you save a module's design as a reusable preset and apply it anywhere you use that module type.
Style a button once, save it as a preset, and every button that uses that preset will inherit the same look and update when you edit it later.
They are part of Divi 5's preset-based design system, which also includes Default Presets, Option Group Presets, and Design Variables.
Together, these tools give you a clean way to control your site's look without constant manual tweaking.
Where you find and manage Module Presets
You manage Module Presets inside each element's settings.
Open the Divi 5 Visual Builder.
Open the settings of any element (a section, row, column, or module) by clicking on it or by clicking the gear icon.
At the top of the settings panel, look for the Preset icon next to the element name.
From this dropdown, you can:
Apply an existing preset.
Create a new preset from the element's current styles.
Edit an existing preset.
Set a preset as the default for that element type (star icon).
⚠︎ Note: Each element type (for example, Button module, Blurb module, Section, Row) has its own preset list, so button presets only apply to buttons, blurb presets only apply to blurbs, and so on.
What Element Presets are
An Element Preset is a saved configuration of all modified settings for a specific element type:
Colors and typography
Spacing and alignment
Borders, shadows, and effects
Interactions, hover states, and responsive tweaks
When you apply an Element Preset to another element of the same type, it adopts those settings. If you later edit the preset, every element that uses it updates to match.
Key points:
Presets are global for that element type across your site.f
They can use Design Variables so they stay linked to your global colors, fonts, and spacing.
They can also include Option Group Presets so you can reuse shared parts of the design.
Creating a New Element Preset
Open the Visual Builder and add the module you want (for example, a Button).
At the top of the settings, open the Preset dropdown.
Click on the Add New Preset button.
In the Content Tab → Preset Settings → Preset name, give it a descriptive name.
Style it in the Design → Button to match your design requirements.
Click on the Save Preset button.
From now on, that preset is available to every module of that type - in this example is the Button Module - on your site.
If you want every new module of that type to start with this design, click the star icon next to the preset name to set it as the default.
Creating an Element Preset from Existing Styles
You usually create an Element Preset after you have styled something the way you like.
Open the Visual Builder and add the module you want (for example, a Button).
Style it in the Design tab → Button to match your design requirements.
At the top of the settings, open the Preset dropdown.
Choose "New Preset From Current Styles".
Give it a clear name like "Primary Button".
Click the Save Preset button.
Default Presets: Set your baseline styles
Every element type in Divi 5 has a Default Preset. This is the preset that new elements use the moment you add them.
You set the Default Preset by clicking the star icon on a preset in the dropdown.
Editing the default later will update all elements using that default preset.
A simple baseline setup:
A neutral default Section preset (background, padding).
A default Row preset with your usual grid spacing.
Default presets for core modules like Text, Heading, Button, Image, and Blurb.
Once this is in place, most modules you add will already look "on brand" before you touch any settings.
Stacked presets: layering styles on one element
Stacked Element Presets let you apply multiple Element Presets to the same element and layer them.
Think of one element having:
A base Module Preset (for example, choosing the font, font size, and the icon of a Button module).
A custom Button Icon Element Preset (for example, changing the default button's icon).
Both of these can be active at once. Divi combines the styles from both element presets, and when two element presets define the same property, the last one applied wins. Order matters, just like CSS: later layers override earlier ones when they touch the same thing.
Practical uses:
Start with a base Row Element Preset, then stack a second element preset that changes its default padding values.
Use a base Column preset, then stack a "Background / Dark" preset when the Column sits in a dark section/Row.
Stacking lets you keep your core presets simple and reuse small variation presets as needed.
Nested presets: Option Group Presets inside Module Presets
Nested Presets let you include Option Group Presets inside an Element Preset.
When you apply the Element Preset, it brings those Option Group Presets with it and keeps them linked.
How it works:
Open a module that already uses the Module Preset you want to edit.
In the preset dropdown, hover the preset and click the gear icon to edit it globally.
Inside the preset editor, go to a group like Spacing, Borders, or Shadows.
Apply existing Option Group Presets instead of manual styles.
Save the Module Preset.
Now that Element Preset is built from Option Group Presets.
If you later edit the Spacing Option Group Preset, every Element Preset that uses it updates, and every element using those presets updates too.
Example:
You create Option Group Presets for Spacing, Border Radius, and Box Shadow.
You then build an Element Preset for the Row, for each of those option groups, select their respective option group presets.
You will end up with a Row Element Preset that contains the Spacing, Border Radius, and Box Shadow options group preset.
If you change the Spacing option group from anywhere else, the changes will also apply to the Row that uses that Element Preset.
How stacked and nested presets work together
Nested presets define the internal logic of a component (for example, what makes a card a card: its spacing, typography, corners, and shadow).
Stacked presets handle the variations that sit on top of that component (for example, light vs dark version, hero vs compact, with or without border).
You get:
Consistent components because nested Option Group Presets control their core rules.
Flexible variations because stacked presets only override what needs to change in context.
This makes your preset library smaller and clearer: a few base Module Presets, a set of Option Group Presets, and a handful of variation presets you stack when needed.
Workflow: using Module Presets for advanced styling
A simple Divi 5 workflow that takes advantage of Element Presets, Option Group Presets, and stacking:
Set your variables
Define Global Variables for colors, fonts, and key spacing steps in the Variable Manager.Create base Module Presets
For each core element (Section, Row, Column, Text, Heading, Button, Image, Blurb), create one clean base preset that uses your variables. Set the ones you use most as defaults.Create Option Group Presets for repeat patterns
Turn recurring design decisions (for example, standard card padding, standard shadow, standard button style) into Option Group Presets.Nest Option Group Presets inside Module Presets
Edit your Module Presets and replace manual styles with Option Group Presets wherever possible.Use stacked presets as variation layers
When you need a special case (hero area, dark section, compact card), stack one or two variation presets on top instead of building a completely new Module Preset.
Applying presets while you build
Day to day, using presets is straightforward.
When you add a new module, it uses that module type's default preset automatically.
To switch to another Module Preset, open the module settings and pick a different preset from the dropdown.
To stack presets, use the preset controls on the element to add multiple presets and adjust their order when needed.
To apply Option Group Presets (for example, a shared Button style), go into the group's settings and pick a preset from the group's preset icon.
You can also assign certain Option Group Presets as defaults so that, for example, all button groups across all modules start with the same preset.
Editing and maintaining Module Presets
To edit a Module Preset globally:
Find any module that uses the preset.
Open its settings and go to the Preset dropdown.
Hover the preset name and click the gear icon.
Adjust styles in the preset editor.
Click the Save Preset button to apply the changes everywhere that preset is used.
To change which preset is the default for a module type:
Open the preset dropdown for that module.
Click the star icon on the preset you want as the default element preset.
If a single module needs to opt out of presets, you can open the Element Preset dropdown and uncheck any of the selected element presets.
Practical examples
Here are a few simple patterns you can build with Module Presets in Divi 5:
Button system
Base Module Preset Button / Base.
Option Group Presets for Button Text, Button Spacing, and Button Border.
Stacked presets like Button / Hero, Button / Ghost for context-specific tweaks.
Card grid
Row Module Preset Cards / Row.
Column Module Preset Cards / Column that nests padding, radius, and shadow option group presets.
Stacked presets for Cards / Dark, Cards / Compact, when you need variations.
Typography system
Text and Heading Module Presets for base heading and body styles.
Typography Option Group Presets for H1, H2, Body.
Apply typography presets inside other modules (CTA, Blog, Woo modules) to stay consistent.
Once you lean on Elements Presets, Option Group Presets, and stacked layers, most of your "advanced styling" becomes a matter of combining the right presets instead of reinventing designs on every page.