The latest Divi update added a new feature called Divi Presets. This is a new class-based system that lets you save custom styles as presets. You can then apply those presets to your modules across your Divi website. In this article, we’ll take a close look at Divi Presets and see how it can help you with your Divi designs.

Why Use a Divi Preset?

Divi makes it easy to make changes and reflect those changes to similar modules. For single pages, you can extend the styles to each module of the same type, or paste the style into individual modules. Unfortunately, reflecting those changes site-wide is a multi-step process that can be time-consuming if you have a lot of modules to change.

If you want to use that style on other pages, you’ll have to find a module with the style to copy or save a module to the library that you can bring in to each page.

This was made a little easier with the Divi global defaults update from last year. Global Defaults allowed you to create a default style for all of your modules. Each module that you added to your layouts would automatically start with the global default. Divi Presets replaces Global Defaults and adds more features.

With Divi Presets, you can create multiple styles, set a default style, or select the specific preset you want for each module. The preset becomes that module’s default design. You can also change the preset styling and those changes are automatically reflected to every module that uses that preset. This makes a Divi Preset the Divi equivalent to a CSS Class.

Creating a Divi Preset

Use any current design or create the styling you want for the preset. At the top of the module, just under the title, you’ll see a new link called Preset Default. Clicking the links opens a window with several options. Here, you can create a new preset from the current styles, add a new preset, and see the help file.

Create New Preset from Current Styles

Clicking to create a new preset from the current styles or to add a new preset opens a window where you can name the preset and choose to assign it as the default preset. The settings card will spin around and show the Preset’s settings.

Click the green checkmark and all of the styling for that module is now that preset. Now when you select to see the presets, you’ll see a list with that preset’s title and several options. Here, you can edit the styles, view the settings, update the preset with current styles, duplicate it, delete it, and assign it as the default preset.

Any of your presets can be set as the default preset and you can change it at any time. If you change them, all modules that use the default preset will be updated. Any module you add to your layout will start with the default style. The current default will be marked with a green check.

Add New Preset

Selecting to add a new preset opens the modal where you’ll add the preset name and choose to assign it as the default.

The new preset is created, but it has no styling in it yet. As you can see in this example, the text for the upper left element has reverted to the default Divi styling for h1. The h3 text was originally chosen for that module, along with text styling and alignment.

Once you’ve made your changes to that preset, open the preset modal and click to update the preset with the current styles.

Updating Presets

If you save a preset as the default, you’ll see a message when you close the module that reminds you that you’ll about to update the styles for that module across your website. These changes won’t affect modules that you’ve assigned other presets.

Using Divi Presets

Once you’ve created your presets, you can easily assign them, edit them, delete them, copy them, etc. In this example, I want to set my new preset as the default. Hover over the preset you want to set as the default and click the star.

It will open a message to remind you that you’re about to change the default for the entire website.

All of the text modules now have the new default styling. I didn’t have to open them and set them to the preset. They all changed automatically. It’s applied to every module of this type that uses h3.

You can still change individual modules if you want to override the default settings. I’ve added a new style to the text in the middle at the top. I’ll save this as a new preset, but I could also just leave it as a custom-styled module without using a preset.

I went back into the preset and added a box shadow and padding to the top. Next, I’ll select the preset in several other modules.

Applying the Preset from the Menu

One easy way to apply the preset is to right-click and select Edit Preset Style.

Clicking to edit the preset opens the settings for that module. It’s already open to the preset screen. Simply select the preset link and choose the preset you want to apply.

The preset is applied. Now all you need to do is close the settings.

My presets are now set to several of the modules. The other modules have the default preset.

Apply to Active Preset

You can also apply the style of the module to the current preset from the right-click menu.

If you apply all styles to the active preset, it will explain what you’re about to do and ask if you want to proceed. This will extend the styles of that module to every module that uses that preset.

Ending Thoughts

Divi Presets is another game-changer for Divi. It greatly speeds up the design process. We no longer have to make changes in individual modules, or copy styles from one module to another. Simply create your presets and then assign them when you add modules to your layouts. You can even use the styles of current modules to create presets.

The Preset UI is simple and intuitive. There’s no limit to the number of presets we can create and the presets can include any type of styling you want. I’d love the ability to upload presets. You can easily create a layout with your presets and upload that to use on a page. Keep the page private and you can set your styles from there.

The presets are module-specific. Changing the default header text of a text module doesn’t change the header text in any other type of module. This means you’ll need to create presets for different modules.

Divi Presets does feel like working with CSS Classes. After using Divi Presets, I can’t imagine building a website without them. Creating a library of presets is a great way to save time when designing a Divi website. I recommend using Divi Presets and even creating an extensive library to use on all of your websites.

We want to hear from you. Have you tried the new Divi Presets feature? Let us know what you think about it in the comments.