The Sticky Content module of ElementsKit lets you make any section of the page or post sticky to a selected position. In this tutorial, we are going to explain different features of the Sticky Content module and how to leverage them to make your content stand out.
Watch our video guide:
Or, follow the step by step instructions:
To start using the Sticky Content module, the first thing you should do is to enable this from the list of ElementsKit modules. Without enabling this module, you cannot use it with Elementor. Here’s how to enable the Sticky Content module:
This feature will help you stick any section on the top of the page.
You can see the problem that the header part is sticky but it’s transparent. So we need to change the background color. Under the Sticky Until feature, you can find the option to change the background color of the sticky section.
If you want to make your sections sticky up to multiple sections and stop sticky after a specific section, you can set that section ID here. Let’s make it sticky until the About Us Section.
When you are using a transparent header you might face an issue with the background color. If you scroll down you might need a background color. So in here, ElementsKit provides you another option and that is a class adding feature. If you scroll down for example 50px, a new class will be added and that is”ekit-sticky-effects”. Using this class you can make any CSS you want. Let’s see how you can do it.
This feature will help you stick any section of the page when you scroll up.
Go to Elements ➔ Drag the following widgets and drop on the selected area.
Let’s make it sticky until the Sticky Header Section.
This feature will help you stick any section on the bottom of the page.
Let’s make it sticky until the Bottom Sticky Section.
This feature will help you stick any section on the column.
Let’s make the heading and image section sticky.
Powered by BetterDocs
