Global Styles Upgrade: New Features to Save You Time & Improve Design
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
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?
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).
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.
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.
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:
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.
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!