How To Use The New Divi Global Color System | Full Guide by Pee-Aye Creative

In this tutorial I will introduce you to the new Divi global color management system and give you some tips on how to understand and use it!

Blog Post: https://www.peeayecreative.com/how-to...

Also check our video on changing your Divi website color scheme:    • How To Quickly And Easily Change The Color...  

Elegant Themes has released a new update to version 4.9 of Divi. The main feature of this update is the new global color management system built into the Divi Builder. This new update also includes some exciting ways to edit the traditional color pallet in Divi, as well as take things to a new level by quickly changing the colors of your entire website from within any section, row, or module. In this post and video I will explain why this feature was needed, how it related to some other Divi features, and most importantly how to use it!

Understanding Divi Global Colors
What Are They?
Global colors in Divi are a new way to quickly and efficiently change the colors of any element with Divi anywhere on the site. They are like presets for colors, but instead of needing to set the same color hundreds of times, you can do it once from anywhere.

Why Do We Need Them?
The purpose of Divi global colors is to make website design faster and more efficient. If you are starting out on a new site, and are not quite sure if you like the colors yet, you can just use a global color and tweak it as you go. Previously you would have needed to go into every module and change every color setting, but now you can make the change from any color picker.

The New Divi Global Colors Feature VS. Settings We Already Had

Saved Colors Vs. Global Colors
The colors found in the color palette that we set in Divi Theme Options and use throughout the builder are referred to as saved or static colors. It is important to note that the new Divi global colors are totally separate and different. Oddly enough, instead of simply replacing the saved colors with global colors, they made them separate. I am still trying to understand this move, and hopefully you can help me out in the comments.

You can now edit the static colors directly in the builder. This previously needed to happen in Theme Options. Now you can set the color wherever you are working rather than needing to go add it to Theme Options and refresh your builder session.

Presets Vs. Global Colors
Global colors are like presets, but for colors with a separate interface. Presets allow you to replace colors globally, but they are based on a per module basis, so I do see the need for more control over colors.

Find & Replace Vs. Global Colors
The Find & Replace tool in the Divi Builder has worked beautifully to replace colors within any module on the page. The new Divi global colors is totally different than this.

How To Use The New Divi Global Colors

Edit Static Colors From The Builder
The first new feature I would like to point out is the ability to set and edit the default color palette directly from within any section, row, or module. In the past, the only way to change the colors was to go to Divi Theme Options and adjust the color palette there. Then go back to the builder and refresh. But now you can stay in the builder! This is exactly what the vision for Divi is, many of the features in Theme Options and the Customizer are being depreciated, slowly but surely.

Once you edit any of the colors, they will update through the builder, and also here in Theme Options. This is totally new, you could not do this in the past. It only worked the opposite way, but now you can edit the colors on the fly in the builder. I really like this. Even if this was the only part of the update, I would be very happy. But there is more!

Adding And Editing Global Colors
You can add new global colors by click the plus button. Then use the color picker to fine tune the exact color you want, and click the checkmark next to he next color. This saves the color as a global color.

If you click on the gear icon, you enter into edit mode. You can adjust the colors or remove them here. Once you are done, just clicked Finished Editing Global Colors.

Convert Static Colors To Global Colors
This new feature is very limited since there is no quick way to convert existing colors into global colors. The best method I could find for converting colors within modules into global colors was to go to each page and use the Find & Replace tool. This allows you to replace that color within any element on that page. So what you need to do is make sure that the color you are replacing it with is global.

Please let me know what you think of all of this in the comments below!