The ability to generate sticky components is a popular feature in Elementor. Sticky elements are those that stay in place on the screen even as the user scrolls down the page. Because Elementor sometimes does not include the smallest of details, you may need to utilise CSS code to do various tasks.
In this post, we will use a typical blog page style layout as an example. In most cases you will have multiple things in your side bar, but you can still use this code, if you only got one widget or module.
Creating The Template
So go to your page or theme template.
- If not already done so, make a two column section, making one side a bit smaller than the other. This will be your side bar.
- Grab yourself an Inner section and place it into your sidebar column, and make it one, with no sub columns.
- Place what you like in that inner section, what you wish to scroll down with the page. Anything placed in here will scroll down the page.
Inner Sections
Now click on your new inner section.
- Go to the Advanced Tab.
- Go to Custom CSS
- Place the CSS code below, into that section. Save changes.
selector { position: sticky; position: -webkit-sticky; top: 50px; }
Congratulations! You have successfully created a sticky element in Elementor. Repeat the above steps for any other elements you want to make sticky on your website.
Including sticky components on your website may improve user experience and make your design more appealing. You can rapidly make any element sticky in Elementor and take your site design to the next level by following the instructions provided in this article. We hope you found this post useful in learning how to keep an element sticky in Elementor.
