It's feature update week! Again.

...which means we roll out a bunch of new features and improvements to our website building software and you get access to all of them as soon as you update.

Pandemic or not, you'll see we're still hard at work helping you build better websites.

Read on to see the 10 new features we've just rolled out to Thrive Themes.


To access these new features, update to Thrive Architect 2.5.8 and Thrive Theme Builder 1.6.0.

1. New User Interface Colors

The first change you'll notice when you fire up Thrive Architect or Thrive Theme Builder will be a new color scheme and label across the top of the editor, green when you are editing content and blue when editing a template.

Green = static content on this page only.

Blue = template content updated website wide.

The purpose of this is to make it abundantly clear what you are editing.

When it's green, you'll see the label "You are editing content". This means your changes only affect the page you see infront of you (though headers and symbols can be exceptions). 

This is what you'll use for landing pages, your homepage and blog posts.

When it's blue, you'll see the label "You are editing a template". Template changes made in Thrive Theme Builder are reflected in multiple places across your website. This is for editing headers, footers, sidebars and more.

2. Header Transitions

Ever seen that pretty effect on a website where a header is transparent on load and then fades into color as your scroll down? Like this?

Notice the transparent header that becomes white? That's a header transition.

Now that effect couldn't be easier to achieve! We've added an 'on scroll' state to your headers.

When editing a header, look under 'Scroll Behavior' for a new toggle that says Switch on scroll.

This toggle enables header transitions

When you enable this toggle, you'll be able to set the pixel distance from the top of the screen to change header states.

This respects your device type too, so you can set a different distance on mobile than desktop or disable the sticky effect entirely if you prefer.

Once enabled, you'll see a state dropdown in the editing bar.

Look for the new header state selector 

Swap to 'On Scroll' and you can make as many changes as you want to the appearance of your header. Your visitors will see a smooth fade animation to the second state when they reach the scroll distance.

For the effect I made above, I set the 'On Load' state to have 0% background opacity (invisible) with white text and then 100% opacity with black text on scroll.

But here's what's really impressive: These aren't just style changes... they're content changes.

That means you can have a different menu or call-to-action buttons in your header for the two different states.

3. File Upload Element

Adding a visually editable file upload area to a lead gen form that is truly safe and poses no security risks was no small achievement.

But I think you're going to love the results.

Easy drag-and-drop file upload feature built entirely in Thrive Architect

This is a new field type that you can add to Lead Generation forms or Contact Forms. 

Your visitors can either drag-drop their files right into the upload zone or click 'select files' to open a file picker.

You can create big, colorful drop zones like this:

That drag-drop zone is fully editable

Or simple outlined zones like this:

Outlined designs? Easy

Or style it to be a simple button that your visitors should click to load the file picker:

Simple 'select files' button? No problem.

You can even style how the file upload drop zone will look when visitors drag a file over it!

Style the drag hover state from here.

How the File Upload works:

A poorly executed file upload feature can introduce security threats to your WordPress website. We're not letting you take any risks so our file upload element uses an integration with either Google Drive or DropBox.

This way, the file will never touch your WordPress website.

File Upload API connection settings.

You'll need to set up an API connection in the dashboard for your chosen file hosting. It's a little bit of a process but it only has to be set up once per website.

Check out our setup tutorials here:

You can use shortcodes to automatically name each file that gets uploaded, including the date, time, visitor's email and the original file name, making it easy for you to see which files came from who.

When you're in the form edit mode, clicking on the File Upload element will show options for configuring permitted files:

Choose what files your form will accept

You can easily set what file types, the max number of files and max file size. Each file type allows a group of accepted file formats to be sent. You can see the file format list here.

Once a visitor completes the form, their files will be safely uploaded to your Google Drive or DropBox account where they cannot be accessed by 3rd parties so long as you keep your permissions set to private.

Uploaded files will appear in your Google Drive just like this

