New Addition to Thrive Architect: Global Gradients

After the recent addition of Global Colors, we are now introducing Global Gradients in Thrive Architect!

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.

More...

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: 

The "Flat 2.0" Landing Page after applying Global Colors

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: 

Choose the Gradient option from Background Style

Now we can go ahead and choose our colors for the gradient.

Important! 

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%:

Select the right end of the gradient slider and then minimize the opacity level

Aaand, this is how the background section looks after doing this: 

The main background section now has a gradient applied on it

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':

Click on the "+" icon to save the gradient

Then, select "As Global":

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": 

Your new gradient will be found 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: 

This is how the page looks after the Global Gradient has been applied on multiple elements

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.

Author: David Gavrilut

David is a content marketer at Thrive Themes, previously in charge of the Thrive Knowledge Base articles and video tutorials. When not at his working desk, he enjoys driving like an enthusiast, visiting the beautiful cities of Transylvania for the 100th time. Either that, or he could end up watching an entire season of Friends in one day.

  • Mark W says:

    Great new feature – thank you.

    How about Thrive coming up with some gradient templates in a variety of subtle colours we can select from then save as global – that would be awesome

    • David Gavrilut says:

      Hi, Mark!

      If you watch Shane’s video that I mention in the current video, he talkes about a few websites that have lots of cool gradient examples that you can use on your website right away.

      Such examples include: Uigradients.com or Webgradients.com

      • Mark W says:

        Thanks David

      • David Gavrilut says:

        My pleasure, Mark :)

  • Jonas Troyer says:

    I love it!! ????????

    Will be using it for sure.

    • David Gavrilut says:

      That’s awesome! Glad to hear it, Jonas :)

  • Craig B says:

    Hey David – very nice – now I am wondering if you had a conversion capability to change any of the gradients into .svg files – would using svg save in file size, band width, server requests etc – is it practical for Thrive to incorporate a similar feature, but with svg – thanks for your thoughts!

    • Hanne says:

      Hi Craig,
      This is not something we currently have on the roadmap

  • Eric says:

    Hi

    Are the global colors and gradients sticked to a page or an article or are we able to put a global color in many pages and change it once for all ?

    Thanks in advance for the answer

    • Hanne says:

      Hi Eric,
      It works across pages!

      • Eric says:

        Thanks Hanne????

  • Odairalovely says:

    Yes loveit!!!

  • ayush singh says:

    Great, keep working on good themes.
    love it.

  • Lior says:

    Hi, I want to buy thrive architect but I need a website in Hebrew.
    Does it support Hebrew? (In Hebrew we writing from right to left so in many programs like Photoshop Hebrew is not support).
    Thank You

    • Hanne says:

      Hi Lior,
      Sorry we don’t support RTL writing.

      • Lior says:

        Also in Thrive Architect?

  • James Thomas says:

    Excellent information
    I always learn something new from these tutorials

    • David Gavrilut says:

      That’s awesome! Glad to hear that, James :)

  • >

    Join Thrive University (it's FREE!)