Elementor (Affiliate Link):
https://wickydesign.com/get-elementor
Video Transcript
Hi, this is Mark from Wicky Design. In today’s video, I’m going to show you how to make a sticky column in Elementor.
Elementor Pro does have a sticky column feature built in, but in most cases, this is only useful for static headers, scroll to top buttons, maybe like a chat bot, and maybe some functionality in the footer.
Let me show you an example of where this might not be very useful and that would be sidebars. Sometimes we get requests to have a static sidebar. When the user scrolls down, they would like it to stop right when you get to the bottom of the section. So as you can see, I have motion effects on, sticky top. This functionality works great if you don’t have a lot of content below these columns. If I keep scrolling down, look what happens – that section is just staying at the top.
In this example, I’m going to show you how you can make it scroll, and then it will stop right when it gets to this column, and then the rest of the content will display correctly.
Now I’m going to show you exactly how to pull off the functionality where the user will be able to scroll down and this inner section sidebar will stay static and scroll down the page until it hits here, then disappear once the user keeps scrolling.
This is simply done with a little bit of CSS code. This isn’t going to require any custom javascript, plugins, or anything like that. Just a little bit of CSS code.
To pull this off, you need to assign 2 CSS classes to your sidebar columns. The way you should have this structured is you have your parent column here – this is the column that goes all the way to the bottom. It’s best to add an inner section within that column. In this example, I have this inner section with just a header, image, and some text.
The first step to do is add a CSS class to your parent column. So you’ll click on the column and add a class here. The next step is to add a class to your inner section. I’ll call this one .sticky-column and I have this one called .sticky-parent. Now I just have to add this code:
.sticky-column{
position: sticky;
position: -webkit-sticky;
top: 3rem;
}
.sticky-parent
.elementor-widget-wrap {
display: block!important;
}
You can add your CSS code within Elementor Pro right here, under page settings. If you are using the free version, you can still pull this off, but you’re going to have to add your CSS code to the customizer or your theme. With the Pro version, you can add it right on the page, so this makes it easy because you don’t have to navigate off the page.
As you can see, these are the 2 classes I’ve just assigned. So we have .sticky-column and .sticky-parent. This is pretty simple CSS code just telling the browser to make it sticky. This whole thing is now a block of CSS. Now when the user scrolls, it should stick all the way to the bottom and it should stop right here. Perfect, that’s exactly what you’d like.
The only other setting that you may need to change is if you need to offset it. So for example, this header is a little bit big, so when the user scrolls back up, the about us header is getting cut off. The CSS code I have, it’s real easy to change the top. So if you just change right here, I have it as rem right now, so you can custom change it to 50px. Let’s see if that is good. No, might need to go a little bit more. So this is the only setting that might e a little bit unique for your website. Let me do 100. Now you can see right here, the user can scroll, it is 100px offset and in this example, the user scrolls back up, this header comes down and that’s not getting cut off.
That’s all you have to do to pull this off. You do need to make sure that the content you have on the left, or wherever your sidebar is, wherever the opposite column is, needs to be long content for this to work correctly.
In tablet mode, it works the same. You just do the sticky here. Mobile doesn’t have this functionality because it usually stacks, so there is nothing to make sticky.
That’s it for this Elementor tutorial. If you liked this video, make sure to give it a thumbs up, subscribe to our YouTube channel, and click the bell to receive notifications whenever we post a new video.
