3 New Features and 2 Improvements Added to Thrive Suite – Late September 2021
Yep, it’s that time again.
It’s finally time to share another round-up post of new product updates for our Thrive Suite customers!
This week, we’re sharing 3 great new features....
and 2 helpful improvements...
Let us know your feedback and questions in the comments. We can’t wait to hear from you.
1. A Shiny New Number Counter Element!
Adding an animated number counter is a highly requested feature, and we’re finally happy to add this little element to the Thrive Visual Editor.
Loyal Thrive users will remember that we had number counters way back in the day of Thrive Content Builder + our legacy themes. We figured it was about time we brought it back as a brand new visually editable element.
Want to see the new Number Counter element in action? Let’s give it a whirl...
Do you know how many times the Ommi theme has been downloaded?
Not only is the Number Counter ready to drop into your designs right now, but it’s also packed with powerful customization features:
Style it however you want!
Like all elements in Thrive Architect, we believe in code-free visual drag-and-drop page building. So don't let the default element fool you.
You can change the font, font size, font weight, color, line height, and spacing for the counting number, it's suffix and prefix, and the labels.
Start and end values
The Number Counter animation starts as soon as it enters the screen. (We've used gifs above to loop the animation for demonstration purposes.) If it’s placed above the fold, it will start as soon as the page is loaded. If it’s placed below the fold, it will start when your visitor scrolls to first view it.
For large numbers, it doesn’t always offer the best user experience to start counting from 0. The starting value lets you choose from where the animation begins.
Likewise, your Number Counter can count down to your final total. This is perfect for where a lower number is more impressive (e.g. weight loss, financial debt support).
The end value is much simpler... it’s the total figure of your final Number Counter.
Setting a decimal point
The new Number Counter comes with complete control over how decimal points are displayed – perfect for currencies and precise measurements.
Right now, you can choose between 0 to 3 decimals places using the handy slider.
What’s even more impressive is how the number is automatically rounded to match your choice!
Depending on your country’s numbering system, you can choose either a period (.) or a comma (,) as your decimal point character.
Choosing a thousands divider
When numbers get into the thousands, it can make sense to add a separating character to improve readability.
Some countries use a comma:
Some countries use a period (aka a point):
And some countries use a space:
It’s completely up to you.
Add a prefix or suffix
The new Number Counter lets you quickly add an optional prefix and suffix to either side of your total.
Prefixes and suffixes are perfect for currency symbols or short abbreviations:
What’s that? You want more customization options?
Now you can easily add visually-editable labels above or below your Number Counter – or above AND below if you choose!
Here’s some typical examples how how you might use a label on your Number Counter element:
Finally, you can also customize the animation speed for your Number Counter.
Choose from 1 of 3 presets (slow, default or fast), or set your own custom speed in milliseconds.
It’s easy to preview the animation speed within the Visual Editor, simply by clicking the little eye icon shown above.
We love the new Number Counter element, and we hope you’ll use it in many interesting ways to enhance your content.
Want to see some more great examples of the new Number Counter?
Check out Hanne's video below, as she leads you through some best practices and practical use cases for this attention-grabbing design element.
2. New Dynamic Data Sources in Thrive Automator
What does that even mean?
It means more business insights, more cross-platform integrations, and ultimately more opportunities to sell your product or service!
Imagine if you could capture information about your visitors (or course students), and pass those values to other services... like setting tags in your email service provider.
Well now you can!
Head on over to Thrive Automator to find a new Dynamic Data button waiting in the action step...
This small, unassuming button is insanely powerful. It lets you pull information about your visitors and whatever event has taken place and pass it along.
Take a look at this example below, where you can feed the WooCommerce product name into a tag that you add to a contact in ActiveCampaign. With just one automation, you'll be able to add custom tags per product every time a customer makes a purchase from your WooCommerce store!
If you’re already familiar with the Dynamic Text feature inside the Thrive Visual editor, you’ll feel right at home with this new addition to Thrive Automator.
Here’s just some of the options available:
- WordPress username
- WordPress user email
- Course title
- Course topic
- Course difficulty
- Course author
- Percentage of course completed
- Order amount
- Payment processor
- Payment date
- Testimonial title
- Testimonial author name
- Testimonial author email
- Testimonial author website
- Quiz title
- Quiz type
- Campaign name
- Campaign type
- Campaign start date
- Campaign trigger type
- User consent field
- Order number
- Customer ID
- Customer IP address
- Billing company
- Billing state, postcode, country etc.
- Billing first name, last name, email, phone etc.
- Shipping company
- Shipping state, postcode, country etc.
- Shipping first name, last name, email, phone etc.
- Payment method
- Order status
- Product type or name
- Product SKU, description, status etc.
- Upsell IDs
Let the possibilities of this sink in for a second... you can now send this information to any integrated platform that supports incoming values.
It can be hard to wrap your head around the applications at first, so here’s some examples:
When a student has completed the free lessons in a Thrive Apprentice course, tag them with “Free Lessons Completed - %course_title%” in your email service provider, and trigger a pre-written autoresponder to convince them to purchase the course.
When a visitor subscribes to your email list with Thrive Leads, tag them with their %user_consent% choice in your email service provider, so you have a clear way to segment those who have consented to marketing communications.
When a customer buys a WooCommerce product, send the %product_sku% or %woo_product_name% to a webhook for some aftersales magic, or to your email service provider so they are tagged for future upsells.
I’m just scratching the surface here, and we will definitely explore more conversion-focused uses of this feature in future content. If you have any suggestions or questions, let us know in the comments below.
The more we think about the opportunities opened up by the new Dynamic Data feature, the more excited we get here at Thrive Themes. With a little careful planning, this new feature promises to be a game changer for your sales and marketing funnels!
3. Dynamic Text for Menu Items
We've made a few changes to the custom menu element recently, with the vision of supporting a more dynamic and customized experience for students and website members.
- Logged in/ Logged Out menu items: the ability to hide a menu item depending on whether a user is logged in or out.
- New icon and image formats in menus — including support for dynamic images in menus: This allows you to create any combination of images, icons and text both above, below or on the sides of a navigation item and to display a logged-in user's profile image.
In the latest release, we now added support for dynamic text in custom menus. When you're directly editing a Navigation Item on the canvas, you'll see the dynamic text icon available in the typography bar:
Remember, 'dynamic text' means that the text will intelligently update based on a dynamic (changing) source.
We added this with a specific use case in mind: showing a logged-in user's image and first name as a customized menu option.
By loading User Data > WordPress user first name as your dynamic text, you can create menus just like this:
Think about it.
What a beautifully customized website experience, for your users to log in and find all their necessary links inside a menu item with their name and profile image.
4. Give your Core Web Vitals a CLS Boost in Thrive Leads
As a web page initially loads in the browser, Google carefully watches to see if new elements pop in and force the layout to shift around unexpectedly.
The more the page jumps around and flickers trying to load, the poorer the user experience and the higher the CLS score.
In short: Reduce your CLS to score better in Google’s Core Web Vitals.
As part of our commitment to speed and website usability that has resulted in many code improvements and features dedicated to speed, our product team uncovered a another improvement...
We saw that Thrive Leads forms can affect CLS, so naturally, we found a solution. Before we explain how, let's first understand why.
To make a page load faster and play nicely with caching plugins, we've always recommended setting Thrive Leads forms to Lazy Loaded. By enabling this setting, your Thrive Leads forms will load after the main page loads, meaning it won't slow down the initial page rendering.
And although there are many benefits to enabling lazy loading, there's one disadvantage:
Lazy loading Thrive Leads forms can impact your CLS score by pushing the content of your page around after it's loaded. This was only noticeable when they were above the fold when the page loaded.
But we want the best of both worlds— lazy loading and minimal CLS... and we figured out how to achieve this by adding two new features to Thrive Leads.
Improvement 1: New Ribbon positions
A common Thrive Leads form is the ribbon, and it looks like this.
Ribbons stick to the top or the bottom of a visitor's viewport as they navigate your website.
The problem was that a ribbon stuck to the top of the page and set to lazy load would 'push' the content of your page down a second after it had loaded. To combat this, we've added a 3rd Thrive Leads ribbon position: Top Over Content.
If you select 'Top over content' as your Ribbon position, then when your ribbon has lazy-loaded, it will be placed over the top of your page content rather than pushing it down.
As far as Google's Core Web Vitals are concerned, it's perfectly ok to load content over the top of your page, so long as it doesn't move the rest of the page around.
How to use this feature:
If you are making use of the Thrive Leads ribbon on a webpage that you really want to rank in Google, we'd recommend switching it to 'Top over content' as your Ribbon position.
Improvement 2: Skeletons!
Have you even opened Google Drive, Facebook or YouTube and noticed a light grey placeholder that displays for a half-second before the page content renders? Something like this?
That's called a 'skeleton', and they're not just good for showing users that page content is loading... it also reserves space on the page.
In Thrive Leads, there are a few lead form types that can impact your CLS scores: the widget form (that appears in a sidebar on your website) and the Lead Shortcode (that you can embed anywhere).
These forms, when lazy loaded, will push other content around the page once they've loaded.
So to fix this, we've added our own simple loading skeletons— a light grey placeholder that reserves space for the Thrive Leads form while the page content loads.
Here’s an example page a few milliseconds after loading a page with 2 Thrive Leads forms:
... and here’s the same page a second later, when the skeletons are replaced with the lazy-loaded content:
It’s a simple solution with a big payoff – The layout doesn’t change or flicker, so the CLS impact is greatly reduced!
This is a much more professional experience for the end user, and it helps you achieve a better Core Web Vitals CLS score, which can factor into better SEO performance.
How to enable Thrive Leads Skeletons:
All you need to do is update to the latest version of our plugins, and re-run Project Lightspeed. That means going to your Thrive Dashboard, clicking 'Project Lightspeed', and selecting 're-run asset optimization'.
Read our knowledgebase article on how to re-run Project Lightspeed.
But does it make a difference? YES!
We tested our Thrive Leads improvements many times to ensure that we'd see meaningful improvements to CLS, and we're proud to say that yes it made a difference.
Have a look at the score our test page was getting before enabling the latest changes in Thrive Leads:
Our test page had a Thrive Leads ribbon, a widget form in the sidebar, and a lead shortcode embedded above the fold. Perhaps it was excessive, but we wanted to see the results on an exaggerated test.
Now, here are the results after re-running the Project Lightspeed asset optimization which adds the loading skeletons, and setting the ribbon to display 'Top Over Content':
Without any other optimizations, CLS dropped from 0.285 to 0.001. That's an outstanding score, just by running Project Lightspeed (a few clicks) and changing the Thrive Leads ribbon position.
5. Add Dark and Light Logo Variations in the Thrive Theme Builder and Thrive Apprentice Setup Wizards
The Thrive visual editor has supported both light and dark versions of your logo for a while now, letting you choose the best logo variation for the background color of your design.
A darker logo looks best on a lighter background, and vice versa.
However, this feature was hidden away deep within the setting pane of the Logo element.
And yes, your main Thrive Theme Builder website can have completely different logos than your Thrive Apprentice school. Both in light and dark flavors.
Simply head on over to the Setup Wizard of either product, upload your first logo, and you’ll see a light and dark preview that allows you to customize either variation...
Your new logos will be available in 2 places...
1. The Logo element in the Visual Editor
When you drop a Logo element onto your canvas, you’ll see both the light and dark versions in the settings pane. While this feature has been available for a while, it’s now directly linked to logos you chose in the Setup Wizard.
You can add a logo anywhere and simply choose which one looks best depending on the background of its parent element.
2. Dark and light-designed templates
Thrive Theme Builder and Thrive Apprentice are packed with professionally designed templates that you can use right away on your website. Many of these templates feature logos, such as headers, footers, landing pages, school pages and more.
Some of them are built with a lighter design language, while others use a high-contrast darker design.
Whichever template you choose, if it contains your logo, you can now control the light and dark variations from within the Setup Wizard.
The main reason we wanted to make this change was so that our design team can create some stunning new dark header designs as part of Thrive Apprentice, which will come later in the year.
What’s Coming Next?
Oh boy, do we have some great surprises planned just around the corner...
In addition to the usual new features and updates that we’re famous for, we also have some super-secret, super-awesome improvements planned for Thrive Theme Builder and Thrive Apprentice.
That’s all we're going to say at the moment... but we're really looking forward to the day we can let more cats out of the bag.
You’ll definitely want to Watch. This. Space!