Happy New Year!
2020 is going to be a very big year at Thrive Themes. We have a promising development roadmap full of jaw-dropping features and a couple of surprises for you in the few months ahead.
Although we can't wait to show you what's in store, our first update for this year is just a small one.
In this post, we'll show you what's new in Thrive Architect and other plugins, where to find these new features and how to use them.
Make sure you've updated to version 2.4.7 and read on!
It's a designer's dream... beautiful parallax animations that change motion depending on a visitor's scroll speed.
I'm sure you've seen the effect on websites before. It looks like this:
This Parallax effect was made in Thrive Architect
A Parallax effect creates the illusion of depth and three-dimensional space by animating two elements at different speeds as a website visitor scrolls down the page.
Foreground elements move quicker past the viewport than background elements, the same way a nearby tree will zoom past the passenger window of a car quicker than one in the distance.
Now you can create that effect with just a few clicks.
How to Use Parallax:
1. Select any element on your page.
2. In the Thrive Architect sidebar, select Scroll Behavior and choose Parallax.
3. Click Add New Effect, and immediately you'll notice the parallax effect when you scroll up and down the page.
By default, the effect that opens is called Vertical Scroll and speed will be set to 3. By increasing the speed, you can modify how fast the foreground element will move compared to the viewport.
The faster the speed, the more depth to the illusion.
6 Different Parallax Effects:
Behind the scenes, Parallax is a user-input based animation. Rather than just animating when an element comes into view or on page load, the effect looks for the visitor's scroll action.
If they scroll quickly, the effect is fast. If they scroll slowly, the effect matches. If they reverse their scroll direction, the animation reverses with it.
But those input-based calculations aren't just limited to vertical scroll.
We've expanded the parallax animation to control 6 different effects. You can choose from:
Effects can also be stacked. For example, if you combine Vertical and Horizontal scroll, you can move an element diagonally.
If you combine Blur with Scale, you can make an element grow smaller on screen and gradually blur as though it's drifting into the background and out of focus.
Parallax Viewport Settings:
When you configure your Parallax settings, you can choose the effect from a dropdown, then choose which variation of that effect, and then you'll have 3 sliders to configure.
The first slider controls how powerful the effect is. Depending on the effect you choose, it'll be known as either speed or level. The greater the number, the more motion you'll see on scroll.
The second and third sliders are for Viewport Start and Viewport End.
As someone scrolls down a page, content enters the viewport from the bottom of the screen.
'Viewport Start' defines the distance from the bottom of the screen that the effect begins. 'Viewport End' measures where the effect should stop, also measured from the bottom.
By default 0% - 100% means it starts on entry and ends as the element exits the viewport at the top.
You may want to set some different start and end points.
For example: If you set a Blur effect to fade in, you may want to set it to 0% - 50%. That would mean the element is blurry when it enters the viewport from the bottom and gradually becomes sharper until it's crystal clear in the very middle of the screen, 50%.
Play around with it and it will make sense.
Previewing Your Parallax Effect:
When you first apply a parallax effect, the preview mode will be enabled. In the preview mode, on-page editing will be locked so you can test out your effect and configure it to your choosing.
Once you've applied your effects, preview will disable so you can return to editing your content without the animations flying off the page.
If you want to preview your parallax effect again, select any element with parallax enabled and toggle on the Parallax Preview.
Once this is enabled, all elements on your page that use a parallax effect will begin to animate, making it easy for you scroll and see the final behavior.
2. Pagination Templates for the Post List
Did you know that the Post List element already has a Pagination feature?
It does! We listened to user feedback and this was a hotly requested feature, so we added it in late 2019.
Now we've just released 7 pre-designed pagination templates that you can load with one click.
If you enable Pagination on your post list element, your visitors will be able to click through and see any other content that matches your filter.
Pagination designs are fully customizable too, with toggles for Next and Previous, First and Last, and to include a pagination label. You can even configure the amount of pages you want to display in the buttons.
Like all Thrive Architect elements, pagination designs use the box model. That means you can button borders, corners, backgrounds and spacing, customize font styles and colors, and more.
But rather than doing all of this yourself, why not start with one of the beautiful designs our team have built for you?
Make sure you have the Pagination bread crumb selected, then click the template button to load the template gallery.
Here are the 7 designs you can choose from, including some dark designs and some with transparency.
3. Post List - Link to Archive
In case you didn't get the memo, our Post List element is the best you'll find in WordPress. And we're still making it better.
In this update, you can now link to a category page or any other type of archive straight from the Post List using dynamic text.
Here's how it works:
While you are in Design Mode for your Post List, drag a text element right into your article view.
With the text field selected, choose Insert Shortcode from the typography bar. You'll have the option to select Post Category.
This is dynamic text, meaning the text will update to match the post that is displaying.
If the post belongs to a category called 'Workout', that's what the text will display. But if the post list displays a post from a different category, such as 'Podcast', it will intelligently update the text.
The new feature is a Link to Archive checkbox that becomes available when you insert that Post Category shortcode.
If you enable this checkbox, then the Category Text will also become a hyperlink that takes the visitor straight to that category archive page.
That means that the visitor can click the title, image or 'read more' button to see the post that's displayed... or they can directly click the category name to see the category archive list.
Here's an example of a styled Link-to-Archive text field:
4. New Templates and Symbols Lightbox
In this release, we've also updated the Templates and Symbols lightbox.
This is the window that displays when you are loading a template you've saved before. It's purely a cosmetic update, but it paves the way for some new updates in the near future.
This was our old loading window:
And here's the new one:
In the images above, the difference looks subtle.
But when you use it, you'll see it's faster, it offers more screen real estate for your templates, and it's a more versatile interface.
It's also easy to rename or delete a template or symbol straight from the lightbox itself, so you can organize your templates easily.
Now with this new interface, we're set to release some more updates in the coming few months that will make your template management even better.
5. Post List Compatible with Symbols and Templates
This proved a little tricky, since a post list is a dynamic element and so is a Symbol, and it required stacking one inside another.
Good news! In this release, we've solved it.
"Wait... what exactly is a Symbol?"
In web development, the word 'Symbol' has a different meaning to what you might be used to.
A Symbol is an interlinked element across a website. You can display a Symbol in multiple places and when you update that Symbol, all instances of it will immediately be updated.
This now means you can configure the perfect Post List, save it as a Symbol, then drop it into any WordPress post or page. Any changes to the styling of that Post List will be seen on all pages.
6. Custom Fields Integration With Infusionsoft
In December, we released a custom field integration with 4 popular email autoresponders. This feature brings some huge power to your lead generation game.
It means you can create a custom field inside of your email autoresponder, and pass information from the opt-in form straight to that field.
An example would be asking a question such as: "What's your company website?", collecting your visitor's answers and keeping them stored next to the contact record in your email system.
Well, this week we advanced our integration with Infusionsoft (recently renamed as Keap) to let you access your custom fields.
7. Thrive Quiz Builder - Autoscroll Toggle
Thrive Quiz Builder gets a small update in this release too, based on user feedback.
There is now a toggle to enable or disable Autoscroll for a quiz.
You'll find this option by clicking the cog icon when you are in the questions editor view.
So, what does this mean?
Depending on your quiz, you may find some questions require more multiple choice answers or longer text fields. As a visitor advances through your quiz, the screen space taken up by the new questions may increase or decrease to suit the options you've made available.
By enabling Quiz Scroll, the viewport will smoothly scroll to the optimal position to display the new question and their choices. Disabling this will keep the viewport fixed as new questions load, and the visitor can easily scroll to see what suits them.
It's a small feature, but gives you an extra bit of control over a visitor's experience.
8. Updated Sendy Integration
Sendy is a self-hosted email application that sends through Amazon's Web Services.
Although we already have an integration with Sendy, they have recently made some significant changes to their API.
We have just updated our integration with the new Sendy API, which means it's safe for you to update and use their latest features with our Lead Generation element.
Useful? Let us know!
We always love hearing feedback from you. Your comments and suggestions are regularly added to our roadmap so we can make sure our products are helping you do what you do best.
Let us know if these latest updates are valuable to you, or what else you'd like to see in the future.