3 New Features Added to Thrive Suite – Early September 2021

Welcome to yet another round-up article where we showcase the latest features added to Thrive Suite.

In this release, there's 3 stand out improvements.

The first will give you a faster website, improving your core web vitals score while also improving your on-page clicks and visitor interactions.

The second will let you build a more intelligent website navigation experience, especially if you have a membership site or you are selling online courses.

And the third makes your online course library look like it was built by a designer... because it is!

Read on!

1. Video Covers, Lazy Loading and Video Speed Improvements

Remember when we released Project Lightspeed, our code optimization project that created faster websites with a single click?

Do you also remember that we said "there's more coming" ?

Some of that 'more' is here.

Next time you add a video element to your page in the Thrive visual editor, you'll find a few new settings in the left-hand sidebar, flagged by a tooltip: Lazy loading and Video Cover/ Thumbnail.

You might remember we already have a video thumbnail option that allowed you to place an image from your WordPress media library right over the top of your video.

But a 'Video Cover' is different.

If you enable it, you'll see you can select between the two. Choose 'cover' and an edit mode button will appear.

'Edit mode'...? You know what this means.

A fully visually-editable drag-and-drop edit zone right on top of your video!

Out of the box it will come with a text element, play icon and an arrow that connects the two. 

These are Thrive Architect elements, meaning you can:

While in edit mode, you'll have the option to add your thumbnail image that sits beneath the Thrive Architect elements, or to set it to dynamically display the featured image for that page or post.

When using Thrive Theme Builder, this is perfect for applying video covers website-wide on your video post templates, knowing that a different image will load as the video cover depending on the post that is displayed.

But there's something important about this video cover.

It isn't just there to look pretty...

It's going to speed up your website.

How The New Video Cover Will Improve Page Speed

When we took a long, hard look at how Google measures website speed for Core Web Vitals, we noticed something ironic:

YouTube (owned by Google) is notoriously slow to load, and impacts Core Web Vitals negatively.

The irony isn't lost on us.

The new Video Cover was built to be fast and to bypass speed issues that can come as a result of embedding a video on your page. And we'll prove it in our speed test results below.

How do you use this feature to speed up your site? There are 2 ways.

1. Lazy Loading Video Scripts

When you embed a video from YouTube or any other video service onto a page, then it also loads video scripts. Scripts are the code supplied by a video service that are necessary for the video player to load, and they can add substantially to page load times.

But what's the point of loading those video scripts (and slowing down your page) if your visitor hasn't even scrolled down to the video yet? Or, what if they don't even interact with the video?

That's why we've added a Lazy Load toggle for video scripts.

By lazy loading your videos, the original video scripts will only load when necessary.

If you don't have a video cover: Lazy loading will only load the video scripts when the visitor scrolls the video element into the viewport, at which point it needs to fetch the thumbnail from YouTube (or other video service). That means if it's below the fold, the video scripts won't be loaded until they are needed.

If you have added a video cover: Instead of loading video scripts when the video enters the viewport, videos with a video cover or thumbnail can wait even longer. That's because the cover image and text can be loaded early, without the scripts for the video underneath being required. In this case, video scripts will be lazy loaded until the visitor hovers the cursor over the video on desktop, or they tap the video on mobile devices.

In general, we recommend leaving Lazy Load for video enabled at all times, unless you have a specific reason to switch it off. But you'll get even more speed improvements when you pair lazy loading with...

2. Preloading Video Cover Images

When you set your video cover image, you'll also see an option— 'Preload Thumbnail'.

Enable 'Preload thumbnail' if your video is at the top of the page, above the fold.

What this will do is move the code for loading the image to the page head. Or in simpler terms, it means when your page loads, it will load the image file much sooner meaning it can render on the page more quickly.

The change will be visible in the code:

For the technical among us, a video cover image is not loaded as a background image with CSS— instead is uses the standard image html tag, meaning preload attributes can be applied to it. That means that you can only preload the new Video Cover, and not the standard video thumbnail that we had before.

But does it make a difference? YES!

We did a straight 1-to-1 speed test of the same page before and after the video cover image, lazy loading, and image pre-loading were enabled.

For context, this is a website on a fast host, with caching set up and Project Lightspeed enabled. Outside of those basics, no other optimizations were added— not even image optimization. 

The page included a hero video— a big YouTube video right under the page headline.

Here were the results before optimizing the video element:

Take note of 'Total Blocking Time', which came in at 4,940 ms.

Total Blocking Time (TBT) directly affects one of the 3 core web vitals metrics, First Input Delay (FID).

When a website is loading and it encounters a script that needs to be loaded (like the video script from YouTube), the page will wait to download that script. During this time, a user cannot interact with the page. They feel 'blocked', hence 'Total Blocking Time'.

So, what happened after we enabled video covers, lazy loading and pre-loading the image? Have a look:

