How to make Sticky Section in Elementor for free?

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.

Steps to Create a Section Sticky in Elementor Free

1. Understand the Structure

Before the code, let’s break down the structure first:

Header on top

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.

2. Basic HTML Structure

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

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

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

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

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

Here is a simple HTML layout for the sticky section:

This structure has a header, a text element, and a form that sticks to the right-hand side upon scrolling.

3. Add Custom CSS

The following CSS styles will make the structure responsive as well as the sticky form behave as expected.

.banner {
background: #007bff;
color: white;
text-align: center;
padding: 50px 0;
}

.content {
display: flex;
justify-content: space-between;
padding: 50px 20px;
max-width: 1200px;
margin: 0 auto;
}

.text {
flex: 2;
}

.form-container {
flex: 1;
position: relative;
}

#sticky-form {
background: #f8f9fa;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.fixed {
position: fixed;
top: 20px;
z-index: 10;
}

4. Add jQuery for Sticky Behavior

The form is set to be sticky by adding the following jQuery snippet:

jQuery(window).on(‘scroll’, function () {
const scrollTop = $(window).scrollTop();

if (scrollTop > offsetTop) {
form.addClass(‘fixed’);
} else {
form.removeClass(‘fixed’);
}
});
});

This script calculates the top offset of the form container. Adds a class .fixed when the user scrolls past the container’s position.

5. Test Responsiveness

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.

6. Adding this to Elementor Free

In Elementor Free, do the following:

Create a two-column section.
Insert your text content into the left column.
Insert your form (using a shortcode or HTML widget) into the right column.
Open the section’s settings and add the following CSS in the Advanced > Custom CSS tab (if available). For free users, add the CSS to your theme’s stylesheet or a customizer.
Put the jQuery script in the Custom Scripts or the footer file of your theme.

7. Live Preview and Fine-Tuning

Save your modifications and preview the mode on. Now your form will scroll behind your sidebar. If the results are not ideal, fine-tune the CSS and JavaScript codes as per your layout.

Thus, there is a sticky section in the Elementor free version, so you can produce an excellent experience on your site.

WordPress