Learn how to set up Elementor Sticky Column in WordPress. Our WordPress Support team is here to help you with your questions and concerns.

Elementor Sticky Column

In simple terms, Elementor sticky column can be described as a column that becomes sticky. Suppose we set an Elementor sticky column, the column will get stuck in this same place. For instance, when a user visits a website with 3 widgets in a column, the column will remain in place even when the user scrolls down the website.

In other words, the column remains in the same place.

Let’s take a look at how to set an Elementor Sticky Column:

1. First, click the column we have chosen to turn sticky.
2. Then head to the Advanced tab in the left sidebar.
3. Next, scroll down to the Motion Effects section and click the Sticky option.
4. Then, enable the Sticky option and modify the settings as per our needs. You can choose from sticky position, offset, and z-index.
5. Finally, we can preview the changes before clicking Save.

However, the above option works only for desktop devices. If we want to make the column sticky on mobile devices as well, we have to use custom CSS. This can be done with the following steps:

1. First, open the Elementor page builder and choose the element we want to add custom CSS code to.
2. Then, click the Advanced tab in the left sidebar.
3. Next, head to the Custom CSS section and click on the Edit button.
4. After that, add the following CSS code in the Custom CSS editor:

   position: -webkit-sticky;
position: sticky;
top: 0; /* adjust the value to set the sticky position */
z-index: 999; /* adjust the value to set the z-index */
}

   Here, we have to replace the selector with the CSS selector for the column we want to make sticky. Then, adjust the top value to set the sticky position. This value is the distance between the top of the sticky element and the top of the viewport.

   Finally, the z-index value is the stacking order of the sticky element relative to other elements on the page. A higher value indicates the column will be placed on top of other elements with lower values.
5. Now, we can preview the changes and click Save.

[Need assistance with a different issue? Our team is available 24/7.]

Conclusion

To sum up, our Support Techs demonstrated how to set up Elementor Sticky Column in WordPress.