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!

Setting Up a Global Color

In the example below, we have a landing page that has 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:

Then, click on the "plus" icon:

And save the color as global:

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

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: 

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:

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: 

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

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

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.

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!