Introduction: 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).
Secondly, you can make individual widgets sitcky. For example, take a look at the Inner Section Widget (under advanced tab/motion effects).
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.
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.
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.
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.
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.
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.
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.
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).
Then select the appropriate sidebar within the widget.
In this case, the appropriate sidebar is Default Sidebar.
Wait a few seconds and the widgets that you selected in Step 1 should appear in your 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.
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.
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”.
That’s it! That’s all you have to do to make a single widget in your sidebar sticky.
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).