The Sticky Content module of ElementsKit lets you make any section of the page or post sticky to a selected position. In this documentation, we are going to explain different features of the Sticky Content module and how to leverage them to make your content stand out.
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:
Step=>1: Go to ElementsKit ➔ Modules. Now, switch the Sticky Content module ON and click on Save Changes.
Let’s learn about how to make an image sticky.
Step=>1: Go to Elements ➔ Search for Image➔ Drag & Drop the Image widget as directed.
Step=>2: Add a Background Image from Edit Section ➔ Content tab
Add space to easily understand the sticky section and how it works.
Step=>1: Go to Elements ➔ Search for Spacer ➔ Drag and Drop the Spacer section.
Step=>2: You can choose a range of space from 10 to 600 to understand the space difference better.
Step=>3: Now, go to Advanced ➔ Background ➔ Normal ➔ Background Type ➔ Classic icon ➔ Color ➔ Add a Background Color from palette to that space
This feature will help you stick your image or any section sticky on the top of the page.
If you want to make your sections sticky up to multiple section and stop sticky after a specific section, you can set that section ID/CLASS here. for example: section1 or section2
Here is how to use Sticky Until on top feature
Under the Sticky Until feature, you can find the option to change the background color of the sticky section as per your requirement.
There are three device choice options for you to display the sticky: All Devices, Desktop Only, Desktop& Tablet. Choose an option to decide exactly in which device (s) you want to show the content as sticky.
You can check an overview from the responsive Icon at the bottom.
You can also set the space from where you want your content or picture to be sticky at the Bottom.
If you want to make your section sticky up to multiple sections and stop sticky after a specific section, you can set that section ID/CLASS here. for example: section1 or section2
Here is how to use Sticky Until on Bottom feature:
Step=>5: Now, set that section CSS ID/CLASS here. Select Sticky on Bottom. You can also change the background color from styles
Step=>6: You can see the heading will remain sticky until the Red section2
Step=>7: And the Heading will disappear after the Red section
Change Background Color of the sticky on the bottom section however you want and this color will display when the sticky will begin.
You can also select the type of device in which you want your content to be sticky.
You can also set the space from which section you want your content or picture sticky in the column
you can also select your device like in which device you want your content to be sticky