Based on the same principle, Global Gradients allows you to apply the same gradient in multiple places on your website with the click of a button. If you ever want to change them, you can do it from one place and the changes instantly apply site-wide.
To fully understand this new feature, check out the video at the top of this post.
Applying a Global Gradient
In the Global Colors video, I showed you how the feature works on a particular Thrive Architect landing page.
After applying the Global Colors, the final page looked like this:
So, to keep the momentum going, we'll apply the Global Gradients on the same page.
We'll select the main background section, and instead of having the light blue color, we will apply a gradient on it.
Then, look for the "Background Style" option and apply a gradient:
Now we can go ahead and choose our colors for the gradient.
When applying a gradient, be very careful with the colors you use. Make the gradient look subtle. Subtle gradients tend to look nicer. If you overdo it, you run the risk of looking like a Windows 95 powerpoint presentation.
Check out this blog post made by Shane on the subject: Gradients in Thrive Architect: How to (& How NOT to) Use Them
In our case, we'll apply a linear vertical gradient and make the top side transparent. For this, we'll have to take the opacity level to 0%:
Aaand, this is how the background section looks after doing this:
After we applied the desired color, we can save the new gradient as a global gradient.
To do this, click on the "plus" icon found under 'My Gradients':
Then, select "As Global":
Now, to apply the gradient on the two content boxes found on the page, the process is simple.
Select the Content Box > Background Style > Gradient and look for your saved Global Gradient under "My Gradients":
Done! We've managed to apply the gradient on all the main elements on the page that used the light blue color:
Global Gradients vs Favorite Gradients
"Well... Can't I just save a gradient as a Favorite?"
Yes, up to this point in our example, there's little difference. We just applied the gradient on a couple of elements at once but we didn't change the colors of that gradient.
However, to change the the global gradients after applying them, you can simply select the saved gradient and click Edit > Gradient, and apply a new color:
Now, the Global Gradient has been changed on all the elements that use it, and the new colors are shown site-wide.
Give it a Shot
Try out the Global Gradients yourself and you'll see how you can spice up the design of your website whilst saving time.
But remember: don't get too carried away. Subtle gradients are better gradients.