As a website grows, small styling differences, such as a border radius on a button or spacing in a heading, begin to appear across pages. Fixing them means repeating the same changes over and over. We introduced Presets a while ago and continued to build upon the system. Divi 5 now takes it further with Nested Presets, providing a smarter way to bundle and update styles in a few clicks.
For the purpose of this post, we will focus solely on Nested Presets, with a separate article covering Stacked Presets. We’ll explain what Nested Presets are, how they build on Divi 5’s Preset system, and provide a step-by-step guide on how to use them.
If you haven’t already, download the latest Divi 5 Public Beta to follow along. Let’s get started.
What Are Nested Presets?
Nested Presets bring a hierarchical structure to Divi’s Preset system. Create Option Group Presets for specific styling, like text formatting, border radius, background colors, or spacing. These are then nested inside an Element Preset, which covers the full styling of a module, such as a Blurb, Button, Group, or Call To Action. The result is a self-contained, reusable design component. Apply an Element Preset, and all Nested Preset styles are automatically included.
Nested Presets are an enhancement to Divi 5’s existing preset system. They add multi-level organization, giving you finer control over how styles are saved, applied, and updated.
Divi 5 Preset Differences
Let’s briefly compare the different types of presets you can find in Divi 5.
- Default Presets: These are the built-in starting styles that come with every Divi module. They provide a clean, consistent base that you can easily modify or replace.
- Element Presets: These allow you to save the complete style of a module, section, column, or row, including all of its design settings — everything from layout to typography to effects.
- Option Group Presets: You can target a single option group, such as the Heading Module’s heading text settings, the Image Module’s spacing or border settings, or the Circle Counter Module’s layout settings.
- Nested Presets: Allows for embedding Option Group Presets inside an Element Preset, so styles inherit and update together.
Key Features Of Nested Presets
Nested Presets work on two levels. First, you create Option Group Presets for specific design groups, like border styles or background settings. Then, you nest Option Group Presets inside an Element Preset, which captures the complete look of a module, such as a Blurb or a Button.
Bundling presets in this way keeps related styles together for reuse across an entire page or website. When you apply the Element Preset to a module, all nested option styles are added instantly. This makes setting up new elements faster and reduces the chance of missing the small details.
One of the most useful aspects is the ability to update presets globally. Change a nested Option Group Preset in one place, and every module using the parent Element Preset reflects the update right away. This is especially helpful when refining a design across multiple pages.
Nested Presets also keep you from being locked into a predefined style. If a specific instance needs a tweak, you can adjust it manually. The change stays local, and the module still retains its link to the Preset for future updates to shared styles.
Benefits Of Nested Presets
It’s A More Efficient Workflow: Nested Presets make styling faster by eliminating repetitive work. Instead of adjusting the same border, spacing, or typography settings on every new module, you apply a single element preset and move on. This leaves more time for layout ideas, content placement, and quick iterations.
Consistency And Scalability: As your site grows, Presets maintain a cohesive styling. Whether it’s a client project, an agency template, or a large portfolio site, the same style remains consistent. A change in one place updates everywhere else, ensuring the design remains uniform without the need for constant checking. For example, you could add 25 additional pages, and each one will retain the same styling.
Improved Organization: Nested Presets also help with organization. Styles are grouped in a clear hierarchy, with Option Group Presets nested within Element Presets, making it easier to find, review, and adjust design assets, even in large or complex layouts.
It’s A Simple System: Nested Presets are also incredibly simple. Inheritance works automatically, allowing you to build dynamic designs quickly. The result is a clean, efficient system that scales with your projects.
How Nested Presets Work
In this section, we’ll walk you through creating an Element Preset, Options Group Preset, and Nested Presets. By the end, you’ll have a better understanding of how they work and what an asset they are to Divi users of all skill levels.
Step 1: Create Option Group Presets
Start by adding three Blurb Modules to a page in the Visual Builder. Style the first one as you’d like.
With the Blurb’s style in place, we can create our first Option Group Preset. Expand the Layout menu in the Design tab. Adjust the Vertical Gap to 25px. Hover over the top right corner of the Layout menu options to reveal the Preset icon. Click it to bring up the settings menu.
Click New Preset From Current Styles.
Add a Preset Name and then click the Save Preset button.
Repeat the steps to create Option Group Presets for the Title Text, Body Text, Spacing, and Border Radius.
Lastly, create an Option Group Preset for the Blurb’s Background settings in the Content tab.
Now we have multiple Option Group Presets that can be applied to other modules as we continue to design our webpage.
Step 2: Create an Element Preset
With Nested Presets in Divi 5, we can create an Element Preset from our Blurb while simultaneously preserving all Option Group Presets contained within it. Hover over the top right of the Blurb’s Content tab to reveal the Preset icon.
When the modal appears, click the New Preset From Current Styles button.
When the settings appear, you’ll notice the Option Group Presets we created in the last step are embedded.
Add a Preset Name and then click the Save Preset button.
Step 3: Applying The Element and Option Group Presets
Divi 5 makes it easy to apply Element Presets to additional similar modules throughout your design. Click on the second Blurb module we created in the first step. Click on the Preset icon and select the Element Preset we created in the second step.
With Option Group Presets, you can easily apply them to other modules, regardless of the type of module you use. For example, we created an excursions section for our page. To keep headings consistent across all cards, we can apply the Heading Option Group Preset to the Heading Modules in each excursion card.
The Option Group Preset we created for the Blurb Module’s Body Text can be directly applied to any other module that contains the Body Text option group.
Here’s another example. Let’s say you have an Option Group Preset tied to an H1 heading. You can apply that Preset, keep the same styles, and change the Heading Level to H2 without disturbing the styles associated with the preset.
Step 4: Swapping Nested Presets
If you decide to change the look of an element entirely but want to keep the Preset structure in place, you can edit it with a few clicks. Click to edit one of the Blurb modules for which we created a preset in a previous step. Click the Preset to edit it.
When the list of Presets appears, click the Settings icon next to the Preset you want to edit.
You can easily swap out Nested Presets by clicking on one and swapping it for another.
Using this system, you can make quick design changes in a fraction of the time.
Step 5: Make Manual Adjustments When Needed
If you need to make changes to one design element without it affecting the Preset associated with it, you can manually make changes at the module level. For instance, when making responsive adjustments, you may notice instances where a longer headline wraps awkwardly on some headings.
You can make adjustments to the affected modules only, without having to rebuild the Preset.
To download the working files from this article, fill out the form below to be added to our newsletter.
Try Nested Presets In Divi 5 Today!
Nested Presets in Divi 5 transform the way you approach styling, shifting web design from a repetitive, manual grind to a strategic, scalable process. By bundling Option Group Presets into Element Presets, you can create reusable design components that apply complete styles in a few clicks, update globally with ease, and maintain consistency across all screen sizes.
We encourage you to download the latest Divi 5 Public Beta, experiment with Nested Presets, and share your thoughts in the comments below.
Leave A Reply