Roger Baker

Roger is a developer at Sagapixel and serves as our official Elementor trapeze artist.

How to Make a Column Sticky in Elementor [VIDEO]

Category:
Table of Contents

If you’d like to get the plugin I’m using to make the sticky column in Elementor, click here

Transcript

Making a Column Sticky in Elementor Using Jet Tricks

Hello, this is Roger, an Elementor web designer at Sagapixel. This is going to be a quick tutorial on how to make a column’s content sticky-top.

For example, on this page, we want to make it so that this contact form will follow you down the page as you scroll. And as you can see, I have set it up to do such. I just want to show you how we’re going to do that on the back end.

If we log into the back end, want to do is go to the page in question, so we’ll go to all pages. I know this one was recently created, so I’m just going to organize like this. I’m going to go edit with Elementor.

What I want to do is go to the column where we want the content to stick to the top, which would be this one. And we click edit column. Go to advanced.

And we want to go to the JetTricks tab. So all you have to do is set this sticky column option here to yes. And then, your top spacing setting is going to basically determine how far you want the form to be from the top of the page as you scroll. So right now we have it set to 50.

For example, we’ll change this to 200. You’ll see that on the front end, it has a lot more padding up top than it did when I originally showed you. So if we open the page, start scrolling, you’ll see it has a much larger gap now because it’s 200 pixels rather than 50.

And now we’ll go back here, we’ll just set this back to 50. Bottom spacing, we’re going to leave at the zero. That’s obviously the opposite of the top spacing. So this is how far it will stop from the bottom. You’ll also notice that when you’re in the page builder, the stickiness doesn’t have any effect. The only way to view it working is on the front end.

Now, in order to have this option on your column, you do need to have JetTricks installed on the back end. So if we go back to the dashboard, and we go to plugins, you’re going to need to have JetTricks right here. We have that under our resources tab.

When you download that, you’ll also get the option to do any of these other plugins, once you add the license to the WordPress website. And then, you just activate whichever ones you want to use on the build. But the one that you wanted to use for the sticky column is going to be JetTricks.

Schedule a call with us