Divi Presets: The feature that improves your productivity!

Updated on 12/07/2021 | Published on 23/10/2020 | 8 comments

Divi Presets is a feature available in the Divi Builder. Not many users know about it, but it can improve your productivity when creating your sites. Do you know about it? Do you use it?

I explain everything in this tutorial article and also in video 🎥!

Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - Divi Presets, what is it 👀 ?

If you are a graphic or web designer and you use PhotoShop, Sketch or Affinity Designer, you probably know ways to improve your productivity, especially with the functionality of synchronized elements. This allows, for example, to create a graphic design with a style that can be modified in 1 click and that impacts all the elements where the style has been assigned.

The Divi visual builder also offers this feature, called Divi Presets. This one is a "hidden feature" because it is not visible at first glance... You need to know what it is and what it does.

So to answer the question: Divi Presets allows you to save the style of a module as a preset style for future use. This saves you valuable time when designing layouts. If the style needs to be changed, simply edit it and the change will be applied to the entire site.

Discover the detailed explanations on the official article of ElegantThemes

2 - Example of use on "summary" modules

To better understand how Divi Presets work, let's take the example of a summary module.

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

As you can see on the image 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, it is simply a matter of adding a shadow and rounded corners.

Here's what you need to do:

Enregistrer un style en tant que Divi Preset
Save a style as a Divi Preset
  1. Edit the Summary module which contains the styles to be saved. Click on the cogwheel icon in this module. At the top you will see "Preset: Default". Click on it to open a pop-up window.
  2. Click on "Create new preset from current styles". This means that you will create a newpreset from the current styles.
  3. Give your style a name so you can remember it the next time you use it.
  4. Save your actions until all popups close (3 times).
Enregistrer un style en tant que 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 (gear icon)
  2. Click on "Preset: Default".
  3. Select the style to apply, for my example it is blurb-style-1.
  4. Confirm your changes.
  5. In 3 clicks, the other Summary modules have recovered the styles defined in the Divi Preset in question.
Les styles ont été appliqués
The predefined styles have been applied

3 - Divi Presets available on all modules ✅

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

Let's take another example with the button modulethe approach is the same:

Divi Preset fonctionne aussi sur les boutons
Save the styles of a button module
  1. Edit the Button module which contains the styles to be saved. Click on the cogwheel icon and then on " Preset : Default ".
  2. Click on "Create new preset from current styles" to create a new preset.
  3. Give your style a name so you can remember it the next time you use it.
  4. Save your changes.
appliquer le style aux boutons
Change the style of a button in 1 click
  1. Open the settings of the button module to be modified (cogwheel icon) and click on "Preset: Default".
  2. Select the style to apply, for my example it is button-style-orange.
  3. Confirm your changes.

There you go, your new button has been styled in 1 click and corresponds exactly to your graphic charter. You have saved many minutes of settings!

Modifier un Divi Preset
Divi Presets can be modified
  1. Edit the settings of the Button module and click on "Preset".
  2. Select the preset to be modified 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 just been modified. That's what this feature is for... Not only do you apply a style quickly, but you can apply the changes to the whole site and save a lot of time!

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

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

You might rightly wonder if this feature of Divi Presets is redundant with the "Extend Styles" feature.

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

Divi Presets vs. Étendre les style
Divi Presets vs. Extend Styles
  1. When you hover over a module with your mouse, options appear: click on "Other module parameters" (icon with 3 small dots).
  2. Click on Extend Styles
  3. Choose how far you want to extend these customizations: across the page, across the section, across the row or across the column.
  4. Confirm your choice by clicking on Extend.
  5. Here is the result: all the Summary modules have recovered all the styles of the starting module, including the color.
  6. While using the Divi Presets, only the general styles were copied.

But above all, what you have to remember here is that it is impossible to extend the styles to the entire site with the "Extend styles" feature. Moreover, you can't use them on a new page and you won't be able to make modifications in "synchronized" mode.

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE

5 - Not to be confused with the "Global Element" feature

The same goes for the Global Item feature. It may seem like a Divi Presets feature because changing a global element also impacts the entire site.

A global item is a module, line or section that has been saved in the Divi library and can be used whenever you need it. However, if you register a button as a global element and change the link (URL) of the button, then that link will also be changed on every page of the site that uses that global button! This may not be what you want. In this case, Divi Presets are a must.

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

6 - Divi Presets video tutorial 🎬

For a more vivid explanation of this Divi Presets feature, watch the summary of this article in this explainer video:

Or watch Nich Roach 's presentation:

7 - Some additional resources 🤩

So, what do you say about this feature? I'd be curious to know (in comments) if you use it and if you find that it really saves you time?

In the meantime, here are some additional resources:

To learn more about how to use Divi Presets, watch this video that shows you how these presets can be used for your texts and fonts :

Divi Preset Productivite
Divi Presets Gain De Temps
Divi Presets to be more productive

1,237 words

5

You should like it too:

Formation Divi PDF : un guide pas à pas

Divi PDF training: a step-by-step guide

What could be better than a Divi PDF training to master this WordPress theme, its Visual Builder and its Theme Builder? It's like having a trainer come to your house... Check it out!

8 Commentaires

  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

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This