Do you want to maintain a uniform gradient on your website? You can do that using global gradients in Thrive Architect.
Using a global gradient will eliminate the effort required to adjust colors, orientation and angles in a gradient while maintaining uniformity across the website.
In this article, we’ll show you how you can add a gradient background to a Thrive Architect element, how you can mark that as a global gradient, and reuse it on the website.
- Adding a Gradient Background
- Making the “Gradient” Global
- Using Global Gradients
- Editing a Global Gradient
- Unlinking a Global Gradient
- Renaming and Deleting a Global Gradient
Adding a Gradient Background
To add a gradient background, open the post or page in the Thrive Architect editor, click the element you want to add the gradient background to, and click Background Styles.
Under the Background Style block, select Gradient, select the orientation and the colors in the following fields.
When you select the Gradient background, select the color you want to add.
Making the “Gradient” Global
Once you add a gradient background, you can mark it as a global gradient by clicking the plus (+) icon under My Gradient.
After you click the plus icon, you’ll see options to select whether you want to set the gradient as global or favorite. In this example, we’ll opt it to be a global gradient.
Using Global Gradients
When you add a custom gradient to the Global gradient list, you can use it for all the Thrive Architect elements on your website.
To use a Global Gradient for an element, click the element on the page, open the Background style block and click the gradient you want to use from under My Gradients.
Editing a Global Gradient
Adding a gradient to the global gradient list isn’t the final thing. You can edit existing gradients too.
To edit a global gradient, first click the gradient under My Gradients.
When you click a gradient, you’ll see the tab with the gradient name and some icons beside it. Click the pen icon to edit the gradient.
Note: Editing a global gradient will get applied to every element that you’ve used this global gradient to.
When you click the edit icon, you can use the same editing options used while first creating 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.
Unlinking a Global Gradient
Editing a Global Gradient by following the steps above will edit the gradient and apply it to all the elements you’ve used it on.
If you want to use a global gradient first and edit it further for only the element you are currently using it for, you can unlink the global gradient and make changes that will be applicable to only the current element.
To unlink a global gradient for a specific element, first, click the element on the page opened in the Thrive Architect editor, open the Background Style in the left panel, select the Gradient stye, click the global gradient you want to apply.
When you select the global gradient, click the Unlink icon.
Unlinking the Global Gradient for the element 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.
Renaming and Deleting a Global Gradient
When you add a Global Gradient it is named as Gradient by default. This feature lets you rename a gradient so you can set and remember a purpose you created it for.
Similarly, you can delete any unwanted global gradients to keep the list short and precise.
To see the rename or delete options, select the global gradient and click the three dots you see beside its name.
When you click the three dots, you’ll see the options to Rename or Delete the global gradient.
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.
We’ve just seen how you can apply gradients to Thrive Architect elements, save the gradient as global, use it for different elements, edit, unlink, rename and delete it when needed.
Next, if you want to use Global colors to ease the process of color selection and designing on your website, you can refer to our article about global colors in Thrive Architect.