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.
For detailed instructions on how to use each individual feature in the panel, check out this knowledge base article.
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!
Your explanations of this stuff are the best on the web. Simple, clear, tested by a real person! Thanks so much
Thank you very much, Amit!
The team at Thrive Themes never disappoints. Love it! ????????
Thank you, Chris!
Impressive! Another great improvement that adds more value to your product. I love how TT practices Kaizen.
Thank you, Barney!
This is what I was W A I T I N G F O R ! Finally it’s here.
Thank you, Thomas! Glad you like this addition. 🙂
This is perfect! Great work
Thank you, Sharon!
Amazing new feature… Thank you Shane and the rest of the Thrive Themes team! 🙂
Glad you like it, Miguel!
Hello Shane,
This new feature is very useful. Thank you!
What I still miss is the Transparent Header feature. Will this still appear in the future or will it come with the new theme builder?
Best regards,
David
Hi David,
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.
Very useful feature. But I think the Header and Footer design still needs improvements, So we can create very bold and amazing headers.
Thank you for your feedback! We’re working on further improvements, especially to the header feature.
Great feature update!
Congrats.
Was wondering, do we have ” css transition effect ” option of all elements. If not, is there any plans.
Similar to the effects already present in thrive back-end ( ex: in pop-up boxes ).
You can apply animations to almost any element using the Animation & Actions settings panel in Thrive Architect. I’m not sure if that’s what you had in mind or not.
WOW! I love this new feature, Shane!
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?
Hi Kevin,
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.
Yes, noticed this great feature. I think it will be great to add option to choose an element to be sticky to the bottom 🙂
Thanks for the suggestion! I think we could add such an option quite easily. Do you have a specific use for this in mind?
Call To Actions or optins came into my mind but maybe this can already be done with ThriveLeads.
Or a countdown ribbon for a special offer.
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.
I know I would use that functionality.
Thank you for the examples! This will help us in developing the feature.
The sticky to the bottom would also be helpful for navigation to the next and previous pages in course design. 🙂
That sticky CTA… Fabulous!
Glad you like it, Mike. 🙂
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’ve been thinking about this as well, actually. However, I think we need to build a feature specific to video elements or maybe even to video post types in a theme, in order to make this work.
That would be a great feature. I immediately was thinking “video” when see what this does.
Thanks, Jason! I hope we can do something for video, as I’d like to experiment with video engagement stuff.
This is exactly the functionality of the feature I’m wondering about as well!
Super! Another feature that makes thrive architect the best page builder.
Can we make an element appear on a scroll up?
Thanks again for all the work you guys put into this, not to mention the all video tutorials.
Thanks for your comment!
Appear on scroll up isn’t yet possible with this feature. The header element in its entirety can be set to appear on scroll up, but not individual elements.
Looks great – Thank you team Thrive.
I’m going to add floating sales buttons asap… I never knew how much I needed them until I watched the video 🙂
It would have to be adjusted on a mobile device or the sticky header will obscure most of the screen, and that’s never a good user experience.
Thanks for your comment, Sarah!
I agree about the mobile thing: having sticky elements on a mobile screen is almost always irritating. That’s why we have those responsive options included.
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!
Thank you for your positive feedback!
Wow. Just wow. You guys personify excellence in strategic iteration. Well done team!!
Thank you very much, Mark!
Wow! Great!!
Glad you like it!
This is amazing, but I still don´t understand what you guys do with your blog´s header.
It´s just so messy to have 2 different headers. One header made with thrive architect and the template´s header for pages like posts, products that thrive architect doesn´t recognize.
I don´t know… I understand those cool new things to do, but I don´t know why you don´t first solve that huge problem.
Elementor does it way better, even with the free plugin.
I prefer to Thrive to Elementor, but this stuff makes me doubt about it.
I just hope, there is a way to do it and I´ve just done it wrong for the last 3 years.
Thanks anyway for the sticky stuff, but it´s kind of useless as I don´t want to use 2 different headers.
Thank you for your feedback, Jon! We are planning to make the header feature in TAR applicable to themes as well, in the future.
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!!!
Thank you very much, Monty!
I like the new scroll behavior.
I was busy already with the (strong) feature to make you own menu and now with the extra feature it can make a website even better.. This way you can bring something more in focus with the visitor.
Can’t wait for another new feature 😉
Thank you, Ray! I’m happy to see you like what we’ve been building. I think you’ll like what’s in our next release as well. 😉
very cool! 🙂
Thank you, Birgit!
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.
Great to see that this is something you can make use of, Mical!
Yowzer this is awsome
Glad you like it, Jesse! 🙂
This is so versatile. Love it. I’m looking forward to integrating this into my designs. Thrive is the best!
Thank you very much, Tom!
Great feature, makes the pages more active. love it!
Glad to see you like it!
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.
Thank you, Alex! It’s great to see that you appreciate the attention to detail we’ve added here.
Nice. Could you also make a sticky sidebar like on Seth Godin’s site:
https://www.sethgodin.com
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.
Great feature, and good timing too. I’ve been trying out various ways of adding a sticky “download this guide” box on a site I’m building. Nice one ????
Sounds like this is exactly the right feature for that use case! 🙂
Great feature. Many uses. Will have to think where else to use it and how.
Thank you, Vivek!
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.
Thanks for the suggestion! I think we could add such a feature, yes. I’ll discuss it with our team.
And I just remembered, if you click a link or element that has an anchor link, it jumps very abruptly. Is there a way to smooth out that scroll process?
I think this can be done with Javascript, yes. Might not be the most page-load-speed friendly thing, but it can be done.
Shane awesome as always
Thank you, Matt!
Awesome as usual! Still waiting for the new theme. Do I spy elements of what’s to come?
This is a feature that was built to be useful for the theme builder as well, yes. 🙂
This is awesome and very promising in terms of the new – eagerly awaited – Theme Builder. Two ways I can think to make this even more flexible and versatile:
1) make it so that we can have an element APPEAR at a certain mark, Thrive Leads style, and THEN stick.
2) transform/morph the element into a smaller or bigger or different colored version, move it to a certain area of the screen, and THEN stick.
Thanks for your feedback, Lorenzo.
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.
The second point… is already in progress. 😉
Great updates, but hopefully we can have the countdown timer feature to change or customize the size
We will be improving our countdown timer element, yes.
Can you fade one element out and then bring a different one in?
Not yet. Since some people here suggested it, we may be adding animation options in a future update.
Fabbydoo 🙂
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.
You guys just keep blowing me away…
Thank you, Martin! I’m happy to see that the things we create inspire you. 🙂
I am also eager waiting for the Thrive Theme Builder… Shane do you have plans to launch it in the near future?
Another winning feature. Thank you. You know what I love just as much? Your ability to create fast, clear and easy tutorials. You’d think software houses would have this sorted by now, but they don’t.
I will have been a Thrive Themes Agency member for 5 years in Feb 2019. and I have to say It’s the best investment in WordPress based software I’ve ever made. Thanks again.
Thank you very much, Quentin!
We’ve made good progress with our tutorials, in large part thanks to our support and documentation team. I’m glad you noticed. 🙂
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.
Thank you for your comment!
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.
Wonderful! I know exactly what I need this for, and that is a sticky widget on a blog post.
My last non thrive plugin allows a sidebar offer to travel down the page as a reader consumes content.
Hopefully TA will do this for me. I can’t wait to get home and play!
I’m happy to know that you can think of a way to use this, right away! 🙂
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?
That’s an interesting example! This is a use case for some kind of fade in and fade out animation on the header.
Just an update to my previous comment, it was a sticky footer and not a sticky header. I guess that will be a good replacement for buttons.
Hi Shane. This new feature is awesome. Thank you!
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.
Thank you!
Rhonda (on behalf of Drew)
I’m not 100% sure yet, but the option to stick things to the bottom of the screen has been submitted to our developers and unless there’s some technical issue, we will implement it in a future update.
I always love seeing your next snippet of goodness. And your demonstrations are always so clear and concise. Love it.
You are a legend. 🙂
Thank you very much, Rudy!
Very good content. Congratulations!
Thank you, Giselle!
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.
That’s great to hear! Thank you for the feedback, Rene!
I think this feature is great, and can’t wait to build it into my site….
But I’m waiting for the new Thrive Themes!!! Are they coming soon?
Whoa! Wait a minute… tell me more about the “Global Options” Button!! 😀
Is this Sticky feature only available for the Header & Footers feature? How can I apply the Sticky function to my Home page header (Rise theme)?
This feature is currently only available for headers you create using Thrive Architect. These can be applied to landing pages, but not to your theme pages (yet).
Hello Shane, I think it would be amazing if you extend the feature to standard theme pages (posts and pages). When you say “yet” it means that there are plans to extend the feature in the near future?
Yes, we’re planning to do that.
Awesome – thank you!
Thanks a lot
Is there a “smooth scrooling” feature? that is when you click on chapter1 for example, the page scrolls smoothly and a little bit slowley, it makes a good effect.
If it’s not available now, would you please add it?
This is really awesome and great for conversion.
But maybe you can make some things easier. Your example with the two sticky headers. It would be great if we would not have to count pixels. Instead either you will detect automatically that there are two or more sticky headers and will calculate the offsets automatically (may be enable or disable) or add a calc offset button which does this. The automatic calculation has the advantage that when you change the height of the header it will automatically adopt the scroll behaviour.