Divi Tips n°104

Divi Presets : The feature that improves your productivity!

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

1,237 words

5

Divi Presets is a feature available in the Divi Builder. Few 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 recognise. 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 may know ways to improve your productivity, especially with the functionality of synchronised elements. This allows, for example, to create a design with a style that can be modified in 1 click and impact all the elements where the style has been assigned.

The Divi visual builder also offers this feature, called Divi Presets. This 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 ElegantThemes article

2 - Example of use on "summary" modules

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

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

As you can see from the image above, the aim is to apply the styles from the first Summary module on the left to the other 3 Summary modules on the right. For this example, it is simply a matter of adding a shadow and rounded corners.

This is 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 that 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 up this preset whenever you need it:

  1. Open the settings of the module to be modified (cogwheel 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 retrieved 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 that 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 configuration!

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 colour of the button.
  4. Save your changes.

Now all the buttons on your site that used this Divi Preset have been changed. This is what this feature is for... Not only do you apply a style quickly, but you can 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 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 ask whether 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 of the 3 small dots).
  2. Click on Extend Styles
  3. Choose how far you want to extend these customisations: 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 colour.
  6. Whereas when using the Divi Presets, only the general styles were copied.

But above all, what is important to remember here is that it is impossible to extend the styles to the entire site with the "Extend styles" functionality. Moreover, you cannot use them on a new page and you cannot make changes in "synchronised" 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 it is similar to Divi Presets because changing a global element also impacts the entire site.

A global element 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 essential.

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 think of 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 which shows you how these presets can be used for your texts and fonts :

Divi Preset Productivite
Divi Presets Gain De Temps
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

You might like it too:

Utilisez les couleurs globales de Divi pour plus de productivité !

Use Divi's global colours for more productivity!

🚀 Do you create your clients' websites with WordPress and Divi and are looking for productivity?
🥳 Perfect, I explain how to use Divi's global colours to avoid wasting time with multiple actions when you want to change a colour on your entire site...

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 *

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