Sticky sidebars are widely used.
Whether you stumble upon a news website, a blog, or an online store, the chances are high that you will encounter them. And they use them because they work.
You are already reading this article, which means that you are looking into the possibility of implementing sticky sidebars on your WordPress website.
However, do you know what the purpose of the sticky sidebars on a website is?
Or do you maybe want to implement them to fill a gap in your design?
Reason to Add Sticky Sidebar in WordPress
The answer to the previously asked question is yes. It’s perfectly fine to use them to fill a gap on your website.
Yet, this is not the reason that top-tier websites (CNN, The Sun, etc.) use them.
The reason a lot of the websites use sticky sidebars is quite simple, and it’s to boost conversions.
If you think about it, it’s logical that using sticky sidebars will boost the conversion rates.
They help to keep the desired elements longer on the website. The longer time the CTA spends starring the visitor in the eyes, the higher the chances are that it will get noticed too and clicked.
Facebook and Twitter also use sticky sidebars, but for another reason.
They use them to enhance the user experience of their visitors.
They save them their time and trouble from having to scroll back to the top just to view the group updates or navigate to another page.
You now know of the reasons for when and should you have a sticky sidebar, so let’s move on how to add it to your website.
How to Add a Sticky Sidebar in WordPress?
It’s not hard to add a sticky sidebar floating widget to WordPress. There isn’t any coding involved, and you can do it right now.
You need to install a plugin called Q2W3 Fixed Widget. It has more than 100,000 active installations and is regularly being updated so that we are in a piece of mind.
Note: I’m going to show both a GIF how-to video and explain the process in the text so that you can follow me one way or the other, it’s your choice.
Step 1: Install the Q2W3 Fixed Widget Plugin
The list of related searches will shop up; we already know what we are looking for, so we will install the Q2W3 Fixed Widget plugin by Thomas Maier and Max Bond.
So, without further ado, let’s start by installing the plugin.
If you don’t know how to install a plugin, it’s straightforward.
From the WordPress dashboard, go to Plugins » Add New.
Search for the plugin by its name, in this case, Q2W3 Fixed Widget and click install.
After installing, make sure to activate the plugin.
Step 2: Configure the Settings for the Plugin
After activating the plugin, it’s time for the actual set up of it.
Go to Appearance » Fixed Widget Options.
It will take you to a new page where you can see all of the options this plugin offers.
The easiest thing that you can set is the Margin top and margin-bottom parameters.
With margin-top, we set the distance between the sticky menu and the top of the screen.
Similarly to the last one, with margin-bottom, we set the distance between the sticky menu and the bottom of the screen.
Both of these settings can come in handy and are helpful.
Another cool feature is the Stop ID option.
We should enter an HTML tag ID as a parameter.
What we accomplish by this is that we set the margin-bottom value to the position of the HTML element whose ID we provided.
However, the options I like the most are the disable width and disable height.
These are parameters that will hide the sticky menu if the browser screen width or height is less than the values we have specified in the menu.
It enables us to have the sticky menu only on PCs and/or tablets, which is where we only want to show the sticky menu on anyway.
It’s rare to need to use a sticky menu on mobile; most of the time, it will take most of the screen and ruin the page experience.
The rest of the options are for compatibility, such as not scrolling correctly, not working at all, etc.
I’m not going to explain them here, mainly because most of you will not need them anyway and the plugin will work perfectly fine.
However, sometimes the server’s settings or specific themes and plugins may block the work of the Q2W3 plugin, and you will need to play with these settings.
They are all explained in the documentation for the plugin that can be found here under the troubleshooting section.
After you finish setting up the plugin, don’t forget to save the changes by clicking on the button “Save Changes.”
Note: If you are using a caching plugin. Make sure to clear the cache after changing the options of the plugin; otherwise, the changes will not take effect straight away.
Step 3: Add Widgets to Your Sidebar
In this step, we are going to add the widgets to our sidebar, which is pretty easy to do. You probably already know how to do it.
But don’t worry, I will explain it again to you just to make it easier.
To do that, we need to go to Appearance » Widgets.
The standard layout of the widget panel is the same; there is nothing changed.
On the left side are all the widgets you can add to your widget areas, which are listed on the right side.
For this plugin to work, you must have at least one widget into your sidebar area.
So, if your widgets are already added to the sidebar, great for you, you have less work to do!
Don’t worry; if you don’t have any widgets into your sidebar, it’s straightforward to add them.
All you have to do is find the widget you like from the list of widgets on the left side and drag it over to the sidebar area on the right.
In my case, the sidebar area is called Footer #1 (Not a sidebar, I know, but the principle is the same).
Your sidebar will probably be called something along the lines of Right (or Left) Sidebar.
Great, now you have the widget in place. All that’s left to do is to select that widget as sticky. Which brings us to the next step:
Step 4: Select the Widgets That You Want to Be Sticky
It is our final step; all that is left to do is to select the widgets that we want to stay on the screen all the time (sticky widgets).
To do this, we need to be in the widget’s dashboard. I’m already there. But if you don’t know how to find it feel free to scroll back to the last step, there you will find both explanation and GIF on how to get there.
After you open the widget’s dashboard, you need to find your sidebar in the list of widget areas that are on the right side of your screen.
After finding the sidebar, click on the arrow next to the sidebar’s name so you can see all the widgets that are placed inside it.
Next, you want to again click on an arrow, but this time it needs to be next to the widget’s name that you want to make sticky.
Another box will open up with the widget’s settings, which are different for every widget.
On the left bottom corner. Just above the Delete and Done buttons, you will see a new option added by the plugin we installed.
It’s a checkbox called Fixed Widget, which is pretty self-explanatory.
If you check it, the widget will become sticky.
And there it is, you can add as many sticky widgets as you want. Just remember that whatever widget is extra will not fit on the screen and thus will not be seen.
Final Thoughts About adding a Sticky Sidebar
The sticky sidebars, made of sticky float widgets are a great way to boost the conversion rates on your website.
Whether you want to boost up your email opt-ins, affiliate click-through rates, increase sales, or anything else, it’s proven that the sticky sidebar will help.
You can add as many widgets to the sidebar as you like, but be careful.
If you go too crazy and add dozens of elements. You may annoy your readers and accomplish the opposite effect – to scare people away.
Just as anything else both in life in web design, you need to have a healthy balance. One to two elements will be just enough to increase the efficiency of your website while making sure that you don’t frustrate your readers.
With that said, I’m interested to hear your thoughts in the comments – have you ever used sticky sidebar widgets and how big of an increase did you notice in your conversions?
Comments are closed.