Introducing the New “Scroll Behavior” Feature in Thrive Architect

A while ago, we released a new headers & footers feature for landing pages. While working on further improvements to it we noticed that there were some header designs we couldn't accomplish the way we wanted, with the current features.

As a solution, we've added a new “Scroll Behavior” feature in Thrive Architect. Watch the video to see how you can use this feature to create awesome header layouts and how it can be used in various other ways to enhance your pages.

More...

New in Your Editor's Sidebar

When you update Thrive Architect to the latest version and select an element, you'll find a new panel in the sidebar:

Note that the Scroll Behavior panel is available the following elements:

Image

Button

Background Section

Content Box

Columns

In practice, this means you can basically make anything scroll in various ways as shown in the video. All you need to do is create a content box or background section and place all the elements you want to apply the scroll behavior to, inside it.

It's All About Attention

We originally created this feature to allow more complex header layouts like the double and triple header example I showed in the video. Since the feature is available as a general option in Thrive Architect, there are many more things you can use it for.

Whenever you want to keep something in view for a certain portion of your page, the scroll behavior feature is exactly what you need.

This makes it a very useful optimization tool. After all, a big part of conversion optimization is about drawing someone's attention to the right place, at the right time. Keeping something in view on scroll is highly attention-grabbing.

I'd love to know how you will make use of this feature on your own website. And if you have any ideas about how we can make this feature even more useful, we'd love to hear your suggestions, too!

0
Shares

Author: Shane Melaugh

Shane Melaugh is a co-founder and the CEO of Thrive Themes. When he isn't plotting new ways to create awesome WordPress themes & plugins, he likes to geek out about camera equipment and medieval swords. He also writes about startups and marketing here.

Can you elaborate what you’re looking for, exactly? You can already create a header with transparency, by choosing a color and any level of transparency you want for the background of your header element or a section in the header.

One thing I notice when jumping to an ID, the page always moves just a little too much… and this is even worse with a fixed header. I get around this by targetting an ID slightly higher than the actual one or with custom css. Is there any way that you use to offset anchors to accommodate fixed headers?

This is probably due to the WordPress admin bar appearing for you, because you’re logged in. For a logged out visitor, the jump should happen to exactly the right place on the page.

But you’re right that if you have a sticky header, that will cover the heading you’re jumping to. In this case, I think you have to target an element further up. As far as I know, you can’t add an offset in any other way.

You can have a ribbon at the bottom of the screen, using Thrive Leads, that’s true. The difference is that Thrive Leads will overlay something on your page, whereas the Scroll Behavior feature applies to elements that are part of your page.

Yes, I would like sticky to the bottom as well. You could have a call now on mobile for example, or you could have a special offer sticky to the bottom instead of the top. I think I have seen that on some sites in the past.

I also thought that you could create a mobile navigation similar to a native app, and have that stick to the bottom on mobile but would revert to the normal top bar navigation on other sizes.

Love this feature. I am wondering if this feature can be used for having a video displayed to the side while scrolling down. For example, on your page with the video at the top, can that same video be displayed to the side – perhaps minimized – as one scrolls down the page?

I love this new Scroll Behavior feature. Making content chapter boxes sticky was on my holiday wishlist. Thanks for delivering early ;) Overall, I’m very pleased with this. Looking forward to putting it to good use. Amazing developments as usual. This Thrive membership is getting better consistently. Thank you!

Shane,
Always fantastic options built into TA! This is another Awesome feature. Can’t wait until the Thrive Theme Builder comes out. That will make Thrive products the best you can buy (already is). For the all the tools you get with an Agency License you just can’t beat it. I’m truly impressed!!!

This is a great upgrade. I’ve been frustrated a little because I would have to get my dev guy to do this for me. I can see using this in the sidebar with different offers/optins depending on what part of the page the user has scrolled to. Thanks for this update.

This is such a cool feature! All this stuff about offsets and the element “sticking” until the end of the parent container, it’s so amazing that you put all this into the very first release. You guys are all about shipping things that work in real world and not just allow you to put an extra checkmark on some feature comparison sheet to look good against competition.

Interesting example! This is more of a static sidebar or “side header”. Technically, you can re-create this or something very similar with the scroll behavior feature, but it may not be the best way to get the result.

Thanks Shane & Co! I’ve been wanting this for a while, and it takes the ux to another level.

Suggestion: Can we have disappearing animations? For example, having the element (in this case the chapters box) fading away as it reached the end of the column. The best example of this Ive seen is on Mike Vacanti’s blog.

The first point is basically already possible, since the sticky element only starts being stick once it reaches the top of the viewport. So, you can already have multiple things that start and then stop scrolling along with the viewport, at different segments of your page.

Shane, this is just too good… I have to tell you, I have two projects on ice just waiting for the new Thrive Theme Builder to come out. With this scroll behavior feature, I have several more ideas that will be able to come to fruition.

Great feature. That will be quite useful for sales pages. Do you plan any integration of Trive Architect with Woocommerce. It will be very useful if we can add Woo elements in the pages or at the detail product description as with Elementor.

Regarding WooCommerce, we’re not decided yet. On the one hand, there are many users and we could probably serve them with some good customization and conversion features. On the other hand, ecommerce is not our forté and we’d have to find a good way to gain real-life expertise with it, so we can really build good stuff.

IMO, you can’t develop good products in a niche if you’re only a “tourist” in that niche.

Interesting feature, Shane. A while ago, I saw a website that featured a listicle with a few products.

As we scroll through each product, the sticky header at the top appears with a “Buy Now” link for the product we are scrolling. Kind of similar to the sticky header that you had in the video but it is not visible on the page and only appears as a sticky header.

Would that be possible with Architect? Maybe you can add a “Hide on Page” option?

Is there any chance that you will add the option to make elements sticky to the bottom of the page? If not, I’m already doing it via custom CSS. But it would be handy if I could do it in “one click” instead of multiple steps.

I am testing having the CTA sticky at the top vs. the bottom. Using the bottom placement for special offers, coupon codes and special announcements, etc.

Architect is truly incredible! I work at a digital agency where our clients use lots of different CMS systems, themes, and page builders, and Architect beats all of them by far when it comes to functionality, ease of use, features, etc.

Please log in again.
The login page will open in a new window. After logging in you can close it and return to this page.

>

Meet Thrive University

The Ultimate Free Resource for Building a Conversion Focused Website ( And Getting Unstuck)

Thrive University is an online learning platform that gives you access to all of our guides, courses & webinars.

Learn how to ​create websites, landing pages and opt-in forms that are built for maximum conversions, from the ground up and get an inside view of our favorite tactics and tools for growing any online business!

Thrive University is an online learning platform that gives you access to all of our guides, courses & webinars.

Learn how to create websites, landing pages and opt-in forms that are built for maximum conversions, from the ground up and get an inside view of our favorite tactics and tools for growing any online business!