That's the exact same page. Same server, same caching plugin, same settings...

But with about 3 clicks to enable this feature on the video element, Total Blocking Time dropped from 4,940 ms to only 200 ms (saving a MASSIVE 96%)— with an overall bump in speed score from 48 to 80!

2. Logged-In and Logged-Out Menus

Let's be honest here: the Custom Menu element is the backbone of your Thrive-made website.

Menus on standard WordPress themes are notoriously difficult to style. But not ours.

Our Custom Menu element can handle simple menus, mega menus, vertical menus, support for icons, images, dropdown submenu items, and more. All with visual editing of corners, borders, shadows, typography, padding, margins... everything.

But what about showing different menu items when a visitor is logged in, or logged out?

Well, we already handled this by offering logged-in/out options at the WordPress menu level and connecting your Thrive-made custom menu to the WordPress source.

But we heard from many of you that you wanted to cut out the middleman and just set logged in and logged out menu items right there in the Thrive visual editor.

Now you can.

There are two places to access the new 'Show when' settings for your menu items. The first is when you select the Custom Menu element and click the pencil icon next to each menu item, as shown above.

The second is when you select a specific menu item directly on the canvas, where you'll find the 'Show when' settings under main options, as shown below.

There are 3 visibility states:

When you set different visibility states per menu item, you'll still see all of them in the Thrive visual editor. But by applying a few clever changes, you can create intelligent menus.

Look at this example below. 

In this example, the first two menu items should always be there, so they are set to 'Show always'. 

The next two only make sense for a logged in user. Once they're logged in, we want to give them the option to log out. You'll also see I've combined the 'My account' menu item with a new dynamic menu image showing the logged-in user's profile image. Of course you wouldn't want that menu item shown to logged-out users because... if you don't know who the user is, you'll only be able to show a placeholder image! And that defeats the purpose.

The last two menu items only make sense for a logged out or anonymous user. There is no need to prompt a logged in user to register, because they already have. So by choosing 'Show when logged out', you'll have a menu that switches intelligently.

Let's see the front-end view of that same menu for Logged In Users:

And that exact same menu, as seen when a user is anonymous or logged out:

If a menu has submenu items in it, all of those submenu items will be completely hidden when the parent is not set to show. That means in the above example, the dropdown displaying 'Members Area', 'My Courses' and 'Edit My Profile' will also be hidden if the parent 'My Account' is set to be hidden.

The new logged in + logged out menu options are available for all menu templates, both horizontal and vertical. Our current pool of menu templates is at 49!

3. New Thrive Apprentice Online Course Templates

The new Thrive Apprentice, released in June this year, gives you the power of complete visual editing for your online school.

But we don't expect you to start from scratch.

You can follow the school design wizard and have your site set up in minutes, with your own logo, colors, fonts and templates. It's so ridiculously easy... but it also unlocks unlimited design freedom so you can customize your course templates however and whenever you want.

Our designers have been working hard to build 4 new sets of online course templates for Thrive Apprentice— designs that leverage this new visual-editing technology.

And they are beautiful! Take a look in Christine's latest video below or read the article about new Thrive Apprentice templates here.

There are four new design sets, which we've named:

Each of these sets come with a Course Overview, Module, Video lesson, Audio Lesson and Standard Lesson templates.

There are also 4 new course navigation sidebar designs. These can be easily mixed and matched with your preferred set of templates, so you are completely free to create the designs that suit you best.

The new templates include Course Homepage designs, where you list all of the courses available on your website.

Don't forget, absolutely every pixel of these pages can be designed and styled with Thrive Apprentice. So if a design looks almost right for you, but just not quite... you have the design freedom to make it perfect.

Thrive Automator: What's Coming?

Last month, we announced the public beta of Thrive Automator, our new automation plugin for WordPress.

When we launched, we asked for your ideas and feedback and it's been fantastic to see so many interesting use cases or ideas pop up... more than we can build right now.

At the moment, our team are working on Dynamic Data sources for Thrive Automator, a public app library, new triggers and actions, improvements to how Thrive Automator processes data, some UI and UX improvements, and a new send webhook action.

You might be surprised to know that every new feature we add is roughly 9 weeks worth of work, sometimes even more. So stay tuned and we'll notify you when new features are ready.

In the meantime, if you have any more feedback, please keep it coming by filling out the feedback and suggestions form here.

P.S. Copywriter Wanted: We are Hiring!

Do you love everything Thrive? And are you an experienced copywriter with flawless word skills, an obsession for conversion rates, a marketing nerd, and can work during European business hours?

We want to hear from you. We're looking for a full-time copywriter to join our remote team. But, there's one catch: we're not just looking for 'good'— we're looking for great.

If that's you or someone you know, visit our job listing page and apply here.

And for everyone else, as always— drop a comment below! We love hearing from you.