Do you want to mark some colors as global colors on your website? This will ensure you have an easier way to add these colors to specific elements on your website.
Note: Global colors can be added to any Thrive Architect element that has a color option. But, Global colors will not work on Master Color, Gradients or Patterns.
In this article, we’ll show you how you can mark a color as global, and edit, unlink, rename, or delete it on your website.
- Adding and Marking a Color as Global
- Editing a Global Color
- Unlinking a Global Color
- Renaming or Deleting a Global Color
- Convert a Favorite Color to Global Color
Adding and Marking a Color as Global
To add a color to an element, ensure you drag and drop the element on the page in the Thrive Architect editor.
In this example, we’ll use a button to see how this works. So, to add a color to the button, click on the button element on the page. This will open the button options in the left column.
In the left column, open the Main Options of the button.
Under Main Options, click the Color box beside the Colors option.
If you’ve used a template and linked the colors to the theme, you’ll see an option to Unlink the Theme color when you click the color box.
To unlink the theme color, click the box that says “Unlink from theme color”.
After unlinking the theme color for the button element, select a color from the color picker and click the plus (+) icon under My Colors.
Once you click the plus icon, you’ll be asked to select whether you want to add the current color as a favorite or a global color. Select Global.
Clicking on global will add the color as a global color under My Colors. You can differentiate between global colors and favorite colors under My Colors by seeing the little triangle you see within the global color blocks.
Please ensure you click the Apply button to save the color changes you’ve made.
Editing a Global Color
To edit an existing global color, click the element you’ve applied that color to, open the Main options in the left panel, and click the color block.
After you click the applied color block, you’ll see the color picker with two options on it.
To edit the applied global color, click Edit Global Color.
Note: Editing a “Global Color” means that the changes/modifications you bring to this color will be visible and applied to every element where the selected Global Color is used.
So, for example, if you have a “Global Color” applied to your headings, paragraphs, icons, etc. then, they will all be changed, once you finish editing the global color on one of them.
After clicking Edit Global Color, select a color from the color picker and click the checkmark beside the global color name. This will save the edited global color.
You can also edit a global color by clicking the pencil icon you see beside the global color name when you click the element.
After editing the global color, please ensure you click the Apply button to save the changes.
Unlinking a Global Color
Unlinking a global color means you are editing an applied global color only for the element selected. This won’t change the color for any other element you may have applied it to.
To unlink a global color, click the element you’ve applied that color to, open the Main options in the left panel, and click the color block.
After you click the applied color block, you’ll see the color picker with two options on it.
To unlink the applied global color, click Unlink Global Color.
After clicking Unlink Global Color, select a color from the color picker and click the Apply button.
You can also unlink a global color by clicking the unlink icon you see beside the global color name when you click the element.
After unlinking the global color and changing it, please ensure you click the Apply button to save the changes.
Renaming or Deleting a Global Color
When you set a color as global, it gets a name by default. You can edit this name to something you will remember.
To rename a global color, click the element the color is applied to, click the color and then the three dots seen beside the color name.
Clicking the three dots will give you options to Rename or Delete the global color.
When you select Rename, you can type the name you want to call it by. After typing in the name, click the checkmark to save it.
When you click Delete, you’ll see a confirmation block asking you whether you want to proceed deleting the global color.
Convert a Favorite Color to Global Color
In the steps above, we’ve seen that while adding a color under My Colors, you can choose to save it as a Global color or a Favorite.
Global colors under My Colors have a small triangle within the color block while the favorite color does not.
The difference between a global color and a favorite color is that you will have to keep selecting a favorite color for all the elements you want to apply it to – in case you plan to keep changing it. The global color in this case makes it easier as you just need to change it once and it’ll be applied to all the elements you’ve previously used it on.
To convert a Favorite color to Global, click the Favorite color block under My Colors and click the plus (+) icon to follow the steps we saw to add a color as a global color.
We’ve just seen how you can add, edit, unlink, rename, and delete a global color. Want to know different ways global colors can ease your website design process? Read our article here.
Next, do you want to maintain uniformity across content box elements on your website? You can refer to our article here that will help.