Divi global colors update (Divi 4.9)

If you, or your mind-changing clients, have ever wanted to change your website color palette sitewide in a single click, the new global color feature update is for you.

The Global color feature update in Divi version 4.9;

• Adds a new Global color palette
• Allows you to create and assign colors within your global color palette
• allows you to dynamically update colors throughout your website in a single location using the section, row, column, or module settings within the Visual Builder.
• Allows you to add and edit colors to the Saved colors palette within the Divi Builder

What are Divi global colors?

Divi global colors are a new color management system built into the Divi Theme and DIvi Theme Builder plugin that allows you to dynamically change the color of any element, anywhere on your website.

Why are Divi global colors so useful?

The main benefit of using the global color palette is to save time when developing and editing your Divi website. They can also help improve your overall design process.

By adding dynamic global colors to your website you can then update them all in 1 place at any time. If you have a site already created but you need to change the color scheme to a new color, it can be done with a few clicks too, rather than having to manually go into every single element on your website that is using that color.

Your design process can also be improved by instantly switching out sets of colors in a design to see which looks best. Again this can be done with a single click, rather than having to manually edit on each element in the page or site.

How to create a new global color

When you add or edit a color setting in a Divi Builder section, row, column, or module there will be 3 color palettes to choose from. They can all be managed in the Divi builder so there is no need to use the Theme Options for color management.

The “Saved” and “Recent” color palettes will function much the same as before, with the added benefit of being able to edit the saved color palette within any element on your site rather than just in the Theme Options.

In addition to the Saved” and “Recent” color palatte, there is now a new “Global” color palette tab.

The global color palette tab will open your global color palette, where you can add and assign global colors or edit existing colors. Global colors have a droplet shape icon, rather than the circular shape of a Saved color.

When the Global color palette tab is selected you can use the plus icon to use the color picker to add a new global color to your global color palette.

Clicking the gear icon will open your global color palette editing menu where you can click on any color and edit it using the color picker. Any updates will be applied throughout your site to any elements using that color. You can also delete any of your colors.

Update existing website colors to be global

If you have already created your website with static colors it is reasonably easy to update them to all use global colors. This may be useful if you are thinking of a design change or just to future-proof your color scheme.

Just how easy this is will depend on the size of your site, as you will need to open each page individually and use the Search & Replace feature as there is no way to do this sitewide.

If you have a number of instances of the same static color on your page,  you can change the static colors to global colors by;

1. Right-click on one of the existing static colors and click on the “Convert To Global” text to automatically add the color to your global color palette. It will also apply the global color to the active color setting. The color is now global.
2. Right-click on another of the existing static colors and click on the “Find & Replace” text. You can then select to find the selected color within “this page” (this website is unfortunately not an option!) and replace it with the global color you just created. Don’t forget to click on the checkbox to “Replace all found values within every option type, not limited to Icon Color”.

Note* You could just use the search and replace feature to change all colors on a page without bothering with the global color system, but it would only apply o the page you are currently on, whereas changing a global color will apply it to every page on your site even if you are not actively editing them.

Final thoughts on global color palettes

I’d rather be at the beach, with friends & family, or just anywhere but in front of my laptop, so any efficiency updates for Divi get a thumbs up. This update for Divi will play a small part in making it happen. It would obviously be nice to be able to convert a color from static to global on an entire site rather than having to do page-by-page, but most of my existing sites won’t be getting a color scheme update anyhow.  The global color palette works well and will save us all a lot of time, and for that, we should all say “Thanks Elegant Themes!”