The “Global Colors” feature gives you the possibility to customize the colors of certain elements on your page/website at the same time. Thus, you can save time and effort with this feature.
Here is how to use it:
Add a color and make it global
First of all, you should select one of the elements to which you want to add this new color. For example, a heading, a paragraph, or a button.
Note: You can add a “Global Color” to any kind of element that has the color option available, but please, keep in mind that a “Global Color” will not work on a "Master Color", "Gradient" or "Pattern".
After you have selected the element, click on its color section (the box with the current color and its code next to it).
You'll next have to unlink the theme or template color, in order to be able to set a new one:
After you do that, you will be able to choose the color you want using the color picker that appeared. You can either click on the preferred color in the color picker or paste in its code in the “HEX/RGB” field under it.
The next step is to click on the plus sign that is under “My Colors”:
And lastly, save the color as a global one by clicking on the “Global” button and then, on “Apply”:
Once you have saved the “Global Color”, you can apply it to any other element on your page and on your website that is built with Thrive Architect.
All you have to do is click on another element that you want to apply this color to, select the "Color Options" and now, you will see that the “Global Color” appears in the “My Colors” section.
Note: “Global Colors” can be differentiated from the general colors by the little triangle that they have in their bottom right part.
Select the “Global Color” and then, simply click on “Apply” to use the same color on this element as well. You can repeat this process for every element that you want to apply this “Global Color” to.
Edit Global Colors
Editing a “Global Color” can also be done in a few easy steps.
Please keep in mind, that editing a “Global Color” means that the changes/modifications you bring to this color will be visible and applied to every element where the “Global Color” appears.
So, for example, if you have a “Global Color” applied to several of your headings, paragraphs, icons, etc. then, they will all be changed, once you finish editing one of them.
When you are trying to edit a "Global Color", you first just need to make sure you select an element that already has a "Global Color" applied to it and click on the “Colors” section from the left sidebar:
This will open up the color box pop-up, with two different options from which you can choose:
By clicking on the “Edit global color”, you can change the color with the help of the color picker, or by using a HEX / RGB code as already explained above.
Once you decide on the color, click on the “Update global color” checkmark:
The “Global Color” can also be changed by clicking on the pencil icon right next to the field name of the selected color:
After you have decided on the color, don’t forget to hit the “Apply” button to save the change.
This will automatically replace the previously selected color with the current one, and the change will be visible on every element that has the “Global Color” applied to it.
Unlink Global Colors
Unlinking a global color can be done by following the same steps as in the case of editing a global color.
You first need to make sure that the selected element has a global color applied to it, and then go to the “Colors” section from the left sidebar:
In the new window, you can either click on “Unlink global color” or on the “Link” icon from the color name field:
If you click on any of them, the element will be unlinked from the "Global Colors" feature.
This means that next time when you will change the "Global Color" on another element, the color of this element will not be affected; it will not be changed automatically, like the other 'linked' ones.
Rename or Delete a Global Color
If you want to rename or delete a “Global Color”, first you will have to access the respective color, just like before. Click on an element from the page that has the “Global Color”, then click on the box with the color from the “Color” section of the left sidebar:
In the lower part of the drop-down that opened, you will see the “More” option (three dots icon). Click on it:
Then you will see both the “Rename” and the “Delete” option appear:
You can rename a color by clicking on the “Rename” option. Then, simply replace the current name for the color with the one that you would like to give to it now.
If you wish to remove a “Global Color”, you just have to click on the “Delete” option from the above-mentioned drop-down and confirm that you are sure of the action you are about to take
Note: It is good to know that removing a “Global Color” from the color picker does not mean that the color will be removed from every element that it was applied to until now.
The elements will keep the same color, but the color will act as a general one going forward. This means that you can edit or change it as you normally would.
Turn “Favorite” colors into "Global" ones
Last, but not least, if you have saved colors as “Favorite” ones, you can make those global as well. Just click on the color that you have saved as “Favorite” and then once more on the plus sign, and follow the same process as already described above:
This will transform the “Favorite” color into a “Global” one (you will see the little triangle appear in its lower right corner) and you can start using it accordingly.
If you want to find out even more details on why the "Global Colors" feature will make your job a lot easier, check out this blog post.
In case you need more details about how various options and elements work in Thrive Architect, please check out our Knowledge Base.
Hopefully, this article was useful for you. If so, please reward it with a smile below :)