All Collections
Thrive Architect
Thrive Architect Elements
How to Use the Global Gradients Feature
How to Use the Global Gradients Feature

This article explains how you can apply and use the "Global Gradient" feature on your elements, and when it's best to use it

Thrive Themes avatar
Written by Thrive Themes
Updated over a week ago

Just like the other global elements and features, the “Global Gradients” feature also comes in handy, if you need to save time while building your website.

Here is how you can use this feature:

Adding a “Gradient”

Click on the element that you want to add the “Gradient” to in order to access its options in the left sidebar. For instance, you can select a “Background Section” and then, open the “Background Style” option.

The next step is to select the “Add Layer - Gradient” option (in this case it will be added as a layer to the background section):

Choose and adjust the gradient that you want, using the options from the window that appeared:

You can use the color picker to set the color of the gradient by either clicking on the preferred color in the color picker or pasting its code in the “HEX/RGB” field under it.

The opacity of the color gradient can also be easily set from the “Opacity” field that is also under the color picker.

Once you have set the color of the gradient, you can use the “Orientation” and the “Angle” sections to further customize your gradient:

The “Orientation” option allows you to make the gradient either “Linear” or “Radial”, while with the help of the “Angle” option you can adjust the angle of the gradient.

You can use the pointer from the “Angle” section (simply drag it to the preferred position) or enter the degree of the angle in the section next to the pointer.

Furthermore, you also have the possibility to set the percentage of the gradient by dragging the slider under the “Angle” section.

Make the “Gradient” Global

When you have finished customizing the gradient, you can add it to your list of gradients and make it global in order to be able to use it again.

For that, you will have to click on the plus sign from the “My Gradients” list:

And then, on the “Global” button:

After you have saved the gradient as a global one, you can click on “Apply” and it will be added to your element.

Using Global Gradients

Since you have saved the gradient as a global one, you will be able to use it anytime on other elements as well, while building your website with Thrive Architect.

All you have to do is to access the options of the respective elements and when you want to add a gradient to them, select the preferred one from the “My Gradients” list:

This list will contain every gradient that you have saved either as a global or as a favorite one. You just have to click on the one you want to use again and then, on “Apply” to apply it to the element, just like you did before.

Edit a Global Gradient

After you click on a global gradient, you can see that you also have the option of editing it. In order to do that click on the “pencil” icon which is right next to the selected gradient:

Important!

Please keep in mind that whenever you edit a “Global Gradient” the changes that you apply to it will be applied to every element that the gradient is used on.

Thus, if for example, you have added the same “Global Gradient” to three different elements, once you bring changes to that specific “Global Gradient”, the changes will be visible on all three elements.

You can use the same editing options that you have used when you first created the gradient: choose its color as well as orientation, adjust the degree of its angle and its percentage.

When you are done, click on the check sign next to the gradient and your changes will be saved on every instance where this gradient is used. You also have an “x” icon, next to the check sign. Clicking on the “x” will cancel the changes:

Unlink global gradient

This option appears after you have added a “Global Gradient” to an element:

If you click on the “Unlink” button, you will unlink the respective element, you are editing at the moment, from the “Global Gradient” feature.

This means that next time when you will edit the “Global Gradient” on another element, the gradient on this element will not be affected, it will not be changed automatically like the other 'linked' ones.

Rename and Delete

You can edit the label of a gradient and give it a new name if you click on the three dots next to the "Unlink" button from the edit section.

In case you want to delete a “Global Gradient” you can use the “Delete ” button located right under the "Rename" option:

Note: Removing a gradient from the color picker does not mean that the gradient will disappear from every element that it was used on.

This simply means that going forward the gradient acts as a general one, thus you will be able to change it or edit it as you normally would.

Turn a Favorite Gradient into a Global One

If you have previously saved a gradient as “Favorite Gradient”, you can easily turn it into a global one. Select the color you want from the "My Gradients" list, and then click on the plus "Save Gradient" sign:

In the pop-up that opens, select "Global" and then save the changes by clicking on the "Apply" button:

The gradient will be turned into a global one (you will see the little triangle appear in its lower right corner) and you can use it accordingly:

If you want to know even more about how to use "Global Gradients", then, check out this blog post.

Besides “Global Gradients” you can also use “Global Colors” to have an effortless website-building experience. If you want to find out how “Global Colors” work, read this article.

Hopefully, this article was useful for you. If so, please reward it with a smile below :)

Did this answer your question?