If you set up an email to be sent from your WordPress site with the form data, then you can notify yourself and include the file upload links. Clicking these links will open the files directly in your private Google Drive or Dropbox account.

How a file upload email looks in your gmail inbox

You can also pass the direct file URLs into a custom field in your autoresponder or CRM. If it's more than one file then the URLs will be comma separated when they are added to your custom field.

As you can see, we've carefully thought through how you should use this for your website and have been extra cautious to steer clear of any security risks.

We're pretty proud of the end result.

And for the icing on the cake?

There's a new form template category called 'Application Forms' made with pre-styled File Upload fields.

Pre-built application forms made by our designers

4. WooCommerce Mini Cart Element

WooCommerce users: there is a new element you'll find in the elements panel:

Look for the Mini Cart element

Yes, it's a mini cart!

What is a Mini Cart? I'm sure you've seen an ecommerce cart icon in a header before that, when clicked, opens a small tray displaying cart items like this:

When the mini-cart icon is clicked, this is the tray that will show

That example above was built in Thrive Theme Builder with the new mini-cart element.

You can now add these mini-carts wherever you want and they have plenty of visual-editing controls:

The mini-cart settings panel

You can show an icon, include a label or show the price, change the color, size, or position and choose if the cart should show on click or on hover.

Enter edit mode and you'll find even more options. Use the edit bar to switch between cart states, including styling the 'empty cart' view.

Edit your mini-cart states in the Thrive editor.

It's important to note that we have given you as much visual editing capacity as possible without interfering with core WooCommerce functionality.

That means that if you are using any WooCommerce extensions that add extra cart options, they should all still work with this feature.

5. Table Of Contents Gets Even Better

In June, we updated our Table of Contents element... and it was a hit.

We added full visual editing, templates, indented levels, automatic numbering, renaming headings, hiding headings, highlight states for floating navigation... this list goes on! Check out this article here that shows you why it was so impressive:

The Only Table of Contents Solution You'll Ever Need for WordPress

But we weren't finished.

Take a look at what is now possible with the newest improvements to the Table of Contents:

That's a beautiful table of contents!

Collapsible Table of Contents

The first thing you'll notice in the animation above is that it can be clicked to collapse, just like our toggle element.

Enable this toggle for a collapsible TOC

Once enabled, enter edit mode and you can set an icon next to the title, choose left or right, icon rotation when opened, and set the default state to either expanded or collapsed.

Icons as a List Type

A new option lets you set a list type to 'icons at all levels' or 'icons at top level'.

List Type is an option for the Table of Contents

This will structure your Table of Contents like a styled list, with editable icons infront of each option.

If you choose 'all levels', you can even set different icons per level like this:

Enter Edit Mode and click the icons you want to change

Customizable Numbering

If you'd prefer, you can choose 'numbered at top level' or 'numbered at all levels' for list type. This will automatically generate numbers before each heading.

However, you now have the option to style that number independently of the text.

Numbers can not be independently styled

With the number selected, you can even add a suffix, whether that's a dot, bracket, dash... whatever you like.

Suffix characters will be added right after each number

Editable Divider and Columns

Lastly, the Table of Contents is customizable per screen size allowing you to set 1 column on mobile view and more columns on other views if you prefer.

When set to 2 or more columns, a vertical divider will be visible. Previously this was a simple grey divider but now you can customize its color, thickness, size and pattern.

Try out the new Table of Contents and you'll see that with this level of visual editing, there is almost nothing you can't build.

6. New Scroll Behavior: Stick to Bottom

Under 'Scroll Behavior', you've already been able to set an element to Sticky.

A sticky element will pin itself to the top of your visitor's browser when they scroll past it and will be released from its stickiness at a point you select on the page.

This week we've offered a second sticky setting: Stick to Bottom.

Notice the 'Enroll Now' banner sticking to the bottom?

