Colors play an integral part in any web designing process or in general. Making a color selection for a website is, in a way, an extensive process and involves in-depth knowledge of color families and complexity.
We often change the websites ‘ color combinations if we are not satisfied with the output or the color scheme selected does not match the website’s concept.
What Is The Need To Add Global Colors?
Just imagine if you have a live website and you want to make changes in its color scheme, the idea of changing the color scheme will horrify you as there are many pages in a website containing multiple elements on them.
Changing color for each item is a time taking and tiring process and will require a lot of effort, which could delay its launch. Therefore there has to be some easy way to change the color at one location, and the change is applied throughout the elements using the same color.
The simple and most effective way to avoid this exhausting process is to use the Global Color feature of Elementor. Elementor provides you with the functionality to manage the color scheme of your website separately.
The Global Color feature lets you add and manage your website’s colors from one location, which means changing the global color will automatically adjust the color across all the elements using the same color.
Step 1: Adding Global Colors To Elementor
To use the global color feature, you need to define the colors first. Elementor itself offers some predefined global colors, which we can use while designing a website.
- To define your own global color, edit the page or a template in Elementor, click on the hamburger icon on the top left corner, and select the Site Settings option.
- Next, click on the global colors.
You will see some predefined colors are already available. You can use these colors or can add your own color choices.
- To add a new color, click on the ADD Color button and use the color picker or enter the color’s hex code to define the new color.
- Next, you can edit the color name label so that it is easy for you to identify the new color.
- Click on the close icon and save the changes. You can follow the above process repeatedly to add more global colors to your site.
Step 2: Using Global Colors In Your Design
To use the color you have just defined, edit the page or template in the editor, and then to render the color edit any column, section, or widget where you want to implement the global color. In the Color option, click on the global icon and choose the color you have just defined.
That is it, and you are done with adding the global color to your site.
So, from now on, if you use the same color on multiple locations on your site, you do not need to change them separately. Just make changes in the global color, and it will automatically apply the desired change across to all elements using that same color scheme.
