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

Matt   26

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.


Global Styles Feature Recap

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!

Need Help Setting Up Your Own Global Styles?

If you'd like to learn more about the specifics on how to use the different Global Styles tools on your website, make sure to read this Thrive Knowledge Base article about them all here.

Global Styles Gets a Fresh Upgrade

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...

What's the Difference Between the Global Styles, Content Templates & Symbols Features in Thrive Architect?

1) Global Styles: These are linked design elements that share the same CSS style properties.

Modifying the style properties for one of these linked elements (such as background color and/or typography settings) will then cause the same change to occur on all other instances of elements using it.

Note: No content changes (such as copy or image modifications) in one Global Styles instance will be applied to other instances.

2) Content Templates: These are design elements that are saved for frequent reuse on other posts & pages on your website.

Content Templates are not linked together in any way. Changing one instance of a content template will not change another instance.

3) Symbols: These are linked design elements that share both CSS based style properties and HTML based content elements.

Style and content modifications to one instance of a Symbol will be applied to all other instances of that Symbol across your website.

How To Save & Apply Shared Styles to Content Boxes & Background Sections

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.

Three different Background Section elements with different styles (colors & typography properties) as well as different content elements inside each of their borders.

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:

To save a Background Section or Content Box as a Global Style, click on the "disk" icon in the Style Options tab within the Thrive editor sidebar, give it a style label, and click "Apply".

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 examplethe page now looks like this:

To share the new Global Style created with one or more Background elements, open the Style Options tab in the Thrive editor sidebar, click on the saved Global Style, and press "Apply". The Background Section you selected will update to use the style properties of the saved Global Style. However, none of the content elements (images, buttons, etc.) in the other Background Sections will be modified.

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.

Feature Improvements to Global Button Styles

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:

Save a button as a Global Button Style by assigning it a label in the Style Options tab of 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.

Applying your saved Global Button Style is as easy as: first dropping a default button onto your page...

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:

By applying your saved Global Button Style to the default button, it will now share the same CSS style properties of other buttons using that same Global Button Style.

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:

Your saved Global Button Style will recall the style properties of your icons and secondary text, but you'll have to toggle them on in the sidebar manually. You'll also have to select a new icon for the new button. 

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.

Now It's Your Turn

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!

by Matt  January 22, 2019


Enjoyed this article ?

You might also like:

Leave a Comment

  • I’ve been using it all. Templates, Symbols (which I LOVE) and Global colours. As a result, site updates are now done in a fraction of the time. ThriveThemes never sleeps, and I’ve been a member since the start – that’s over 4 years ago at least, so I should know. Love that this is so well supported. I’d give up the website side of my business if I didn’t have this. Truly.

  • Um, you guys are legends.

    Honestly I’ve never had so much liberty in designing my website. I came from an Adobe Muse background, and your Thrive Architect – just works! Using templates, symbols and now these new features, makes such a difference. I’m creating higher quality pages, faster than before and easily with responsive. I’ve certainly got more to learn to be able to tweak my responsive designs – but I am light years ahead of where I was.

    So thank you for your continuing development.

  • Great! I love this! What I would need is to be able to do is to duplicate ThriveBoxes, because I have to re-create all of them that look the same, that’s just the Mailchimp’s list that is different, but the template is the same. That would be an awesome time-saver!

  • Great. It would be nice to have the possibility to save the styles as a global page as well as global site. ¿Make senses?

  • Thanks for another great feature – and for explaining the difference between global styles, templates and symbols so well.
    Thrive Architect is becoming more and more powerful and I look forward to every new update now!

    A couple of thoughts for the dev team:
    – Would it be possible to have options to delete or reorder global colours I have previously set up in the colour picker (I added one or two by accident)?
    – Would it be possible to have the names of icons in the icon picker next to them, so we can begin to learn what they are called and hence search for them more easily?
    – When modal dialogs for picking templates, icons, buttons, etc are shown on screen, could they be made larger by default? (for some lists, such as icon picker, it makes for a lot of scrolling, or having to adjust the dialog manually every time)

    When I save out templates or complete landing pages, I never see a preview of that template or page on the central templates screen.
    Or if I do, it’s of the generic “original” page I selected from the template list, instead of a preview of how I changed it.
    Is this is a bug or should it be a feature request?

  • OMGGGGGGGGGGG…this is awesome! Of course all my existing stuff was done manually, so I “get” how kewl this is. Y’all rock! Hugs&Blessings. MamaRed.

  • Is there any way to update OLD buttons/styles on a page in-mass? I guess i’m just curious if I need to go back and change all of those individually before I can start applying global styles…?

  • Another great step forward for Thrive Architect and another giant leap ahead of all competitors. I continue to be so spoiled by TA that I’m considering firing all my non TA based clients 🙂

  • I certainly like the direction Thrive Architect is going… How long before we don’t even have to fuss with a theme for our Site Builds?

  • Hi,
    This is great, but I want to be able to add MENUS on the menu bar even if I’m creating landing page or anything else. Where’re pop up Register and Login templates. These are features I would like to see integrated in the Thrive Themes. If these are already integrated, please guide me on how to access them. Thanks

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}