Here’s Why You Need to Start Using Global Colors on Your Website

You want to be able to change a predominant color from your website without going through all the places where you applied that color?

All that is now possible, in Thrive Architect, with the addition of global colors!

More...

Setting Up a Global Color

In the example below, we have a landing page that has a red predominant color: 

Landing Page with a red predominant color

And you're not exactly satisfied with the red color, but you don't know exactly what other color you could use, either.

Here's what you should do: Instead of testing new colors only on one of the elements, test them on the entire page at once, by applying the global color!

To do this, click on one of the elements that has the red color. In this example, we'll select the red background section and go to Background Style > Color Picker:

Select the "Background Style" Color Picker

Then, click on the "plus" icon:

Click on the "plus" icon to save the color

And save the color as global:

Click on "As Global"

The grey right bottom corner on the color will indicate the fact that the color is a global color:

Global color indicator

What About the Other Elements?

Once you have the global color set up, applying it on other elements takes less time.

For example, to assign the global color to one of the headings from our landing page, select the heading, go to Text Options > Color Picker: 

Click on the "Text Options" Color Picker

Now, all you have to do is click on the global color that you have just set up, found under "My Colors". Look for the color with the grey indicator:

Find your global color under "My Colors"

Click on apply, and the global color has been assigned to the heading!

Repeat this process for all the elements you want to assign a global color on.

Changing the Color Across the Page

Now that the global is applied on all the red elements, let's see what happens if we change that color to blue.

To do this, we'll click on either one of the elements that has the global color (e.g. the background section), go to Background Style > Color Picker > Edit > Color and choose a different color: 

Change the global color by entering the Color Picker and then select Edit > Color

Aaaand here's what actually happens on the page when you change the global color:

When the global color is changed, it affects all the elements that carry that color

And just like that, you can see how any color looks on your entire landing page! 

Important! 

The Global Color feature is best used at the beginning of building a page. In that way, if you know you're going to use the same color on multiple elements, you can just set it as a global color.

Use Global Colors Sitewide

You're not limited to using the global colors on one single page. You can actually apply the same global color on multiple pages, and when you change the color, all the pages where it is applied are affected. 

Here's a cool use case.

In many Thrive Architect Landing Page sets you will find a Lead Generation page, a Confirmation page and a Download page.

When you select the differnt funnel pages from within the same landing page set they'll share the same design language - Same structure, same colors.

Lead Generation, Confirmation and Download pages are found in every Thrive Architect landing page set

Applying the same principle found above, you can go ahead and set as global colors the ones that are predominant on all of the 3 landing pages.

Try 'Em Out!

Now it's your turn to test the Global Colors on your website. Don't be afraid to use them on all the Thrive Themes products that feature the Thrive Architect editor.

If you have any questions regarding this, leave a comment below and I'll be more than happy to get back to you!

Author: David Gavrilut

