Skip to main content
All CollectionsDiviUsing The BuilderGlobal Style Management
Using Divi Presets
Using Divi Presets

Divi Presets dramatically speeds up your design process by allowing you to take any element's design and apply it to other modules.

Updated over a week ago

Divi is highly customizable, allowing you to make modules and other Divi elements look any way you want.

Example: You can take any Divi Blurb module and add a background color, adjust the title's text size, font, and color, add animation, or assign an image or icon.

Divi Presets enhances the design experience by allowing you to take that Blurb's design settings and apply them to any blurb on your site by saving the design settings as a preset.

When you use Divi Presets, you can create a global design setting for the Blurb module or any other Divi modules and save those settings for future use across your website.

How Divi Presets Work: Brief Overview

Using Divi presets is a huge time saver when creating or altering websites.

Example: If you are building a new website and want to use a Divi layout pack, you can create presets from those elements to use on additional pages you create

Divi Presets can be applied to any element, including:

  • Modules

  • Sections

  • Rows

  • Columns

For instance, if you create a nice hero section with a background color and pattern applied, you can save the section as a preset for use on other sections throughout your website.

Divi presets

Note: Presets are specific to the element. You can't use one preset from one module type on another.

The Divi Presets Interface

To better understand how presets work, look at the settings below.

Divi preset interface

  1. Preset Dropdown Menu – See your module's active preset. Click the dropdown menu to manage your presets library.

  2. Default Preset – This is your default preset. Select it to activate the default module appearance.

  3. Assigned Default Preset – This star signifies which preset is your default preset. All basic modules will use this preset as their default appearance. Click this star icon within any preset to make it the default preset.

  4. Selected Preset – The green check mark signifies which preset is assigned to your edit module. The module's base styles are controlled by the selected preset.

  5. Edit A Preset – Click this pencil icon to edit the design of a preset. When you edit a preset's design, all modules using that preset will appear new.

  6. Manage Preset Settings – Change the preset's name to better organize it within your library.

  7. Update Preset With Current Styles – This will update the preset to match the current design of the module you are editing.

  8. Duplicate Preset – You can duplicate any of your existing presets. This is a great way to create different variations without starting from scratch.

  9. Delete Preset – Deleting a preset will remove it from your library. All modules using that preset will switch to the default preset.

  10. Create New Preset From Current Styles – This will create a new preset to match the module's design you are currently editing. If you want to reuse pre-designed elements throughout your website, you can quickly turn them into presets.

  11. Add New Preset – This will add a new blank preset. You can then customize the preset using the module's available design settings.

When to Create Divi Presets

To make the most of Divi's presets, you should apply them at the beginning of the design process.

That way, you can set everything up from the start, saving yourself a lot of time. As you add pages, your presets can be applied to new modules.

You won't have to worry about writing down hex codes, padding and margin settings, font sizes, font families, or any other design element.

Apply a preset and move on to the next element you wish to build.

Divi presets

Adding a New Preset

Adding a new Divi preset is simple.

  1. Add an element

  2. Click the Add new preset button

  3. Design your element and save it by clicking the green check box

Alternatively, you can design your module and then save the preset.

  1. Click the presets at the top of the elements's settings

  2. Click the dropdown arrow under presets

  3. Click Create New Preset From Present Styles

Adding a new preset

Updating Default Styles with Presets

Once a preset has been created, you can update existing modules on your page by applying a saved preset.

Example: If you create a preset for a button, you can easily add or change existing buttons on your page and then apply the saved preset.

All your design styles will be updated instantly with your saved preset's styles.

Adding a New Preset

Naming Your Preset

You'll be prompted to name your preset once you click the Create New Preset From Present Styles button. Alternatively, you can click the Add New Preset button to save and style your preset.

name your preset

It's important to name your presets something that you recognize. Otherwise, you'll need help deciphering which preset to use when creating new elements.

  • For headlines, use names like main headline or secondary headline

  • For the Body text, use body text or something similar

If you use multiple styles for the same element, each should be named accordingly to understand presets created for the same module style.

Styling a Preset

When you want to style a preset, you'll need to create a new preset and then style your element.

  1. Open the module's Settings modal window

  2. Clicking the dropdown arrow next to presets

    preset dropdown menu

  3. Click the add new preset button
    ​

    create new preset

  4. Name your preset

  5. Click the green check button to save it
    ​

    name and save

  6. Style the element as you wish

  7. Click the Green Checkmark button to save your element
    A modal will appear asking if you want to proceed with saving

  8. Click Yes

  9. Save your module by clicking the Green Checkmark button

    design and save

Applying Divi Presets to New Modules

