Do you want to create a floating sidebar widget that sticks as you scroll down?
Floating elements that stick to your screen as you scroll are attention-grabbing and tend to have a higher click-through rate and conversion rate than static objects. This is why many websites make use of floating elements throughout their website.
In this article, we will show you how to create a sticky floating sidebar widget in WordPress.
Why Create a Sticky Floating Sidebar Widget?
A sticky floating sidebar widget stays on your user’s screen as they scroll down the page, giving your site visitors more opportunities to notice it and click. You can use it for building an email list, featuring product promotions, sharing popular posts, displaying recent Tweets or Instagram posts, and anything else that you like.
This helps you make your sidebar stand out even more and keep important information in front of your visitors.
If you have an eCommerce store, then you can use the sticky sidebar to display your top products or a promotional offers to increase sales.
That said, let’s look at how you can create a sticky floating sidebar on your WordPress site.
Adding a Sticky Floating Widget in WordPress
You can easily create floating widgets that stick while scrolling using the Q2W3 Fixed Widget for WordPress.
It’s a free WordPress plugin that’s very easy to use. The plugin helps you stick any widget on your website, so when a user scrolls the page up and down, the widget stays with them.
In this article, we’ll show you how to use both the versions block based widgets and the classic WordPress widgets.
Sticky Floating Sidebar in WordPress Block Based Widgets
If you’re using WordPress 5.8, then you’ll have block based widgets. The widget screen will use the block editor to edit or add new widgets on your website.
To make a sidebar widget sticky, you’ll need Q2W3 Fixed Widget for WordPress version 6.0 beta 3. Simply scroll down to the Changelog section and then click the ‘version 6.0.0, beta 3’ link to download the plugin. We tested the plugin on our demo website and it is working smoothly.
Next, you’ll need to install and activate the Q2W3 Fixed Widget for WordPress version 6.0 beta 3 on your website. For more information, please refer to our guide on how to install a WordPress plugin.
Upon activation, you can head over to Appearance » Fixed Widget Options from your WordPress admin area.
Next, you’ll need to click on the ‘Test new version’ box to enable the option and then scroll down to click the ‘Save Changes’ button.
After that, you can go to Appearance » Widgets from your WordPress admin panel and then click the ‘+’ plus button to add a widget block that you want to make sticky.
For our tutorial, we added a Custom Twitter Feeds by Smash Balloon in the sidebar widget area to display recent tweets from our Twitter channel. Smash Balloon is the best social media WordPress plugin and allows you to easily display social media content in WordPress.
You can check out our guide on how to display recent tweets in WordPress for more details.
Next, you can select your widget and then change the ‘Fixed Widget’ settings in the menu on your right.
Simply select ‘Fix widget’ option to make the floating sidebar stick to the screen.
Next, you can visit your live site and scroll down on any page or blog post. Your fixed widget will now become a sticky floating widget.
Sticky Floating Sidebar in Classic WordPress Widgets
If you’re using a version prior to WordPress 5.8 or the Classic Widgets plugin, then this is the method you’ll need to use.
The first thing you need to do is install and activate the Q2W3 Fixed Widget for the WordPress plugin. If you need help, then please see our guide on how to install a WordPress plugin.
After activating the plugin, you can head over to Appearance » Fixed Widget Options from your WordPress dashboard and configure the plugin.
On this page, you can set the margins, add your HTML IDs, change refresh intervals, and even disable the fixed widgets on smaller screens like phones and tablets.
There are also options for enabling the plugin for logged-in users and other compatibility settings.
After making the changes, simply scroll down and click the ‘Save Changes’ button.
Next, you can navigate to Appearance » Widgets and then choose the widget that you want to make sticky.
The plugin adds a ‘Fixed Widget’ option in all of your widgets. All you have to do is check the Fixed widget box and click on the ‘Save’ button to store your changes.
We hope that this article helped you learn how to create a sticky floating sidebar widget in your WordPress website. You can also check out our guide on how to start a podcast and best payroll software for small businesses.