While building sites, a task I keep having to do is generating header templates in Elementor. When I was a newbie web developer designing my first sites, I loathed the fixed sidebar. I tried to go it alone at the beginning, got stumped, then decided to push it to the end. That didn’t help much, as I had to deploy the site with a very buggy sidebar that didn’t even stay in place.
Anyone who has ever built a WordPress site knows that your site needs to have a sidebar, especially if it’s a blog or some other type of site with lots of copy. Sidebars are essential, but the default sidebars that are available from WordPress themes can be very disappointing. As a web developer, you should be able to customize the theme and adapt it to your needs when this happens.
This post is going to go over how to add a “sticky” fixed sidebar to your site in Elementor.
What makes a good sidebar?
First of all, let’s talk about WordPress sidebars in general.
WordPress sidebars are a dime a dozen (you can find a sidebar template in almost every theme pack), but they aren’t very customizable out of the bat.
WordPress was designed to be customizable, so you’d expect to find a way to change anything on your site to your liking.
If you’re a beginner who knows nothing about theming, you probably have the default WordPress theme still installed on your site. If you created the site in 2021, then that’s the name of your default theme. The yearly WordPress theme has a sidebar included in it, of course. However, if you use that sidebar, you’ll be stuck with things like RSS feed displays and recent comments boxes.
While these are great widgets on their own, unless your client wants these things on their site, you probably shouldn’t add them.
How to Create a Sidebar in Elementor
First things first, you need to go ahead and install Elementor on your WordPress site and create a new page to edit with Elementor. (You may want to make the “Page Template” Elementor full width to avoid bringing in your default site structure). If you have Elementor Pro, your sidebar could even be a part of a template you can apply to other pages.
On your new page, add a two-column section, and edit the column width to about 35%. Inside the column, you may either add sidebar items manually, or you can drag the sidebar widget into the column. The sidebar widget automatically loads the content of any of your predefined widgets under Appearance > Widgets.
How to make Elementor Sidebar Sticky
Next, you want to head to advanced settings under your sidebar. If you have Elementor Pro, you can make it sticky from the settings. Go to Style > Advanced > Motion Effects. Click on Sticky, then choose between top and bottom. Under the “Sticky on” option, be sure to uncheck mobile and leave it sticky on desktop or tablet at most. The offset can be used to specify at what point the column becomes sticky.
If you don’t have Elementor pro, you can select where to display the sidebar, but you might need to use custom CSS to make it sticky. You can assign a custom CSS class to the Sidebar element (under advanced settings) and add your code snippet in the Custom code section under the appearance menu.
Hit publish, and reload to see your changes live!
WordPress sidebar templates aren’t very customizable, but Elementor offers tons of widgets and suggestions that can come in handy when you’re editing a WordPress theme. At this point, a sticky sidebar should be one of the things you can boast about being able to do.