Aug 7, 2020 | Divi Resources

Divi Presets: What it is and why you should use it

Elegant Themes regularly releases updates for Divi. Some of those updates are more important than others. A recent update, called Divi Presets, is one of the most impressive and important updates so far. It promises to save you time in designing and editing your Divi websites.

In this article, we’ll take a close look at Divi Presets, see what it can do and why you need it.

What is Divi Presets?

What is Divi Preset?

A preset is a module design that we can save and reuse. Divi Presets allows us to save multiple custom designs for modules and then select those designs in later use from the preset list.

Why use Divi Presets?

One of the greatest advantages of Divi is the level of customization for each module. You can easily adjust colors, fonts, sizes, backgrounds, borders, animations, and lots more.

However, to reflect those changes in other modules takes time, a lot of time. And Divi Presets solves this problem.

Before Divi Presets, we could copy and paste the styles from one module to another. Or, we could make a style the default that all of the modules of that type will use. That was helpful, but not at its full potential.

With this new feature, all we have to do is save the design and then select it for any module we want to use it. We can set a design as the default and then override that design just by selecting a new one. We can edit any design and the changes are reflected in every module across the website that uses that preset.

This means you can create multiple versions of a module and then choose the preset you want each module to use.

Creating and Adding a Divi Preset

Creating and Adding a Divi Preset

Once you have the design you want for your module, select, Preset: Default, under the module’s name at the top of the settings. This will open a modal where you can create a new preset based on the current styles or add a new preset.

Divi Presets Settings panel

Choosing one of the options lets you provide a name and choose to assign it as the default style.

Editing Divi Presets

Once you’ve clicked the green checkmark, the card flips around and you can make any adjustments you want to that style.

List of created Divi Presets

Once you’ve created a preset you’ll see it listed when you click the preset button. You can then select it to use it or edit it. Presets are module-specific, but the list will appear in every module of that type. In this example, these presets will appear as options in every button module. You can edit, duplicate, delete, etc.

Divi Presets Examples

Let’s look at a few examples of how to use Divi Presets and see why they’re so useful and important.

Blog

Customize Divi blog pages with Divi Presets

For this example, I’m using the Divi Blog and Landing Pages from the Divi Robotics layout. Each of these pages includes a blog. I want to make changes to one and reflect them on each page. The example above is the landing page.

Divi blog customization using Divi Presets feature

I’m making the changes on the blog page. I’ve added an overlay using colors from the layout. I’ve also increased the size of the heading text and changed the meta text color to match the layout.

Created a Divi blog preset

Next, I’ll create a new Divi blog preset from the current design.

Saving blog preset and assigning it as the default

I’ve given the preset a name and selected it to be the default.

Blog presets' indication

When saving it, it informs me that it will assign the preset to each blog module across the website. This is a good reminder that I’m about to make changes that will affect other pages.

Divi archive pages after use of Divi presets

Now, the landing page and home page display the same design. I didn’t make any changes to the landing page. Since it’s using the same preset, the changes are automatic.

Contact Form

Designing content form with Divi Presets

For example with the contact form, I want to have a couple of options and use a/b testing to see which is best. This is the original design from the robotics layout.

Creating contact form preset

I’ve saved the current design as a preset, but I’m not assigning it as the default. This will make this style available to me, but I’d have to select it. If I make it the default, every contact form will automatically have this design.

Custom styling Divi contact form preset

I duplicated the preset and changed the color of the field text and button. This is preset 2.

Contact form preset with blue background

Preset 3 has a blue background for the fields and white text.

Contact forms' Presets list

Now I can run my a/b split test and all I have to do is choose which preset I want the contact forms to display. When the split test is complete, I just have to copy the module, choose a different preset, and run the test again.

Blurb

Creating Divi Presets for Divi Blurb

For this example, I want to have several options for blurbs. I’ll create multiple presets and then assign them where I want to use them. The first preset is the original design. This allows me to use it as the default or at least have access to it for future use.

Divi blurb preset

The second preset changes the background color and the body text color.

Editing Divi blurb preset

The third preset also changes the background and font colors.

List of Divi Presets for blurb

Now all I need to do is choose which preset each blurb module will display.

Final blurb result using Divi Presets

Here’s the result. I have three blurb module designs to choose from.

Blurb settings for preset

If I update one of the presets, every module that uses that preset is automatically updated to match. In this example, I’ve updated the title font size for the third preset and then updated the preset. The last module uses that preset, so it also updates to the new settings.

Ending Thought

That’s our look at the new Divi feature, Divi Presets. The ability to create multiple presets and select the one you want is a game-changer for web design. The user interface is intuitive, so the presets are easy to create and edit. Editing a preset reflects the changes across your website so you don’t have to open every module on every page when you want to make a design change.

This saves a lot of time in making major design changes. Divi Presets is the fastest way to choose styles and edit them across your website. I highly recommend using Divi Presets for every website you create.

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

Posted By:
Randy A. Brown
Randy A. Brown is a freelance writer from east TN specializing in WordPress and eCommerce. He's a longtime WordPress enthusiast and loves learning new things and sharing information with others. If he's not writing or reading, he's probably playing guitar.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

How to create custom Divi contact form message pattern

How to create custom Divi contact form message pattern

For an online venture, a contact form works similarly to the visiting card of an offline business. Interested customers contact you whenever they want. And a contact form available on the website does the same. Interested users contact you whenever they want. If...

Divi Marketplace Guide: Plugins, Child Themes & Layouts

Divi Marketplace Guide: Plugins, Child Themes & Layouts

The new Divi Marketplace by the Elegant Themes has taken its share in the web development world. Now, Divi developers around the world can easily share their awesome products to hundreds of thousands of users. A much like independent PlayStore and AppStore for the...