Earlier this month (February 2021) Elegant Themes introduced a new feature for Divi Builder. The feature — called global color — allows you to control the color scheme of your entire site from one place. Global color itself is actually a common feature on most page builders. Other page builders — including Elementor and Brizy — already have one before Divi Builder. So, if you are a Divi Builder user and have been waiting for this feature then it’s time to update your Divi Builder (to version 4.9.0) to enjoy the feature.
How to Use the Global Color Feature of Divi Builder
The concept of global color is helpful to streamline your workflow as you can change the colors of multiple elements — be it on the same page or on different pages — at once. Another advantage of using a global color is that you will have a consistent color scheme on your website. You can even store your global colors to the cloud and access theme from any website you build with Divi. You can make it possible using Divi Cloud, a new service offered by Elegant Themes.
In case you are new to global color, here is an example use of global color on a page. Notice the icons and the heading elements.
As you can see, when we change the color of the heading, the color of the icons changes as well. This can happen because we use a global color for those elements. If you use the same global color for elements on other pages, the color of the elements you applied the global color to will also be updated. A global color itself can be used in any setting that involves color. From text color, icon color, background, and so on.
Divi Builder offers no default global colors, so you need to define one yourself. First, edit a page or theme builder template to open the Divi Builder editor. On the Divi Builder editor, edit an element (e.g., the Text module) and edit its color. On the color picker section, you will see a new tab called “Global”. Simply click this tab and click the plus icon to define a new global color.
You can then use the global color you have just defined on any setting within the Divi Builder editor that involves color change. You can simply go to the Global tab on the color picker section to use it.
To edit the color of a global color, you can simply click the global color you want to change its color and pick a new color. The change will be applied to all elements whereby you applied the associated global color to.
To delete an existing global color, you can click the gear icon on the color picker section. This will show up all of the existing global colors you have defined. Simply click the trash icon to delete one and end by clicking the Finish Editing Global Colors link.
