This is Part 4 of the Divi 5 Mastery Course. In Part 3, you built a library of Design Variables for the sample coworking space website.
Now you will turn those variables into a reusable design system using Divi 5 presets. By the end, you will have created the core Option Group Presets and Element Presets you need before building the homepage in Part 5.
Why Build a Preset System Now
The Divi 5 design system follows a clear hierarchy. Design Variables form the base layer. Option Group Presets save the styling for a single option group. Element Presets combine those groups into complete, ready-to-use elements. You then use those presets to build pages and Theme Builder templates.
Creating presets now gives the whole site a consistent foundation:
You build faster because you can apply a full set of styles in a few clicks instead of adjusting typography, spacing, colors, and borders on every module.
Styling stays consistent across the homepage, inner pages, and templates.
Updates get easier. Revise a color, spacing value, or button style in one preset, and the change appears everywhere that preset is used.
Getting Started with the Preset Manager
Open a page in the Visual Builder and open the Preset Manager by clicking the Preset Manager icon
in the left sidebar. This is your control center for creating, organizing, editing, duplicating, reordering, and setting default presets.
Presets are organized by element type:
Element Presets are presets that are assigned to an element, for example, Heading, Blurb, Call to Action modules, etc.
Option Group Presets are presets assigned to individual option groups such as the Background option group, the Heading option group, the Text option group, etc.
Expanding an element's menu reveals the presets for that element — for example, expanding the Heading menu shows the presets available for Heading modules. When a preset is assigned to a module, it appears next to the module title in the settings panel. Rather than hunting through individual modules to manage shared styles, come here to manage them in one place.
Edit an Existing Preset
Click on the edit button (the pencil icon) in the Preset Manager
This opens the Preset Preview, where you can review and adjust the preset before saving your changes. For example, when editing a heading preset, you can preview how the heading will look before committing the update. Once saved, those changes apply everywhere that the preset is used.
Create Option Group Presets
Option Group Presets let you save the styling for a single option group and apply it wherever that same option group appears. Because they are modular, you can mix and match them instead of locking every design choice into one full-module preset.
💡Pro Tip: Create option group presets before you build complete Element Presets.
The basic workflow is the same for any group:
Style an element,
Save the relevant option group as a reusable preset,
Apply that preset wherever you need the same style again.
Example: Create a Heading Text Option Group preset
Open the Heading module's settings.
Go to the Desing tab → Heading Text.
Hover over the option group's title and click the Option Group Preset icon
.If you have already added local styles, click the New Preset From Current Styles, or if you want to create the preset from scratch, click the Add New Preset.
Give your preset a descriptive title.
Make the desired changes.
Click the Save Preset Button.
Typography Presets
Because typography appears on nearly every page, start with headings and body text. Style the Heading Text and Body Text groups using the fonts and fluid number variables you created in Part 3, then save each as an Option Group Preset. You can then apply the body text preset to any other module that includes the same Body Text group.
Spacing Presets
Create Spacing presets to keep a consistent rhythm across sections, rows, columns, groups, and modules. Apply the same preset to any element with a Spacing group so content areas share the same breathing room.
Border Presets
Border presets give columns, images, groups, and other modules a clean, unified look. Style the group with your border width and rounded-corner variables, then save it as a new Option Group Preset.
Button Presets
Buttons appear throughout a site — hero sections, pricing tables, CTAs, forms, and opt-ins — and often live inside other modules, so saving them as Option Group Presets is especially useful. Add an Email Optin module (or any module with a button), style the Button group using your Part 3 variables, then save it as an Option Group Preset. Apply it to any module that includes a button group to keep button styling consistent sitewide.
Core Option Group Presets to Create
Option Group | Preset Name | Associated Variables | Values |
Border | Top Border | Border Width | 1px |
Border | Outlined - Dark | Rounded Corners - Regular | 8px |
Border | Rounded - Regular | Rounded Corners - Regular | 8px |
Border | Bottom Border | Border Width | 1px |
Spacing | Padding - Medium | Spacing - Medium | 30px |
Spacing | Padding - Large | Spacing - Regular | 60px |
Font Body | Dark Text | Text Color: Body Text Color | #000000 |
Font Body | Small Text | Text Size: Body Small | clamp(0.8125rem, 0.2824vw + 0.7442rem, 0.9375rem) |
Buttons (inside other modules) | Filled - Primary Color | Background: Primary Color variable | #2176ff |
Buttons (inside other modules) | Filled - Black | Background: Primary Color variable | #000000 |
Buttons (inside other modules) | Filled - White | Background: White variable | #000000 |
Buttons (inside other modules) | Text - Primary Color | Background: White, 0% opacity | #ffffff |
Buttons (inside other modules) | Text - White | Background: White, 0% opacity | #ffffff |
Heading Text | Heading 1 | H1 variable | clamp(1.75rem, 4.4975vw + 0.6254rem, 3.75rem) |
Heading Text | Heading 2 | H2 variable | clamp(1.5rem, 2.2596vw + 0.9534rem, 2.5rem) |
Heading Text | Heading 3 | H3 variable | clamp(1.25rem, 1.4122vw + 0.9085rem, 1.875rem) |
Heading Text | Heading 4 | H4 variable | clamp(1.0625rem, 0.9831vw + 0.8155rem, 1.5rem) |
Heading Text | Heading 5 | H5 variable | clamp(0.9375rem, 0.7007vw + 0.7588rem, 1.25rem) |
Heading Text | Heading 6 | H6 variable | clamp(0.875rem, 0.2824vw + 0.8067rem, 1rem) |
Body Text | Dark Text | Body Text Color | #000000, 70% opacity |
Body Text | Small Text | Body Small | clamp(0.8125rem, 0.2824vw + 0.7442rem, 0.9375rem) |
Background | Background - Light Gray | Background - Light Gray | Hex color: #f5f5f5 |
💡Pro tip: The blog post includes a checklist table of the essential Option Group Presets - typography, spacing, border, and button - with the exact Design Variables to use for each. Use it as your guide when building out the full set. See the full tutorial linked below for the complete table.
Create Element Presets
An Element Preset saves the complete styling for one element type - a Button, Blurb, Image, Section, Row, Column, or Group.
The difference from an Option Group Preset is scope: an Option Group Preset saves styles for one category and applies wherever that group exists, while an Element Preset saves the full design for a particular element.
Element Presets can also contain nested Option Group Presets. For example, a Blurb Element Preset can nest presets for title typography, body text, spacing, background, and border. You get the speed of applying a complete module design while keeping the smaller decisions easy to update.
A few key Element Presets to build for the course:
Primary Button - combine your button Option Group Preset with any additional styling into a one-click button element.
Email Opt-In - combine the button preset with title typography, description text, and field styling so you can drop consistent opt-in forms onto any page.
Module Group - add a Group module, place related modules inside it, and save the container as a reusable Element Preset for feature cards, pricing cards, or testimonial blocks.
Because these presets use nested Option Group Presets, updating a nested group flows the change through every Element Preset that uses it.
💡Pro tip: The blog post also provides a checklist table of the Element Presets you'll need for the homepage, along with the Option Group Presets and Design Variables each one uses.
Stack and Nest Presets
Once you have several presets, you can stack them on a single element, with each preset handling a different styling job. A Blurb module is a good example, since it's commonly used for features, services, and testimonials.
Add or open a Blurb module and click the preset icon next to the module header.
Choose your first preset from the list.
Click the applied preset to open the preset options, then select a second preset.
Divi 5 applies the styles from both presets to the same module. When you update one of the underlying presets, every module using it updates too.
Presets Best Practices
Preview before saving. Click the pencil icon to open a preview panel where you can test a preset against sample content and different background colors. Remember that saved changes are global — once saved, every element using the preset reflects the update.
Set defaults. Open a module, select the applied preset in the module header, and click the star icon to make it the default for that element type. New modules of that type then start with the preset already applied.
Name presets clearly. Use role-based names for reusable design decisions and component-based names for complete Element Presets. Consistent names make presets easy to find as your library grows.
Export your library. Once you have a reliable set, export it as a backup and to reuse the system on other sites or share it with your team. You can import a ready-made JSON preset library to get a head start — just make sure the Design Variables it references already exist on the site.
Core Element Presets to Create
Module | Preset Name | Option Group Presets | Variables |
Heading | Heading 1 - Big | N/A | H1 Desktop Big: clamp(3rem, 7.3219vw + 1.1924rem, 6.25rem) |
Heading | Heading 1 | N/A | H1: clamp(1.75rem, 4.4975vw + 0.6254rem, 3.75rem) |
Heading | Heading 2 | N/A | H2: clamp(1.5rem, 2.2596vw + 0.9534rem, 2.5rem) |
Heading | Heading 3 | N/A | H3: clamp(1.25rem, 1.4122vw + 0.9085rem, 1.875rem) |
Heading | Heading 4 | N/A | H4: clamp(1.0625rem, 0.9831vw + 0.8155rem, 1.5rem) |
Heading | Heading 5 | N/A | H5: clamp(0.9375rem, 0.7007vw + 0.7588rem, 1.25rem) |
Heading | Heading 6 | N/A | H6: clamp(0.875rem, 0.2824vw + 0.8067rem, 1rem) |
Text | Dark Text | N/A | Body Text Color (color) |
Text | Light Text | N/A | White (color) |
Text | Small Text | N/A | White (color) |
Button | Filled - Primary Color | Filled - Primary Color | Button Vertical Padding |
Button | Text - Primary Color | Text - Primary Color | Button Font Size |
Button | Filled - Black | Filled - Black | Button Vertical Padding |
Button | Filled - White | Filled - White | Button Vertical Padding |
Image | Rounded | N/A | Rounded Corners - Images |
Video | Rounded | N/A | Rounded - Regular |
Icon | Dark - Small - Contained | N/A | Color variable: White |
Icon | Dark - Small | N/A | N/A |
Icon List | Light Text | N/A | Heading Text Light (color) |
Blurb | Dark Text | Heading 5 | Rounded Corners - Images |
Blurb | Dense | Small Text | Body Small: clamp(0.8125rem, 0.2824vw + 0.7442rem, 0.9375rem) |
Group | Contained - Light | Padding - Medium | Spacing - Medium |
Group | Contained - Dark | Padding - Medium | Spacing - Medium |
Countdown Timer | Light Text | Heading 3 | H3 |
Accordion | Dark Text | Heading 6 | Black (color) |
Menu | Dark Text | N/A | Menu Text Color: Black (color) |
Social Media Follow | Isolated Icons – Dark | N/A | Horizontal Gap: Border Width - Buttons Icon Color: Black (Color) |
Social Newtork | No Background | N/A | Background Color: Black (color) with 0 Opacity |
Social Media Follow | Isolated Icons – Light | N/A | Horizontal Gap: Border Width - Buttons Icon Color: White (Color) |
Download the Presets
Download the JSON file from the link above.
Open any page in the Visual Builder.
Click on the Presets Manager icon
in the left SidebarClick on the Import/Export icon
.Choose the JSON file.
Read the Full Tutorial
Read the complete step-by-step guide on the Elegant Themes blog: Part 4: Mastering Divi 5 Presets For Faster, More Consistent Web Design.