Divi makes it easy to apply presets to new modules. This is especially beneficial when creating new pages to which you wish to apply the same styles.

  1. Click the Presets dropdown arrow

  2. Select the preset you'd like to apply.
    Remember, presets are module-specific. Ensure that you're applying the same module preset when creating new modules. For example, text modules must have a text preset, blurbs must have Blurb presets, and so on

  3. Save your module by clicking the Green Checkmark button

apply preset

Creating a New Divi Preset From a Current Style

As mentioned, you can create a new preset from a currently styled element.

We'll use Divi's pricing module as an example. A styled element can be saved as a preset.

  1. Click the presets dropdown menu

  2. Select the Create New Preset From Current Styles button

  3. Name your new preset

  4. Save it

To apply the styles in another pricing module:

  1. Click to edit the new Pricing module

  2. Select the presets dropdown menu

  3. Click on the preset name that you want to apply to the new module

  4. Save the module by clicking the Green Checkmark button

Your new pricing module is styled instantly, reflecting your saved preset styles.

Editing Divi Preset Styles

Editing existing preset styles is a breeze.

  1. Click on any element that currently has a preset applied

  2. Click the dropdown arrow next to the presets

  3. Hover over the currently applied preset

  4. Click the pencil icon

  5. Make the design changes you'd like to implement

  6. Click the Green Checkmark button to save it

You'll notice that any module with that preset applied will adjust to reflect your changes.

edit preset

The module's settings background will turn gray to indicate that changes are being made as a preset.

save changes to preset

Note: If you edit a preset, those changes will be reflected wherever that preset is being used.

Overriding Divi Preset Styles

The Design styles from a preset can be overridden by applying new design styles to the module's regular Design tab.

For example, if a Text module has a Preset assigned that sets the following design styles for the Heading level 1:

  • Heading Text Size: 80px

  • Heading Text Color: orange

  • Heading Letter Spacing: 0.05em

The entire modal settings window's background is Slate Gray - indicating that we are editing a module's preset.

We can override those preset styles by setting the same Desing settings on the module level in the Design Tab.

The entire modal settings window's background is Purple - indicating that we are editing the module.

Importing and Exporting Layout With and Without Your Divi Presets

You can do so with or without presets when importing a previously saved layout.

Both can be useful when incorporating your layouts into other Divi websites. When you export a layout, your presets are automatically saved and included in the export.

Exporting a Page Layout with Divi Presets

When exporting a Divi layout, presets will be saved with your layout.

  1. Enable the Visual Builder.

  2. Click on the purple ellipsis icon at the bottom center of your screen.

    Export Divi layout with presets

  3. Click the import/export icon.
    ​

    Divi import export icon

  4. Name your layout, then click the Export Divi Builder Layout button.
    ​

    Export your Divi layout

Your layout will be saved as a .json file that can be imported into another page of your site and another Divi website.

Importing a Page Layout with Divi Presets

When importing a Divi page layout, you can choose whether or not you'd like to include presets. There are several ways that you can do this.

The first way is in the Divi Page Builder back end.

  1. Click the import/export icon at the top right of the Divi Page Builder settings.
    ​

    import layout

  2. Click the Import tab.

  3. Choose the .json file containing the page layout to be imported.

  4. Choose whether or not to include presets by ticking the Import Presets checkbox.

    divi builder layout import

  5. Click the Import Divi Builder Layout button.

Your page will refresh and reveal that the new layout has been imported.

Another way to import your layout is by using the Visual Builder.

  1. You can drag your .json file into a new page, or click the Import/export icon on the Visual Builder bottom bar

  2. Choose whether to include presets by ticking the Import Presets checkbox

  3. Click the Import Divi Builder Layout button

    import json visual builder

When editing a module or an element where a preset is applied, you will see all available presets, including the ones that were imported.

imported presets

Tips & Best Practices for Using Divi Presets

When working with presets, there are a few things you should consider. Implementing these tips will help you build a beautiful Divi website faster and improve your knowledge of Divi presets.

Create a Divi Preset Style Guide

Divi presets enable you to work faster and more efficiently when building your website. Creating a preset style guide is a great way to jumpstart your design. Check out our free preset style guide to help you get started.

Use Section and Row Presets

Using section and row presets to create a consistent layout when building your site is a great idea. This is a good replacement for the theme customizer settings layout options, which are limited.

You can use your new custom presets for sections and rows to jumpstart and override the layout.

Continue Learning

Now that you understand how Divi presets work check out some of our helpful posts and freebies to kick your creativity up a notch.

Related Articles
Getting Started With The Divi Builder
Divi Global Presets
Divi WooCommerce Modules
Using Divi Box Shadow Options
Using Divi Hover Options
Did this answer your question?