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:
- Click on "Global".
- Click on the "+" icon to add a new colour.
- Use the slider to choose the colour or specify the hexadecimal colour code, e.g. #ea12dc.
- Validate, save your changes.
- 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.
- Open the settings of the module that uses the global colour to be changed and click on the gear icon.
- Click on the pen icon of the colour to be changed.
- Move the cursor to choose the replacement colour or use the field to enter the hexadecimal code, for example #1df984.
- Save the changes.
- 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