Divi Presets: THE feature that improves your productivity!

Published on 23/10/2020 | 4 comments

Divi Presets is a feature available in the Divi Builder. Few users are familiar with it, yet it can help improve your productivity when creating your sites. Are you familiar with it? Do you use it?

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

Advertisement: 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's 👀 ?

If you're a graphic designer or web designer using PhotoShop, Sketch or Affinity Designer, you probably know ways to improve your productivity, especially with the synchronized item feature. For example, this allows you to create a graphic design with a style that can be changed with a single click and impact all elements where the style has been affected.

The Divi Visual Builder also offers this feature, called Divi Presets. This is a "hidden feature" because it is not visible at first glance ... It must be known and know what it is used for.

So to answer the question: Divi Presets allows you to save the style of a module as a predefined style for later use. This saves you precious time when designing your layout. In case the style needs to be changed, simply edit it and the change will apply to the entire site.

Discover the detailed explanations on the official article of ElegantThèmes

2 - Example of use on "summary" modules

To better understand how Divi Presets work, let's take a look at an example of a Divi Preset. 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
Saving a style as a Divi Preset
  1. Edit the Summary module that contains the styles to be saved. Click on the cogwheel icon of this module. At the very top you will see "Preset: Default". Click on it to open a pop-up window.
  2. Click on "Create new prset from current styles". This means that you will create a newpreset from 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
Applying 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 (gear icon)
  2. Click on "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 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 showed 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 identical:

Divi Preset fonctionne aussi sur les boutons
Saving the styles of a button module
  1. Edit the Button module that contains the styles to be saved. Click on the cogwheel icon and then click on "Preset: Default".
  2. Click "Create new prset 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 be applied, for my example it is orange-style button.
  3. Validate your changes.

Here 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 Button module settings and click "Preset".
  2. Select the preset to be modified by clicking on the pen icon.
  3. Make the necessary changes, e.g. 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 apply the changes to the whole site and save a lot of time!

4 - Do not confuse " Divi Presets " and " Extending 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. Extending 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 Extend Styles
  3. Choose how far you want to extend these customizations: across the entire page, across the entire section, across the entire row, or across the entire column.
  4. Validate your choice by clicking on Extend.
  5. Here is the result: all the Summary modules have recovered all the styles from the starting module, including color.
  6. While using Divi Presets, only the general styles had been copied.

But most importantly, the important thing to remember here is that it is impossible to extend the styles to the entire site with the "Extend Styles " feature. Also, you cannot use it on a new page and you will not be able to make changes 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.

Same for the Global Element feature. One might think that it looks like 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 you change the link (URL) of the button, then this link will also be changed on every page of the site that uses this global button! This may not be your wish. In this case, Divi Presets are required.

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

6 - The Divi Presets tutorial in video 🎬

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

Or watch the presentation by Nich Roach:

7 - Some additional resources 🤩

So, how about this feature? I would be curious to know (as a comment) if you use it and if you find it really saves you time?

In the meantime, here are some additional resources:

To go even further in using Divi Presets, watch this video that shows you how these presets can be used for your texts and type faces :

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

1,208 words

5

You should like it too:

Formation Divi PDF : un guide pas à pas

Divi PDF training: a step-by-step guide

What better than a Divi PDF training to master this WordPress Theme, its Visual Builder and its Theme Builder? It's as if a trainer invited himself in your home... Discover its content!

8 fonctionnalités du Divi Visual Builder que vous devriez utiliser !

8 Divi Visual Builder features you should use!

Are you using all the features offered by the Divi Visual Builder? Some of them are little known and yet so effective! Discover now the 8 Divi options that will save you a lot of time! A great user experience in perspective!

4 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 😜

Soumettre un commentaire

Votre adresse de messagerie 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.

Pin It on Pinterest

Shares
Share This