How to Create a Sticky Sidebar in Elementor

how to create a sticky sidebar in Elementor

Introduction: How to Create a Sticky Sidebar in Elementor

Among the various Elementor Tutorials that I have created, by far the most popular is How to Create a Sticky Sidebar in Elementor. 

For those who don’t want to watch a 12 minute video, I thought I would create a written post.

But please be aware of one thing…in order to create a sticky sidebar in Elementor, you’ll need to have Elementor Pro (affiliate link).

In this post, I’m going to show you 3 different ways to create a sticky sidebar in Elementor. 

The first two methods work best when you want the whole sidebar to be sticky or when you want multiple widgets on the widebar to be sticky.

The last method works best when you have a single widget on your sidebar that you want to be sticky. 

So let’s take a look at…how to create a sticky sidebar in Elementor!

The Sticky Option in Elementor

To begin with, let me show you the two places within Elementor where the “sticky option” exitsts. 

First of all, you can make an entire section sticky (under the advanced tab/motion effects).

Elementor Sticky Sidebar

Secondly, you can make individual widgets sitcky. For example, take a look at the Inner Section Widget (under advanced tab/motion effects).

Elementor Sticky Sidebar

PLEASE NOTE: In both cases, you can set the section or the widget to be sticky to the top or sticky to the bottom. You also have the option to turn sticky on or off for desktop, tablet and mobile. Finally, you can set Offsets which pushes the sticky element up or down by the designated number of pixels and/or Effects Offsets which sets the number of pixels the user must scroll before the sticky effect begins. 

Elementor Sticky Sidebar

Making a section sticky is best for when you want to create a sticky header. 

To create a sticky sidebar in Elementor, we’ll be working with individual Elementor widgets. 

Some Guidelines for Creating Sticky Sidebars in Elementor

Before I show you the three methods to create a sticky sidebar in Elementor, I want to lay out some general guidelines for how to do it. 

1) You can make either your whole sidebar sticky or only part of it. If you only want some of your sidebar content to stick, then you should add the sticky widgets to the bottom of the sidebar column. Otherwise, you’ll create a strange scrolling experience for your website visitor. 

2) Your total sticky content should not be longer than the typical computer viewport. Otherwise, your content will tend to stack up on top of itself when someone scrolls down.

3) You’ll probably want to turn the sticky effect off for mobiles since most mobiles don’t have enough space to display a sidebar. You should also check and see if your sticy sidebar “works” on a tablet display or not. If it doesn’t, then turn it off. 

4) The first two methods that I am going to show you work best when you want the whole sidebar to be sticky or when you want multiple widgets on the widebar to be sticky. The last method works best when you have a single widget on your sidebar that you want to be sticky. 

METHOD 1: Using the Inner Section Widget

Your first option for creating a sticky sidebar in Elementor is to use the Inner Section widget. 

STEP 1: Add an Inner Section Widget to your sidebar column

Your first step is to add an inner section widget. 

You’ll add that widget inside of your sidebar column on your blog post. 

You can add it to a sidebar that is empty or one that already has content in it. 

In the example below, I’ve added an inner section widget to the sidebar on the right-hand side. 

Elementor Sticky Sidebar

STEP 2: Delete one of the Inner Section columns

Once you’ve added the inner section widget to a column, you’ll want to delete one of the columns from the inner section widget. (either one is fine). 

Just hover over the column that you want to delete, right-click on your mouse, and then select delete. 

Elementor Sticky Sidebar

STEP 3: Add content widgets to the remaining Inner Section column

You now have an inner section widget with a single column on your sidebar.

Now you will add widgets to that remaining column. 

Basically you’ll add whichever widgets that you want to have “stick” when someone scrolls down.

In the screenshort beow, I’ve out a Heading widget (Recent Posts) and the Posts widget inside of the inner section column. 

Elementor Sticky Sidebar

STEP 4: Set the Inner Section Widget to Sticky "Top"

The last step is obviously to set the inner section widget to sticky.

Just go to the Advanced tab, click on Motion effects, and select top. 

That’s it! You should now have a sticky sidebar. 

Elementor Sticky Sidebar

METHOD 2: Using the Sidebar Widget

The second method for creating a sticky sidebar in Elementor is by using the Sidebar widget. 

STEP 1: Go to the Widget section of WordPress

On the left-hand side of your WordPress dashboard, click on Appearance and then Widgets. 

Elementor Sticky Sidebar

STEP 2: Add widgets to one of your sidebars

Next you’ll want to drag widgets from your “Available Widgets” on the left hand-side over to one of your Sidebars on right-hand side. 

Only drag over widgets that you want to be sticky on your sidebar. 

Of course, you’ll also want to configure those widgets as you want. 

In the screenshot below, I’ve added a Recent Posts widget and a Social Icons widget to the Default Sidebar. 

Elementor Sticky Sidebar

STEP 3: Add the Sidebar Widget to your sidebar and select the appropriate sidebar

First, you’ll drag and drop the sidebar widget from Elementor into your sidebar.

At this point, it should appear as a grey box (see the right-hand side of the screenshot below).

Elementor Sticky Sidebar

Then select the appropriate sidebar within the widget. 

In this case, the appropriate sidebar is Default Sidebar. 

Elementor Sticky Sidebar

Wait a few seconds and the widgets that you selected in Step 1 should appear in your sidebar. 

Elementor Sticky Sidebar

STEP 4: Make the Sidebar widget sticky "Top"

Similiar to Step 4 in the first Method, you will now make the Sidebar widget sticky to the top.

Just go to the Advanced tab, open up Motion Effects, and then under Sticky, select “Top”.

Viola! Your Sidebar widget will now be sticky.

Elementor Sticky Sidebar

METHOD 3: Using a Single Widget

The first two methods above work great when you have multiple widgets that you want to be sitcky.

But what if you only have a single widget that you want to be sticky on your sidebar? 

That’s a lot easier. 

STEP 1: Add the Widget that you want to be sticky to the sidebar

Let’s say that you want to have social icons in your sidebar and that you want those icons to be sticky. 

First, simply drag and drop the icons into your sidebar. 

Elementor Sticky Sidebar

STEP 2: Make that particular widget sticky "top"

Similar to step 4 under the first two methods, you will now make that widget sticky “top”. 

Click on the Advanced tab, Motion Effects, and enable the Sticky option as “Top”. 

Elementor Sticky Sidebar

That’s it! That’s all you have to do to make a single widget in your sidebar sticky. 

Conclusion

So there you go…3 ways to create a sticky sidebar in Elementor. If you have any questions about how to set this up, please let me knowin the comments below and I’ll do my best to help you out!

And if you still need a copy of Elementor Pro, you can pick one up by clicking the box below (affiliate link). 

Free List Building Guide!

  • Best tips, strategies, and techniques for driving traffic to your website.
  • 4-step process to ensure that you continually add new leads to your email list.
Share on Facebook
Share on Twitter
Share on Linkdin
Share on Pinterest

Leave a Reply