New Features In Thrive Themes – June 2020
Ready to see what new features are packed inside our latest software update?
When you update to Thrive Architect version 2.5.5 (and your other Thrive plugins to match) you'll get a handful of great new features and improvements.
If you're new around here, we're a fast moving company and once every 3 weeks we roll out improvements that will magically appear in our plugins when you update to the latest version.
In this post, I'll show you what's new and where to find it. Read on!
1. Table of Contents
See the table of contents above?
Tip your hat to it and thank it for it's many years of service... because this is the last time we'll use that design on the Thrive Themes blog.
After years of hard work providing quick navigation links on your websites, the Table of Contents element has now been completely rebuilt, blowing the lid off any previous design limitations.
(Don't worry, it's backwards compatible and safe to update).
Here's a quick look at a few of the templates that it comes with out-of-the-box:
It looks pretty, right? It's the customizability of this element that will impress you the most.
Let's cover the basics first.
The Table of Contents element will automatically pull in the headings from your content and display them as jumplinks. That means your visitors will see a list of your headings and can click to jump to the ones that interest them the most.
Combine the Table of Contents with Sticky Scroll behavior and it will float alongside your content as your visitor scrolls up and down the page.
We've taken it a step further by allowing you to highlight the headings as your visitor scrolls past them, helping them locate where they are on the page. Check out an example of this below.
This element is a big one, so let's go over the finer details.
New Settings Under Main Options
The Main Options panel is where you control the high-level features of any element. For the Table of Contents, you'll find a few new options there.
This controls the behavior of the highlighted items when a visitor scrolls up and down the page with a sticky Table of Contents. Highlight options include:
As you can see from the designs above, each sub-heading is indented. With this control you can easily change the depth of that indent or just remove it entirely.
Numbering can be set to basic, advanced or off. Basic will apply a number before each of the level 1 headings in your table of contents, whereas advanced will apply progressively nested numbers in the format of 1.2, 1.3 and so-on.
Rename and Hide Headings
Sometimes you may want to modify the headings that show on your Table of Contents. Perhaps one of your headings is too long for your chosen design or maybe you want to hide an H3 that has auto-populated.
With the new Table of Contents, you have complete control over your headings.
The Modify Heading section beneath Main Options lets you rename or hide any headings that your Table of Contents has loaded without changing the content on the rest of your page.
Fine Tuning Your Table Of Contents
The new Table of Contents uses an Edit Mode to give you absolute precision on everything.
Once you enter Edit Mode, you can change every font, color, border, background and corner of each heading level. Changes will be applied to all headings displayed in that level, indicated by the dotted green lines below.
While in the Edit Mode, you can access 3 states: Normal, Hover and Highlight. Highlight is the appearance of your active headings when seen in Sticky Scroll.
Support for Dynamic Table Of Contents
Those of you building templates with Thrive Theme Builder will love this: a Table of Contents can be dynamically populated.
Let's use an example. You can create a blog template that includes a sticky Table of Contents in your sidebar.
In this case, you want the Table of Contents to display different headings depending on which blog post is loaded. When used in a template, you'll see a notice about how dynamic headings will be loaded.
The trouble with a dynamically created Table of Contents is that you may still want to customize headings or hide them entirely. But if you add your Table to a template, how can you see the different headings that will be loaded from different content?
Well, we have a solution built in. When you are writing a blog post or any other content, you have some new options under 'Advanced' for any headings that you are editing.
Right from the heading itself you can customize the heading label or hide them from any dynamic Tables of Contents that may be pulling in your content.
2. Split Menu with Logo
Have you ever browsed the web for design inspiration and seen one of those beautiful headers with the company logo in the middle of the menu?
Something like the MicroConf website?
When you build your own header, you've previously put your logo to the left or the right of the menu.
But now you want to get it in the middle...
Don't worry, we've got you sorted!
Now when you add a menu anywhere on your website, you'll find a new toggle in the main options called Split menu with logo.
Clicking this toggle is going to place a logo element inside your menu.
With a few edits to the logo size, you'll quickly have a menu that looks like this:
Now that you have a logo element in the middle of your menu, you can select it to find one more option: Position when menu is hamburger.
If you're not splitting your menu, your logo will stay wherever you put it - left or right. This new option is for when you are splitting your menu.
The menu element will intelligently collapse into a hamburger menu when there isn't enough room on your visitor's screen and the position setting will tell the logo which side it should move to.
When set to Left, it will look like this:
Suffice to say, we do our best to think through and solve your design issues before you've even encountered them.
The Nielsen Norman Group are a user experience research agency that publish excellent studies on web design best-practices. In 2016 they published some research into the use of centered logos in website headers.
The conclusion was that centered logos will hurt ease-of-navigation... unless you include a 'Home' link as the left-most menu item.
We're giving you design freedom, but we believe in conversion-focused websites. If you wish to use a centered logo in your header, we highly recommend you follow NNgroup's suggestion and add 'Home' as the first menu item on the left.
3. Custom Tags on Lead Gen Selection
Over the last 6 months, we've rolled out impressive updates to the lead generation form with checkboxes, radios, dropdowns, text areas and more, allowing you to make forms like this:
But most of these features have relied on Custom Fields in your email autoresponder to store your subscriber's choices.
This week, we've added another option: Tags.
You can now pass Tags to your email autoresponder... depending on the selection your subscribers make.
How to Add Tags Per Selection
There are 2 places you can apply these tags.
The first is from the container that holds the options (radios, checkboxes or dropdowns).
In the image below, you'll see I've selected the container around 3 individual checkboxes. From this container I can click to enable 'Send answer(s) as tag'.
Because this is enabled at the container level, your lead generation form will automatically create Tags from the text on the label. That means that if a user picks the first option, then the tag 'Option A' will be automatically applied.
Of course you can edit the tag with the second method - configuring the Tag per option.
In the image below, you'll see that instead of selecting the container for all of the checkboxes, I have selected a specific checkbox, Option B.
With a specific checkbox selected, I can edit or add a Tag value that will be applied to that subscriber only if they select that option. This applies to radio buttons, checkboxes and dropdowns.
The end result?
Your visitor makes a selection while submitting the form and is appropriately tagged inside of your email marketing service at the same time.
NOTE: These tag options are only available once you have connected an email service that supports tags to your lead generation form.
4. Send Form Values To The Thank You Page
While configuring your Lead Generation form, you'll find a new toggle that automatically sends form values to your thank you page through the URL query string.
With one click, this toggle is going to append your subscriber's form entries to the thank you page address as a URL query string.
Clicking 'View variable details' will show you how the query string will look. For a Lead Generation form that includes a Name and Email, it will look like this:
This means that if I were to fill out the lead generation form and click submit, I'll be redirected to the chosen thank you page with a URL that looks like this:
Now those form fields can be collected and displayed on the thank you page with our dynamic text feature!
To display any form field on your thank you page, simply place a text element and insert Dynamic Text from the typography bar by clicking this icon:
From here, you can choose which variable you are looking to display and set a default value if there is no query string available.
NOTE: The variable called 'name' is reserved by WordPress. For this reason, your name fields will be loaded in the query string as 'tve_name' instead.
5. Email Quiz Answers and Results
The recent updates to our email notification editor have paved the way for a new feature inside Thrive Quiz Builder:
You can now send quiz answers and results in an email from your website to your quiz takers or to yourself whenever someone submits a quiz.
Quizzes are a high-converting lead generation tool because they use an opt-in gate. This is a lead generation form at the end of a quiz but before the results page. In order to see their result, quiz takers submit their email address.
While customizing this lead generation form inside of Thrive Quiz Builder, you can add an email connection that will send emails directly from your website once the quiz is submitted.
When you click to compose that email, you'll find a quiz-friendly email template pre-written for you.
You can customize this email however you please and you'll find new quiz shortcodes available for the quiz name, answers and result. Don't forget that you can send an email to yourself and a different one to your quiz takers if you'd like.
When that email arrives in your quiz taker's inbox, the shortcodes will be dynamically replaced with the content from their quiz experience.
As an example, the email formatted above applied to a short personality quiz will arrive in an inbox looking like this:
6. Set Mega Menu Width Per Dropdown
When we did the mega menu step-by-step tutorial, many of you were impressed with the flexibility of the element. But you also pointed out a restriction of our implementation and that restriction is now lifted!
Up until now, the mega menu dropdowns would automatically take on the width of the entire mega menu. This works fine for multi-column mega menu layouts, like this:
...But not quite as good for mega menu dropdowns with less content, like this:
That's why we added the option to set the width of the dropdowns individually, meaning you can resize it until it's just the right size for your content:
To find the new max-width setting, navigate to the Mega Menu Dropdown breadcrumb in Thrive Architect and you'll see your new width slider in the main options.
7. Under The Hood Improvements
Each release includes a few minor improvements you may never notice, but if you like to pay close attention, here are the noteworthy ones:
Element Color Matching
If you add a Smart Color enabled element (such as a button, tab, toggle, etc.) to a Smart Landing page or Thrive Theme Builder website, the element will now automatically match the colors of your page. Of course you can change it as you see fit, but out-of-the-box it'll inherit your brand color.
Shortcodes in Hyperlinks
In the WordPress environment, you may wish to use a shortcode as a hyperlink so another plugin can provide the URL value for that link.
We've improved the dynamic Button and hyperlink settings to make this easier for you to implement.
Like the updates? Leave a comment!
It's always a highlight for our development team to hear your feedback and new feature suggestions. Drop us a comment below and let us know what you like, don't like, and what you'd like to see next.