{"id":460,"date":"2025-01-27T12:10:09","date_gmt":"2025-01-27T12:10:09","guid":{"rendered":"https:\/\/codingindialab.com\/blog\/?p=460"},"modified":"2026-04-06T04:57:41","modified_gmt":"2026-04-06T04:57:41","slug":"how-to-make-sticky-section-in-elementor-for-free","status":"publish","type":"post","link":"https:\/\/codingindialab.com\/blog\/how-to-make-sticky-section-in-elementor-for-free\/","title":{"rendered":"How to make Sticky Section in Elementor for free?"},"content":{"rendered":"

Adding a sticky section to your Elementor Free creates a very professional and practical look for your site. Though the default functions that are added to Elementor Pro already make sure the elements could be set sticky, it’s easily achieved within the free version as well using some minor custom CSS along with a touch of jQuery. Just to help, I’m listing here how you could achieve it in detail on the section that has been used below using the example code.<\/p>\n

Steps to Create a Section Sticky in Elementor Free<\/h2>\n

1. Understand the Structure<\/h3>\n

Before the code, let’s break down the structure first:<\/p>\n

Header on top<\/p>\n

Two-column layout where the content will be on the left side and sticky form on the right side. This sticky form will stay inside the viewport when scrolling over the content.<\/p>\n

2. Basic HTML Structure<\/h3>\n

<section class=”banner”>
\n<h1>Welcome to the Banner Section<\/h1>
\n<\/section><\/p>\n

<section id=”content” class=”content”>
\n<div class=”text”>
\n<p>Your content goes here…<\/p>
\n<!– Add more content as needed –>
\n<\/div><\/p>\n

<div class=”form-container”>
\n<form id=”sticky-form”>
\n<h3>Contact Us<\/h3>
\n<label for=”name”>Full Name<\/label>
\n<input type=”text” id=”name” name=”name” required><\/p>\n

<label for=”email”>Email<\/label>
\n<input type=”email” id=”email” name=”email” required><\/p>\n

<button type=”submit”>Submit<\/button>
\n<\/form>
\n<\/div>
\n<\/section><\/p>\n

Here is a simple HTML layout for the sticky section:<\/p>\n

This structure has a header, a text element, and a form that sticks to the right-hand side upon scrolling.<\/p>\n

3. Add Custom CSS<\/h3>\n

The following CSS styles will make the structure responsive as well as the sticky form behave as expected.<\/p>\n

.banner {
\nbackground: #007bff;
\ncolor: white;
\ntext-align: center;
\npadding: 50px 0;
\n}<\/p>\n

.content {
\ndisplay: flex;
\njustify-content: space-between;
\npadding: 50px 20px;
\nmax-width: 1200px;
\nmargin: 0 auto;
\n}<\/p>\n

.text {
\nflex: 2;
\n}<\/p>\n

.form-container {
\nflex: 1;
\nposition: relative;
\n}<\/p>\n

#sticky-form {
\nbackground: #f8f9fa;
\npadding: 20px;
\nborder: 1px solid #ddd;
\nborder-radius: 8px;
\nbox-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
\n}<\/p>\n

.fixed {
\nposition: fixed;
\ntop: 20px;
\nz-index: 10;
\n}<\/p>\n

4. Add jQuery for Sticky Behavior<\/h3>\n

The form is set to be sticky by adding the following jQuery snippet:<\/p>\n

<script src=”https:\/\/code.jquery.com\/jquery-3.6.0.min.js”><\/script>
\njQuery(document).ready(function () {
\nconst form = jQuery(‘#sticky-form’);
\nconst container = jQuery(‘.form-container’);
\nconst offsetTop = container.offset().top;<\/p>\n

jQuery(window).on(‘scroll’, function () {
\nconst scrollTop = $(window).scrollTop();<\/p>\n

if (scrollTop > offsetTop) {
\nform.addClass(‘fixed’);
\n} else {
\nform.removeClass(‘fixed’);
\n}
\n});
\n});<\/p>\n

This script calculates the top offset of the form container. Adds a class .fixed when the user scrolls past the container’s position.<\/p>\n

5. Test Responsiveness<\/h3>\n

Test the sticky section perfectly on all devices. This CSS includes the media query. It would switch up the layout on the small screens. For instance, if width 768px, then it would have one-column view.<\/p>\n

6. Adding this to Elementor Free<\/h3>\n

In Elementor Free, do the following:<\/p>\n