Thrive Automator + 5 New Updates Added To Thrive Suite

We've been busy.

And we kept it a secret up until last week...

When we announced the launch of a brand new plugin for Thrive Themes, the first new plugin we've released in over 3 years!

If you missed the announcement, then you just have to see this!

But, that wasn't all.

Although the new plugin stole the show, another 5 new features slipped into Thrive Suite, focusing on increased design flexibility, ecommerce, and website speed.

Read on and I'll share the latest updates with you.

1. Brand New Plugin - Thrive Automator

Last week, we proudly announced a brand new plugin that joins the ranks of Thrive Suite: Thrive Automator.

We announced it live on YouTube, with a presentation that shares what the plugin does and why we built it. You can re-watch the presentation below (skip to 7:04 for the big reveal).

Watch the replay of the YouTube Live where we announced it all!

Thrive Automator is a workflow automation tool, that interconnects all Thrive Suite plugins with each other and with 3rd party plugins and services.

Each Automation consists of a trigger and an action (along with optional filters and delays) that allows backend functionality to intelligently pass data when unique conditions are met.

Take for example: WooCommerce.

You can now easily create an Automation that triggers when a specific WooCommerce product is purchased on your website, and that automation can launch a 48HR countdown in Thrive Ultimatum for those new customers.

It's seamless.

Thrive Automator is in public beta, meaning we are actively adding more triggers, actions and conditions to it... but we want your feedback and ideas! We have an official feedback form where you can tell us how you would like to use Thrive Automator. This is your chance to help us shape the plugin into the tool you want it to become.

Share your feedback and suggestions on the feedback form here.

By the way, Thrive Automator was built from the ground up to be developer friendly. We made it easy for 3rd party plugins to quickly add their own triggers and actions, safely knowing it'll unlock connections to everything else that speaks through Thrive Automator.

If you are a developer or know someone that is, go here to learn about adding your own integration.

2. New Menu Layouts with Images and Icons

We have a vision: A new type of menu design that is centered around the online course student experience.

But to get there, we required a little more flexibility with the custom menu design.

So we've started laying the foundation for that vision by adding new menu layouts. Next time you edit a custom menu, you'll see the selector for adding icons to your menu has been updated with more options.

Let's take a look.

When selecting a specific menu item, you'll see a 'Display' dropdown with a few options.

Aside from 'Text only' (the default), you'll still find the option for adding icons, which is perfect for adding a bit of design to your menus.

But there's a new option: 'Images'.

Exactly as the name suggests, this allows you to add a small image that sits alongside your menu item, perfect for customizing your menu when there is no suitable icon.

We wanted images there for a reason— they can be dynamic. That means that you can change what images show in the menu based on the environment or visitor that is viewing it.