David is a video content creator and writer at Thrive Themes. 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.

  • Scott Branch says:

    Great job team, that is a fantastic new feature. I can see how it will save a lot of time when a simple color design change is needed.

    Will saved templates be able to retain their global colors when imported to another site? This would be nice for using templates with different customers that need similar page designs.

    • David Gavrilut says:

      Hi, Scott!
      We’re working on finding a solution for this but, for the moment, global colors only work on the site on which they have been set up.

  • Jonas Troyer says:

    Very very cool! Something I’ll definitely be using a lot! Thanks David!

  • Dennis L says:

    Hey there, really cool! Two questions:
    1. Have you updated all of the template landing pages to use global colors? If so, is there a way to update existing landing pages?
    2. Does this only work on landing pages or does it work on theme pages, as well?
    Thanks,
    Dennis

    • Matthew W says:

      Also wondering on use of global colors as we are currently designing a sample of pages and haven’t settled on this yet. I’m wondering whether we have to our colors now and then revisit older pages if we decide to change the color or if it works retrospectively so long as colors used were saved as global?

      I’m also wondering this with symbols too…

      • Hanne says:

        Hi Matthew,
        This is not “retro active” so even if you use the same color and now you save it as a global color the old pages and elements would not be “linked” you would have to go in and assign the new global color.

        Same with symbols, if you transform a template into a symbol only when inserting the symbol from then on, it will be linked.

      • Matthew W says:

        Thanks for confirming. Will be sure to save as many elements as global or symbols from the get go then πŸ™‚

    • Warren says:

      Yes, it would be awesome if all of the templates were updated to use global colours – it would make customising them even simpler πŸ™‚

    • David Gavrilut says:

      Hi, Dennis!
      1. The old templates haven’t been updated yet, but we are working on finding a solution for the upcoming templates. However, until then, it is actually pretty easy to asign a global color to the existing elements, as seen in this blog post πŸ™‚
      2. It works on any page that can be edited with Thrive Architect.

  • MamaRed says:

    OMG, I was just asking about this feature after discovering a post while looking for something else the other day. Wheeeeeeeeeeee!!!!!!!!!

  • MamaRed says:

    One question…is it possible to use those global colors on standard pages or only those created with TA?

  • David Moran says:

    A wonderful gem, not having the best memory my life has just been made easier.

  • Emil G says:

    That’s an awesome feature! I’m going to use it on every single site I create.

    However, I think you guys will have a big challenge to educate all users on when to use Architect vs. the new Theme Builder.

    It is not clear to me, which features should be included in Architect and which ones should be added to your new Theme Builder instead. But I guess it might get more clear when we have tried them out a bit.

  • Todd says:

    Is it possible to edit global element colors with this for the navigation menu, header background, etc?

  • Trevor says:

    Great time saver!

    Now my site will slowly morph through all the colours of the rainbow as I play with this feature…
    πŸ˜‰

  • Great Feature. Thank you so much, David.

    I imagine this will also apply when building a custom post, as the ones Hanne taught us to do a few days ago. Right?

  • Fred says:

    Ok, now I’m a little freaked out. Are you guys mind readers or something? Do you have a psychic on staff??? LOL!

  • Richard M says:

    So that means I can now change the colour of my website to match the colour of my shirt and socks every day πŸ™‚

    Seriously, love this feature…keep the new features coming

  • I’m commenting without even watching the video. So excited, thank you for features like this.

    Feels like you’re focusing on power users/non-starters too now. Glad to see this direction.

  • Pascal B says:

    In addition to global elements, headers and footers this is an awesome feature.
    Thanks!

  • Willie says:

    Great news. Not to nit pick but website is spelled wrong in the title.

  • Thomas B says:

    I love you guys!
    This is simply great. πŸ™‚

    By the way:

    Whenever a mail from Thrive Themes pops up in my inbox, I instantly open it and read your blog posts – no matter what I do.

    I am doing this only with your mails, and as person who likes to focus I am surprised to find myself still opening every single mail from you instantly. πŸ˜‰

    But it’s totally worth it – its never a distraction but a welcomed break which makes my day brighter and saves me a lot of time. πŸ™‚

    Thank you for your outstanding work!

  • Owen A says:

    Thanks guys. This is a great feature.
    As I update my pages I’ll move my design elements to global colors.

  • Scott says:

    Wow, this an amazing feature! Thank you for adding it.

  • Megan says:

    It might be a bit much to ask (or I may have misunderstood)… but have the templates been updated to be global colours – or do we need to manually set each colour as global as we go?

    Will future templates already be set with global colours, so it will just be a quick one-click colour change for the entire template?

    • Hanne says:

      Hi Megan,

      Templates have not been updated yet and I can’t promise if the old templates will get updated, buuuut we’re working on something for the upcoming templates πŸ˜‰

  • Dave Ellison says:

    Was hoping for a feature like this a few days ago. And here it is. Very strange πŸ™‚

  • Nic D says:

    Brilliant time saver!

    Next on wishlist is providing an easy way to edit the colours in the preinstalled colour themes. That’s a theme by theme issue but imagine the solution would be similar.

  • Zane says:

    Great explanation, David. The Global Colors feature will save me quite a bit of time moving forward. Thanks!

  • Lexi says:

    Hooray, at long last! I’ve been waiting for this feature forever. Thanks for keeping the improvements coming πŸ˜€

  • Luke says:

    Oh man, this is amazing! I’ve been asking for a page builder to introduce site-wide color palates and you did it! Thank you. Can’t wait for you to get the theme editor done so I can start rolling this out.

  • Vivek says:

    Now you are talking!

  • Felix says:

    I am loving this feature so much!! I have been contemplating on making some color changes but I knew it would take a ton of time to do it. Now it looks like once the legwork is over I will have all the flexibility I need. Thank you so much!!

  • Cheefoo says:

    It’s really awesome feature. I just implemented the global colors for my new post. A question for you and may sound amateur. Lol. Under what circumstances, should we use favorites over global ?

    • Hello Chefoo, great question.

      Global colours can be updated centrally. So, let’s say you apply a global colour to page A and page B so that they match. If, while editing page B, you change the global colour from green to red then that update will also apply to all instances of that global colour in page A (and sitewide)

      Favourite colours aren’t updated centrally. So, if you used a favourite colour instead of a global colour in the example I previously gave, the colour would only be changed to red on page B, not sitewide.

      So, in answer to your question:- use global colours for all elements on your site that you want to match. This would usually be brand colours. If you decide to modify a brand colour then your site will instantly update globally.

      Hope this helps!

  • Glen G says:

    Wow, another great feature that will speed things up for us. Nice braces too, David! lol!

  • Bibhash R says:

    This is an awesome feature – kudos to the team!

  • Esther d says:

    OMG Life changing. Thank you!!!!

  • Mark W says:

    Oh this is brilliant – thank you so much. What a great update and a real massive time saver

  • Bjarne Ravn says:

    Great, David.
    I remember an article/video og how to use the colors. Perhaps you should put a link here

  • saianudeep says:

    Thanks A Lot For The Post. It Has Helped Me Get Some Nice Ideas. I Hope I Will See Some Really Good Result Soon.

  • John says:

    Wow is this an excellent and useful enhancement. Thank you for the improvement and David’s excellent tutorial.

  • Eric says:

    Hi

    Thanks for this great time saving implementation.

    2 questions :

    – Could i use this for all my post title to replace (overwrite) the inherit color of my theme for example ? I set up all my H2 with a global color, my H3 with an other global color… to make them changeable all together.

    – As the color is identified by a name set for a specific Hexa number, we can’t take the same color name (hexa ) for different elements we won’t change the color at the same time right ?

    example : i take a blue color and name it “BlueOne” which has a specific heax number. This color is for my H2 on all the site for example.

    But one day i want to take this color for a specific CTA box in all my articles and set it up as a global color too.
    IS there a way to avoid changing CTA Box color when changing H2 color ?

    Maybe i’ve misunderstood something

    Thanks in advance for answer

    • Hanne says:

      Hi Eric,

      You could, but honestly I wouldn’t recommend it. You can simply use the theme customizer to do this. It would avoid having to think about using the right global color for each title you add.

      And because you give it a name, you actually CAN use the same hex code and have different global colors.
      So you could have a color #000FFF and call it Button blue (and use it on your buttons) and another color also #000FFF and call it Title Blue (and use it for text) now, changing the “Title blue” global color will only affect the text elements.

  • Marc V says:

    Fabulous. It saves me so much manipulations. Thanks.

  • customerperfection says:

    With all the new updates, I informed you guys a year ago about how the inline editor doesn’t work in tablet mode. I don’t understand how you add new updates and still haven’t fixed the basics yet.

    • Hanne says:

      Hi,
      I’m guessing you can imagine this is not an issue for all customers of the plugin. If so, this would have been fixed.
      If you’re still experiencing this issue on your site (after updating the plugin to the latest version and purging cache), it’s most likely a conflict specific to your site setup. Please open a support ticket on our forum and our techniciens will gladly help you out.

  • njhon says:

    great david and thanks for writing.

  • Kevin Barham says:

    What a brilliant addition – Thank You. Until now I have been memorizing hexadecimal values to use across the entire site. This will be a massive timesaver. Love it! πŸ™‚

  • Nigel R says:

    Wow, thrive themes just keeps getting better and better! Keep up the great work!

  • Anneke S says:

    thank you!
    the only thing is, i cannot select ‘global color’ it just show.. i can only create a favorite. Whats the problem? I installed thrive 1-2 weeks ago, so seems to be the latest version and all that.

    Thanks!
    Anneke

    • David Gavrilut says:

      Thanks for your comment, Anneke!

      Could you please open a support ticket and point us to the exact place where the problem occurs? We’ll solve this in no time πŸ™‚

  • Scott says:

    Great time saver! Thank you so much for doing this!

  • Duke D says:

    This is great. I do have a question as I accidentally added colors I didn’t intend to. How do you edit the color palette? I want to delete some of the colors I added.

    • David Gavrilut says:

      You simply select the color that you wish to delete, click on “Edit”, and then select “Remove”. However, make sure that you have selected the right color, because removing a global color will affect all the elements where the color has been applied.

  • Julian Marin says:

    Hi, How can I delete a favorite color (global, I know how to do it).

  • >