Use Divi's global colours for more productivity!

Published on 30/11/2021 | 0 comments

Are you creating your clients' websites with WordPress and Divi, or even creating your own site and looking for productivity? Bingo, you'll love this article! 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...

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

1 - What is a global colour?

Generally, when you style a Divi module, you select a colour from a selected palette. However, if you use a global colour instead of a traditional colour, you could be much more efficient in the future.

In fact, each module that uses a global colour allows you to change the colour of your entire site with just one click. Divi's global colours are in fact " synchronised colours " between them.

So, the day your graphic charter no longer uses that ugly "goose-poop green", you can replace this colour in a single click on the entire site. You no longer have to waste your precious time changing colours, module after module...

Watch this video, you will understand better:

2 - How to identify/use global colours?

gérer les couleurs globales de divi
Using a Divi global colour

When you edit a Divi module, you have various options for setting colours (background colours, element colours, etc.), so all you have to do is click on "Global" below the colour selection panel.

When a module uses a global colour, you can easily spot it thanks to the particular shape of the colour dot (a round with a square corner).

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

3 - Creating a global colour in 5 steps

When you need to set a new global colour, here are the steps:

créer une couleur globale Divi
Create a Divi global colour
  1. Click on "Global".
  2. Click on the "+" icon to add a new colour.
  3. Use the slider to choose the colour or specify the hexadecimal colour code, e.g. #ea12dc.
  4. Validate, save your changes.
  5. From now on, when you go to the global colours panel, you will be able to use the newly created colour.

4 - Modifying a global colour

If the overall colour you are using is no longer suitable for you or your customer, you can simply change it from the settings provided.

modifier une couleur globale Divi
Change a Divi global colour
  1. Open the settings of the module that uses the global colour to be changed and click on the gear icon.
  2. Click on the pen icon of the colour to be changed.
  3. Move the cursor to choose the replacement colour or use the field to enter the hexadecimal code, for example #1df984.
  4. Save the changes.
  5. All modules that were using the old global colour now use the newly defined global colour.

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

global color divi

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

5 - To go further with Divi's global colours...

I hope this quick tutorial has helped you improve your productivity and I'm curious to know if you already use this feature on your projects with Divi?

To go further, I suggest a reading list:

couleurs globales divi pin
couleurs globales divi pin 2
global color divi pin

597 words

2

You might like it too:

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

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.

New Divi training!

55 videos to master the Divi Visual Builder like a pro: ⏱ 3h30 of theory + 👩🏻💻 6h00 of practical application + 🤝 30min. of individual coaching in visio.

(CPF eligible training)

Pin It on Pinterest

Shares
Share This