Use Divi's global colours for more productivity!

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?

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:

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.

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 :

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:

• Discover Nick Roach's official announcement and explanations
• How to create automatically changing colours?
• How to manage colour palettes in Divi
• Inspirations from very colourful sites
• Two ways to manage Divi's colour palettes