Stacked and nested presets in Divi 5 let you apply multiple design presets at once and even nest option‑level presets inside element presets.
This feature expands the preset‑based design system, making it easy to manage consistent styles across your site. When you master these features, you can streamline your workflow and maintain a coherent design system across modules, rows, and sections.
What Are Divi Presets?
In Divi 5, a preset is a collection of styles that you can apply to modules, columns, rows, and sections. You might create a preset that defines button colors, typography, or spacing.
When you edit a preset, all elements using that preset update at once, saving time and ensuring consistency. Presets are more than CSS classes; they include structural output, backend logic, and scripts, so they handle both appearance and behavior.
Understanding Stacked Presets
Stacked presets allow you to apply more than one preset to an element or group. This means you can layer design attributes from several presets.
Example:
You might have a "Dark Mode" preset that turns text white and a "Left Image" preset that aligns images to the left. In earlier versions, you had to pick one preset. With stacking, you can apply both, so the element inherits the white text from the dark mode preset and the left‑aligned image from the alignment preset.
How to Access Stacked Presets
Open the section/row/column/module settings by clicking on it
Click on the Module Preset icon
Select one or multiple existing module presets
⚠︎ Note: Order matters; Divi applies presets in the order you add them.
Adjust as needed: If in multiple presets the same options are set, the later presets override earlier ones for overlapping options.
Understanding Nested Presets
Nested presets let you place option‑level presets inside element presets. Option‑level presets handle a single design option, such as border radius or title text styling.
Example:
You might create a "Rounded Corners" option preset that sets a consistent border‑radius.
You can then nest this preset inside a "Blurb Module" element preset. Whenever you apply the blurb preset, Divi automatically applies the rounded corners.
If you update the rounded corners preset later, every element using it - even those nested inside other presets - updates instantly.
How to Access Nested Presets
Create an option preset: In the settings panel of any module, locate an option group (e.g., Border). Configure the style (e.g., 8 px radius) and save it as a new preset.
Nest inside an element preset: Edit or create an element preset (e.g., a blurb module preset). In the preset settings, look for a section allowing you to add option presets. Select your option‑level preset to nest it.
Apply the element preset: When you apply the element preset to a module, Divi automatically applies its nested option presets. You can still apply the option preset directly to other elements if needed.
Nested presets help you manage design tokens - like typography, borders, and backgrounds - in one place. By nesting them inside element presets, you reduce the number of presets you have to apply manually and ensure that consistent styles propagate site‑wide.
Combining Stacked and Nested Presets
You can combine stacked and nested presets to build sophisticated design systems. For instance, stack a dark‑mode preset with an image‑alignment preset and nest a typography option preset inside an element preset.
This way, when you apply the element preset, it includes the nested typography styles, and you can stack additional presets on top for context‑specific adjustments. Because presets update all linked elements, changes propagate instantly, saving you time and keeping your site consistent.
Tips and Tricks
Plan your presets: Identify base styles (e.g., dark mode, light mode, primary buttons) and build presets around them. Keep option presets focused on single design properties.
Test stacking order: If two presets set the same option (like text color), the later one in the stack takes precedence.
Use Divi 5 design variables: Combine presets with design variables to adjust colors, fonts, and spacing globally. This makes your design system more scalable.
Experiment in a staging site: Try stacking and nesting presets on a test page to understand how they interact before applying them to a live site.