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.
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?
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.
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.
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.
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:
Or simple outlined zones like this:
Or style it to be a simple button that your visitors should click to load the file picker:
You can even style how the file upload drop zone will look when visitors drag a file over it!
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.
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:
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.
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.
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.
4. WooCommerce Mini Cart Element
WooCommerce users: there is a new element you'll find in the elements panel:
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:
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:
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.
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:
But we weren't finished.
Take a look at what is now possible with the newest improvements to the 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.
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'.
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:
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.
With the number selected, you can even add a suffix, whether that's a dot, bracket, dash... whatever you like.
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.
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.
So... why would you want this?
- 1Mobile 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
- 2Sticking to the bottom won't interfere with any sticky website headers
- 3Return 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.
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.
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.
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:
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:
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:
- Global Colors: a central color you wish to use in multiple places on your site
- Template Colors: colors that are used throughout your current landing page template.
- 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.
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.