Divi Tips No. 104

Divi Presets: The functionality that improves your productivity!

Updated on 12/07/21

1299 words

5 minutes of reading
8 comments

This article contains affiliate links recognizable by the percentage icon (%) → I am an affiliate link

Divi Presets is a feature available in the Divi Builder. Few users know it, yet it helps improve your productivity when creating your sites. Do you know her? Do you use it?

I'll explain everything in this tutorial article and also in video!

1 – Divi Presets, what is it?

If you are a graphic designer or Web Designer and you use PhotoShop, Sketch or Affinity Designer, you certainly know ways to improve your productivity, especially with the feature of item synchronized with each other. This allows, for example, to create the design of a graphic charter with a style modifiable in 1 click and impacting all the elements where the style was affected.

Divi's visual builder also offers this feature, called Divi Presets. This is a "hidden feature" because it is not visible from the first glance... You have to know it and what it's for.

So to answer the question: Divi Presets allows record the style of a module as a predefined style in order to replenish later. This saves you valuable time in your layout designs. If the style needs to be changed, it will be sufficient to edit and this change will apply to the entire site.

Discover detailed explanations on Official article of ElegantThemes

2 - Example of use on summary modules

To better understand how the Divi Presets, let's take the example on a Module Summary.

Apply styles
Apply styles to other modules of the same kind.

As you can see in the picture above, the goal is to apply the styles of the first Summary module, on the left, to the 3 other Summary modules, on the right. For this example, simply add a shadow and rounded corners.

Here's what you need to do:

Save a style as Divi Preset
Save a style as Divi Preset
  1. Edit the Summary module that contains the styles to save. Click on the toothed wheel icon of this module. Upstairs, you'll see "Preset: Default". Click on it to open a popup window.
  2. Click « Create new preset from current styles ». This means that you will create a new preset (Preset) from current styles.
  3. Give a name to your style so you can remember it when you're next used.
  4. Record your actions until all popups close (3 times).
Save a style as Divi Preset
Apply a "Divi Preset" to a similar module

Then you can call this preset whenever you need it:

  1. Open the settings of the module to be modified (tone wheel icon)
  2. Click "Preset: Default".
  3. Select the style to apply, for my example it is blurb-style-1.
  4. Validate your changes.
  5. In 3 clicks, the other Summary modules recovered the styles defined in the Divi Preset in question.
The styles have been applied
Predefined styles have been applied

3 – Divi Presets is available on all modules

I showed you an example with the Summary module but, in fact, the Divi Presets are available for any module.

Then take another example with the Button module, the approach is identical:

Divi Preset also works on the buttons
Save styles of a button module
  1. Edit the Button module that contains the styles to save. Click on the icon of the toothed wheel then on "Preset: Default".
  2. Click « Create new preset from current styles » to create a new preset.
  3. Give a name to your style so you can remember it when you're next used.
  4. Save your changes.
apply style to buttons
Change the style of a button in 1 click
  1. Open the settings of the Button module to change (tone wheel icon) and click on "Preset: Default".
  2. Select the style to apply, for my example it is button-style-orange.
  3. Validate your changes.

Here, your new button has been stylized in 1 click and corresponds exactly to your graphic chart. You have won many minutes of settings!

Edit a Divi Preset
Divi Presets can be modified
  1. Edit the settings of the Button module and click "Preset".
  2. Select the preset to change by clicking on the pen icon.
  3. Make the necessary changes, for example: Change the color of the button.
  4. Save your changes.

Now all the buttons on your site that used this Divi Preset have been modified. That's what this feature is for... Not only do you apply a style quickly but you can also apply the changes to the entire site and save a lot of time!

Note: there are many ways to improve your productivity with Divi. For example, find out how import/export Divi layout or how import/export a template from Theme Builder.

4 - Do not confuse "Divi Presets" and "Diffusion Styles"

You might rightly wonder if this feature of Divi Presets is not redundant with functionality Expanding styles.

Indeed, these two features are similar but there are some subtleties that differentiate them:

Divi Presets vs. Expanding style
Divi Presets vs. Extend styles
  1. Over a module with your mouse, options appear: click on "Other Module Settings" (Icon of 3 small points).
  2. Click Extend styles
  3. Choose to what extent you want to extend these customizations: on the entire page, on the entire section, on the entire row or on the entire column.
  4. Validate your choice by clicking on Expand.
  5. Here's the result: all Summary modules have recovered all the styles of the start module, including color.
  6. While using the Divi Presets, only the general styles had been copied.

But above all, what we have to remember here is that it is impossible to extend styles to the entire site with functionality "Strengthening the Style". In addition, you cannot use it on a new page and you will not be able to make changes in "synchronized" mode.

Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"

5 - Do not confuse with "Global Element" functionality

Same for the functionality of Global Element. You might think she looks like Divi Presets because the modification of a global element also impacts the entire site.

A global element is a module, line or section that has been recorded in the Divi library and which allows you to be used whenever you need it. However, if you save a button as a global element and that you change the link (URL) of the button, then this link will also be changed on all pages of the site that uses this global button! This may not be your wish. In this case, the Divi Presets then are indispensable.

To better understand this global element functionality, read this detailed tutorial.

6 - The tutorial Divi Presets in video

For a "more alive" explanation of this feature of Divi Presets, see the summary of this article in this explanatory video:

Or look at the presentation proposed by Nich Roach :

7 - Some additional resources

So, what do you say about this feature? I would be curious to know (in comment) if you use it and if you find that it actually saves you time?

In the meantime, some additional resources include:

To go further in the use of Divi Presets, watch this video that shows you how these prefixes can be used for your texts and Writing fonts :

Divi Preset Productivite
Divi Presets Time Saving

Get Divi

Divi training

Ebook Divi PDF

Free tips

Divi Quiz

Live coaching

icon 256x256
Discover my wpLingua plugin, which makes your websites multilingual in just a few clicks! SEO-Friendly / Automatic / Editable

8 Comments

  1. Nathalie Sophie

    Merci beaucoup et 👏🏻 pour la vidéo, c’est encore mieux pour la compréhension 🙂
    Je vais très certainement m’en servir car c’est bien pratique !
    Bonne soirée

  2. Lycia Diaz

    Merci Nathalie 😉

  3. Vero Rakotoarisoa

    Elle est top ta vidéo ! ✨ Bravo et merci pour toutes ces astuces que tu partages. J’avais bidouillé dans cette fonction, mais je n’avais pas tout saisi. Maintenant c’est sûr que je vais m’en servir ! 😃

  4. Lycia Diaz

    Merci Vero ! À bientôt 😜

  5. trottinette electrique

    Un bon article + une bonne vidéo pour nous expliquer le sujet, que demander de plus ? Merci, c’est top, clair et précis 🙂

  6. Lycia Diaz

    Merci « Trotti » 😉

  7. romain

    Bonjour,

    Quelqu’un rencontre-t-il ce problème? J’utilise des couleurs globales dans mes presets de modules. Jusque là tout va bien sauf que, les modules avec preset intégré à une page perdent leur couleur à l’ouverture cette page ou à son affichage de façon aléatoire. Je suis obligé d’aller sur le module et de faire « re-initialiser module style » pour qu’il reprenne sa couleur.
    Et même en repassant les couleurs globales en normales, ça le refait.

    Merci

  8. Lycia Diaz

    Ah c’est bizarre

Submit a comment

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

This site uses Akismet to reduce undesirables. Learn more about how your feedback data is used.