Sticky to bottom means that as it enters the viewport, it will pin to the very bottom of the screen. Once the viewport arrives at an end point you have set, rather than being released from stickiness, it will simply fade out.

Set your screen position here

So... why would you want this?

  1. 1
    Mobile users can reach a call-to-action at the bottom of the screen with their thumb more easily than when it's at the top
  2. 2
    Sticking to the bottom won't interfere with any sticky website headers
  3. 3
    Return to top and Social Share buttons are often pinned at the bottom of blog post templates

7. Multiple Post Types in Post List

Our Post List element is arguably the best you'll ever find for WordPress. That's a bold statement... but the flexibility of this element combined with full visual editing is just mind-boggling.

However, it was restricted to displaying only one post type at a time.

We've now expanded the filter settings to allow multiple post types in the one post list.

Mix post types in the one post list

This means you can display both Posts and Pages, or any number of custom post types, such as WooCommerce products alongside specific blog posts.

Perhaps you want to create a Podcast and would prefer to use a custom post type rather than just a blog post category. With this improvement, you won't be backing yourself into a corner.

The Rules Of Mixing Rules

There is one caveat to mixing post types in the post list: You can only add filter rules that apply to all included post types. This is a limitation of WordPress.

This means you can easily filter posts and pages by author, since the author taxonomy exists for both. However you cannot filter by category since WordPress pages do not have categories, only blog posts do. If you try, an alert will show.

An easy solution is to find any free 3rd party plugin in the WordPress repository that can add taxonomies to any post types. Once you add categories or tags to WordPress pages, then you'll be able to filter with those rules across multiple post types.

8. New Material Community Icons

Icons. More icons.

In the last 2 releases, we've been adding open source Material Design icons made by the Google design team to our icon element.

In this update we've brought in Material community icons, which adds nearly 3500 more.

That's 6268 free Material Icons

As the name suggests, Material community icons are made by the community to match Google's open-source design standards.

If you want to see the full list of community icons you now have available, click this link. It's impressive!

Why the fuss over icons?

We figure they are important because you'll use them in: styled lists, table of contents, custom menus, buttons, call-to-actions, tabs, toggles, video thumbnails, pricing tables, search elements, our templates and any part of your own landing page designs.

9. Naming Fields in Lead Gen Forms

Since you can now add so many new field types to your forms, we've made a small usability improvement by adding a 'Name' option to your field types.

Like to stay organized? Name your fields.

The name you choose is for your own reference and will help you make sense of your forms more easily.

This name will also form part of the query string if you forward form results to a thank you page, and it will be used as a field label in contact form email sent from your website like this:

Field names will be used as the bolded label in contact emails.

It's a small improvement but helps with managing complex forms.

10. Global Color Unlinking Buttons

Have you ever opened the color picker to see that it was greyed out and you couldn't change it?

That's because you were viewing a global color, and changing it would affect any other elements that use the same color.

When you're in that situation again, you'll see your options clearly overlayed on the color picker:

New overlay buttons will show you your global color options.

From here you can either edit the color, which will update all other elements referencing the same color, or you can unlink the color which means you change it without affecting anything else.

There are 3 types of locked colors:

  1. Global Colors: a central color you wish to use in multiple places on your site
  2. Template Colors: colors that are used throughout your current landing page template.
  3. Theme Colors: branding colors that are used website wide.

In each instance, if you want to change the locked color rather than unlinking from it, we'll show a tooltip that explains where that color is inherited from.

A tooltip will direct you where to change template colors.

Leave a comment below!

You know we live for your feedback, ideas and suggestions. Try out the new features above and let us know what you think.

What else is holding you back from achieving your business goals? We want to know how our software can help.

About the Author Bradley Stevens

Brad is the CEO at Thrive Themes, and a serious marketing nerd. He’s been a videographer on top of the Sydney Harbour Bridge, a drummer in a rock band, an actor in independent films, and he’s created and sold his own online courses.

Get In Touch