Can you see where we are going with this? (Give us one more release, just a few more weeks, and then we'll really show off why this is special).

Don't forget that menu items are grouped by default. If you click the green padlock above a menu item, you can 'break' it from the group, meaning your style changes will be applied to that item only.

By unlocking your menu items from the group, making your changes, and then re-locking it, you can combine styles to add unique icons per menu item and add an image as well. Check out this example with one of each in the same menu:

The new display dropdown will give you the following options for your menu items:

The image only and icon only options mean you can simplify your menu for that app-like experience, making it look like this:

But that's not all.

We've also added new alignment options for your menu icons and images.

Alignment options mean you can choose where to place the icon or image in relation to the menu text. By default, it'll be to the left.

But you can now place the icon above it...

...Or switch it around and place the icons underneath the menu text.

That little bit of design freedom, allowing you to include images, icons and adjust alignment, means you can get even more creative with your WordPress website menus.

But stay tuned. The real reason for this change will be apparent when we release one more change to the custom menu element, coming soon...

3. WooCommerce: Edit Design for 'Product Add-Ons' Extension

Out-of-the-box, WooCommerce is a simple eCommerce solution.

But as your eCommerce needs grow and change, you'll find a plethora of extensions— both official and third party— that add extra functionality to your online store.

One of the most popular official extensions is 'Product Add-Ons', created by the WooCommerce team.

Product Add-Ons allows you easily add radios, checkboxes, dropdowns and text fields on your WooCommerce product pages, letting your visitors add preferences to their purchase. It's a great way to increase the order size, and upsell right there on the page.

In our latest release, we now support Product Add-Ons in Thrive Theme Builder, meaning you can style and customize the appearance of these extra options when you're editing your theme templates.

Product Add-Ons are still added from the backend of WooCommerce.

Remember, Thrive Theme Builder applies styles to existing WooCommerce content. The content areas are dynamically generated based on backend WooCommerce settings and options, and Thrive Theme Builder simply targets those items on the canvas.

To add your Add-Ons, you'd first apply them from the Product backend:

Thrive Theme Builder supports styling multiple choice (radio), checkbox, short text and long text options— which are the main uses for this extension.

Once these have been enabled, you can open the WooCommerce product template in Thrive Theme Builder, click on your options and style them until it matches the branding of your whole page.

4. Project Lightspeed: New Google Font Optimizations

Remember our huge code optimization project we released in June?

Project Lightspeed was epic. With a single click, you were able to apply a new kind of site-wide code optimization that meant any content created with our visual editor would output leaner code.

Google loved it, and we heard from many of you that there was a significant boost to your website speed once enabled.

But if you thought that was all we were going to do about speed... guess again.

Website speed is a complex topic. It's impacted by a number of factors, some which are in our control, and others which aren't. Project Lightspeed definitely hit the 80/20 of improving your websites, but now our team are working through the smaller improvements.

...Including font optimizations.

Next time you open Thrive Dashboard and click on 'Project Lightspeed', you'll see some new options.

You'll notice two different tabs on the left: Asset Optimization (the code migration), and a new option called Font Settings.

When you click on Font Settings, you'll be presented with 3 checkboxes.

So, what exactly do these settings do?

Before we go through them, it's important to understand that we've given you these options so you can test and see what is best for your website.

Core Web Vitals is not really a one-size-fits-all problem. The decisions you make to optimize your website will be different depending on what content you have, your page design, your server, your caching setup, etc.

You might find these options help greatly... or they might not. All you can do is try them, test them and see.

Let's go through them one by one.

If your webpage uses more than one Google font, by default that page will load each of them one-at-a-time. As the code for that page is loaded from top-to-bottom, your browser will request the font files from Google as it encounters them.

That means a visitor's browser may make multiple requests to the Google servers just for one page.

By enabling this checkbox under Project Lightspeed, two things happen:

1. All Google fonts required for a page will be combined into a single request. That means a browser is only asking Google once, but will fetch all the necessary fonts.

2. A browser will use a fallback system font (one that's pre-installed on all devices) while it's fetching the Google font files, and will swap to the correct font face once it's available. This means text is readable even before the font files have been downloaded.

Both of these are preferable for Core Web Vitals, since Google often flags when fonts are not managed like this.

It's a big word, but 'asynchronously' in this context basically means "Please continue to download the rest of the webpage while downloading the font at the same time".

Most assets (images, javascript files, fonts, etc.) do not load asynchronously. As your browser starts to read the page code from top-to-bottom, it will pause every time it finds an off-site file to download and will resume downloading the page only once it has that file.

Google calls this 'render-blocking', since it pauses the visual rendering of the page.

By enabling this checkbox, there will be no pausing when fetching font files. You page continues to download, showing system fonts in the meantime, and swapping to your Google fonts once they are downloaded.

Some people don't want any Google fonts. Why? Technically it pings the Google server, and if you're anti-google, you might never want to communicate with them at all. Or maybe you have purchased premium fonts and just have no need.

Either way, if you want to avoid Google fonts entirely, you might find it's easy to accidentally add a new template or element to your page which includes one.

Simply check this box and we'll make sure the Thrive editor never loads Google fonts at all. Any page content that was using a Google font will fall-back to the most compatible system font instead.

5. Thrive Apprentice: Easier Translations

The mammoth release of Thrive Apprentice visual editing in June meant that you could visually style everything about your online course experience.

Everything. Down to the pixel.

This level of brand-able flexibility for an online course platform was unheard of. And one of the key reasons why is because an online course environment is highly dynamic.

'Dynamic' meaning text, images, colors and content that show on front-end templates are unique depending on what course, lesson or module is being viewed and by which student or teacher.

We heard from some of our non-english course creators that you wanted easier access to translating dynamic text fields, so we've made two of those easier to edit.

Lesson Completed:

Under Thrive Apprentice > Settings > Labels & Translations > Course progress, you'll find the new 'Lesson completed notification' field.

The text that you enter here is what will show on the notifications that appear in-browser when your students mark a lesson as complete.

Renaming Default Difficulty

In Thrive Apprentice, you can assign a difficulty per-course and add custom difficulties. These labels will show on your course listing and course overview pages.

However, the default difficulty of 'none' doesn't make much sense to non-english speakers. Now just hover over any difficulty in the backend of Apprentice, click the pencil, and edit the text.

Lastly... No More Boxed Layout Jump

This is a small fix that will help with Google's Core Web Vitals, but only if you encountered a specific problem before.

One of the metrics Google is tracking is called 'Cumulative Layout Shift' (or CLS). When anything on a webpage moves unexpectedly without input from a user, Google sees this as a negative experience. The goal is to create visual stability by keeping things in their place unless a user interacts with it.

We saw that if you build a page in Thrive Architect or a template in Thrive Theme Builder using a Boxed Layout, and then added a background section, columns or header set to 'full width', then on page-load the section would start in it's boxed width before quickly jumping to full width.

It only took milliseconds, but it was enough for Google's CLS scores to notice.

We've re-coded how that page-width is now calculated, meaning that large jump has gone.

There's only one catch.

Because of how our re-coding works, you'll need to open any pages or templates with this problem and click 'save' in the editor to apply the fix. Our editor will rebuild the code while it's saving the page. Remember it only occurs on pages or templates set to 'Boxed' that also have sections set to Full-Width. 

Leave a comment!

Any thoughts, questions or anything you'd like to share? You know we love to hear it, so drop it in a comment below.