Want to use global colors in Elementor ?
Elementor 3.0 offers new features to streamline your workflow when creating a Website with WordPress. One of them is Global Colors.
What is it and how can it help you streamline your workflow? Read on to find out more.
Discover How to install Elementor on WordPress
Color is among the essential elements of web design and other types of design in general. Proper color selection can be one of the factors of training of a strong brand identity. The color selection process itself involves research, understanding color theory, and implementation. Often designers change the color scheme of a Website because they think that the implemented colors do not correspond to the concept of the Website.
Now imagine if you have a website already live (which consists of multiple pages) and you or your designer want to change the color scheme.
How long does it take to apply the new colors to all the pages on your website if you need to change the pages individually, one by one?
Not to mention other parts of the website like the header and footer.
Read also: How to create a registration page in Elementor
The new feature Global Colors byElementor allows you to avoid this exhausting process. With global color, you can apply a new color to multiple pages at once with just one click.
In addition to streamlining your workflow, the feature Global Colors Elementor also helps you make sure your website has a consistent color scheme on all parts.
Here's how to use this new feature.
How to use Global Colors in Elementor
To use an overall color, you must first define an overall color that you want to use. Elementor itself offers predefined overall colors that you can use. To set a new overall color, first edit a page or template with Elementor to access Elementor's settings panel.
Under the Elementor editor, click the hamburger icon in the upper left corner of the settings panel and select Site settings.
Then select Global colors.
As you can see, there are predefined global colors that you can use. To define a new global color, just click on the button ADD A COLOR. Use the color picker to set your new overall color. To make it easy for you to identify your new overall color, you can also give it a name.
Click on the blue button UPDATE to save the new changes. You can repeat the above steps to add other overall colors. You can click on the icon X to return to the Elementor General Settings panel.
To use the global colors you just defined, create a new page / template or edit an existing one. Edit any element (widget, column or section) and set its color. In the options Color, click on the globe icon and select an overall color you want to use.
Repeat the steps to use an overall color on other pages or parts of the website (such as the header or footer).
Read also: How to create a login page with Elementor
Now, if you are using the same global color on certain pages or parts of a website and want to change the color, you can open the global settings panel (by clicking the hamburger icon in the Elementor settings panel).
Then open Global Colors and select the overall color you want to change and just select a new color you like.
Take a look at the capture below.
Note the header section and the social media icons section on the capture above. These sections use the same overall color. So if we want to change the color of both sections, we just have to do it once by changing the color of the overall color used.
See also: How to export and import Elementor models
If you use the same overall color on other pages, the sections of the pages that use the same overall color will also change.
Get Elementor Pro Now!
Conclusion
Here is ! That's it for this article which shows you how to use global colors in Elementor. If you have any concerns on how to get there flet us know in the Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
