1-Click Update Your Website’s Shared Content Boxes & Background Styles

Here at Thrive Themes, we're on a quest to make it as easy as possible for you to create a unique identity and style for your website.

We also want to make it as simple as possible for you to change and tweak your website with the fewest number of time consuming button clicks as possible.

To help you do that, we just expanded the capabilities of our Global Styles feature to help you achieve that across your website.

Watch the video above or read on to learn how all the improvements we just made to our Global Styles tools and how they can help you make important design changes across your entire website in just a few simple clicks.

Our push to give the Thrive editor total Global Styles design control kicked off back in the Fall of 2018 when we released our Global Colors and Global Gradients features.

These two particular features offered Thrive Architect users the power to link up colors and gradients for specified design elements — across an entire website.

Even though those are still new additions to the Thrive editor, we didn't want to stop there...

We proceeded to release our new Global Button Styles feature to bring the power of Global Styles to button design too!

Of course the Global Colors, Global Gradients and Global Button Styles are powerful new features for Thrive Architect, but they still fall short of complete Global Styles website domination.

To achieve that, we knew we needed to expand the feature to enable shared styles for Content Box and Background Section elements too.

So that's why we just upgraded the Global Styles feature set to include them while adding improvements to the Global Button Styles feature at the same time (more on that in the video and further down in this post).

But first, now's a good time to just remind you about the important distinction between the Global Styles, Content Templates and Symbols features in Thrive Architect...

To show you how Global Styles work for Content Boxes and Background Sections in the recent feature update, observe the three Background Section designs shown below.

Each of these three different Background Section elements has a different set of content elements (i.e. headings, paragraph text, images and a buttons) as well as different style properties (i.e. background colors and typography properties):

Let's say your goal here is to change all 3 of these Background Section elements to be linked through a single, shared Global Style.

Here's how you would go about doing that:

First, redesign one of the background sections with the new style design you want. In this example, we changed the top Background Section to have a darker background color and a lighter font color:

Once you're done making your style modifications, click on the "disk" icon in the Style Options tab within the Thrive editor sidebar, give it a Global Styles label, and click "Apply" to save the new design set.

To then share that new Global Style with one or more Background Section elements, click on each (in turn) to access the Style Options tab in the Thrive editor sidebar, click on the Global Style you just saved, and press "Apply".

After doing this to the middle and bottom Background Sections in the example, the page now looks like this:

And because each of these Background Section elements is now linked through a shared Global Style, changing the style properties of one will change the style properties of the rest.

Remember that this feature works the same for Content Box elements as well now.

We also made a few improvements to the way the Global Button Styles feature works for you.

To help illustrate the new changes, imagine that you just customized an old button on your site so it now has a new color, new typography properties, a line of secondary text and an icon...

Here's how you can save and start applying that unique combo of new style choices to multiple buttons across your site without changing any of the content within them (like button specific call-to-action copy).

First, you'll need to save your new button design by giving it a label in the Style Options tab found in the Thrive editor sidebar:

Notice that this example shows an icon and secondary text within the button. These are button features you can toggle on in the Main Options tab of your Thrive editor sidebar.

Now, we'll add a default button to the page to show you how your saved Global Button Style can be applied to it.

Now click on the new default button to then apply your Global Button Style to it from the Style Options tab in the Thrive editor sidebar:

Just like that, the color and typography properties of your saved Global Button Style are applied to your new button. However, notice also that the icon and secondary text are not displayed. 

Here's what's up with that...

If you want an icon and secondary text to display themselves on your new button, you'll need to manually toggle them on from the Main Options tab of the Thrive editor sidebar.

When you do that though, the style properties of your icon and secondary text in your saved Global Style are recalled. You only have to reselect an icon appropriate to the context of your new button an you'll be good to go:

Remember that Global Styles only share CSS style properties and not HTML content elements.

If you'd rather have all instances of a button design share both its style properties and content elements, use the Symbols feature instead.

With this recent update to the Global Styles feature in Thrive Architect, you now have even more flexibility to direct how different objects behave across your website — while minimizing the time it takes you to achieve those same designs.

Have any thoughts, comments or questions about this new Global Styles feature update?

Make sure to make some noise for us in the comments section below!