divi tips n°125

Use Divi's global colours for more productivity!

Updated on 29/05/24

626 words

3 minutes of reading

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

You create the websites of your customers with WordPress and Divi, or even you are creating your own site and are at the productivity research ? Bingo, you will love this article! I'll explain how to use the Divi global colors to avoid wasting time with multiple actions when you want to change a color on your entire site...

1 – What is a global color?

Generally, when stylizing a Divi module, you select a color from a selected palette. However, if you use a overall color in place of a Classic colorThis would allow you to be much more effective in the future.

Indeed, each module that uses a global color allows you to change color, with just one click, on the entire site. The overall colors of Divi are actually "synchronized colors".

So, on the day your graphic chart no longer uses this dreadful "cacad goose green", you can replace this color with a single click on the entire site. You no longer have to waste your precious time changing colors, modules after modules...

Watch this video, you will understand better:

2 - How to identify/use global colors?

manage the global colors of divi
Use a global color Divi

When editing a Divi module, you have various options to define the colors (back color, element color, etc.), then just click on "Global" below the color selection panel.

When a module uses a global color, you can easily spot it thanks to the special shape of the color tablet (a round with a square corner).

Did you know that? You can test Divi for free by visiting on this page and by clicking on "TRY IT FOR FREE"

3 – Create a global color in 5 steps

When you need to define a new global color, here are the steps:

Create a global color Divi
Create a global color Divi
  1. Click on "Global"
  2. Click on the "+" icon to add a new color.
  3. Use the cursor to choose the color or indicate the hexadecimal color code, for example #ea12dc.
  4. Validate, save your changes.
  5. From now on, when you go to the global color panel, you can use the new color previously created.

4 - Edit Global Color

On the day the overall colour used no longer suits you or your customer, you will need to change it from the settings provided for that purpose.

change a global color Divi
Edit global color Divi
  1. Open the settings of the module that uses the overall color to change and click on the toothed wheel icon.
  2. Click on the pen icon of the color to change.
  3. Move the cursor to choose the replacement color or use the field to enter the hexadecimal code, for example #1df984.
  4. Save the changes.
  5. All modules that used the old global color now use the new global color defined.

You can also change a global color quickly, directly using the pipette icon in the color selection panel, as shown in this GIF:

global color divi

Need to master Divi? Discover my training that accompanies you step by step in the understanding and use of Divi! Learn more about Divi training.

5 - To go further with the global colors of Divi...

Here, I'm hoping this quick tutorial will have helped you improve your productivity and I'm curious if you're already using this feature on your projects with Divi?

To go further, I propose a playlist:

global colours divi pine
global colors divi pin 2
global color divi pin

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


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.