How to Use the Elementor Global Colors Feature

Elementor 3.0 offers some new features to streamline your workflow in creating a website with WordPress. One of which is Global Colors. What is it and how it can help you streamline your workflow? Read on to learn more.

Color is of the essential elements of web design and other design types in general. A proper color selection can be one of the factors of forming a solid brand identity. The process of color selection itself involves research, understanding of color theory, and implementation. Often times, designers change the color scheme of a website as they think that the implemented colors don’t match the concept of the website.

Now imagine if you have a live website (that consists of multiple pages) and you or your designer want to change the color scheme. How long it takes to apply the new colors to all pages on your website if you have to edit the pages individually, one by one? Not to mention other website parts like the header and footer.

The new Global Colors feature of Elementor allows you to avoid that exhausting process. With a global color, you can apply a new color to multiple pages at once with a single click.

In addition to streamlining your workflow, the Global Colors feature of Elementor also helps you to make sure that your website has a consistent color scheme on all parts. Here is to use this new feature.

How to use Global Colors in Elementor

To use a global color, you need to define a global color you want to use first. Elementor itself offers some predefined global colors you can use. To define a new global color, first, edit a page or template with Elementor to access the Elementor settings panel. If you are new to Elementor, you can read this guide to learn how to use Elementor. On the Elementor editor, click the hamburger icon on the top-left corner on the settings panel and select Site Settings.

Next, select Global Colors.

As you can see, there are some predefined global colors you can use. To define a new global color, simply click the ADD COLOR button. Use the color picker to define your new global color. To make it easy for you to identify your new global color, you can also give it a name.

Click the blue UPDATE button to save the new changes. You can repeat the steps above to add more global colors. You can click the blue X icon to switch back to the Elementor general settings panel.

To use the global colors you have just defined, create a new page/template or edit an existing one. Edit any element (widget, column, or section), and set its color. On the Color options, click the globe icon and select a global color you want to use.

Repeat the steps to use a global color on other pages or site parts (such as the header or the footer).

From now on, if you use the same global color on some pages or site parts and want to change the color, you can open the Global Settings panel (by clicking the hamburger icon on the Elementor settings panel). Then, open Global Colors and select the global color you want to change its color and simply select a new color you like. Take a look at the screencast below.

Notice the heading section and the social media icons section on the screencast above. Those sections use the same global color. So, if we want to change the color of both sections, we just need to do it once by changing the color of the used global color. If you use the same global color on other pages, the sections of the pages that use the same global color will change too.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?