How to Add a Sticky Floating Sidebar Widget in WordPress

Elements that float with the screen as a user scrolls tend to have a higher click through rate. This is why authority websites such as Quick Sprout, ManageWP, and Shopify use the floating widgets – it improves the conversion rate.

In this post, we’ll show you, how you can add a sticky floating sidebar widget in WordPress using the Q2W3 fixed widget plugin.

About the Q2W3 Fixed Widget (Sticky Widget) Plugin

Q2W3 is a lightweight plugin that relies on the unique ID attributes in html code and jQuery to achieve the end result. Essentially, once activated, the plugin will enable a fixed widget option in the widget settings. You’ll also have the ability to make more that one widget sticky and in case you have multiple sidebars, you can adjust the setting for each one.

The plugin works with most popular themes but there are a few know issues:

• A minimum of jQuery 1.7 is required.
• There can be no JS errors present which are caused by other plugins.
• The wp_head() and wp_footer() functions need to be in the header.php and footer.php files.
• If your widget jumps around with scrolling, you may need to use some custom CSS to fix the problem.

Customizing Your Sticky Widget Settings

Within the WordPress admin dashboard under Appearance, you’ll find  the global setting for “Fixed Widget Options” While it would be nice if you could adjust these settings for each individual widget, it’s not possible at this time. However, there are a number of helpful settings that allow you to customize the overall appearance including:

• Adjusting the top margin in px – If you using a left and right side bar, try to make sure that the top of both of the widgets on each side are in alignment.
• Adjusting the bottom margin in px – if you have a problem with the widget overlapping your footer, this is the setting you’ll want to pay attention to
• Refresh interval option – This option allows you to adjust how frequently the plugin recalculates it’s settings. The developer recommends a setting between 250-1500 ms since this setting can have an effect on your overall site performance.

Example of Websites using a Floating Widget

You can use the plugin to promote your products or services. And if you are a kind of big deal like Neil Patel, then you can sell those leads to an agency and generate thousands of dollars each month. It’s also important to make sure that the content you’re placing in your sticky widget is something your visitor want to see. It’s easy for a sticky widget to to make your user experience negative.

It also important to test your site on multiple devices. Attempting to use a stick widget on a mobile device rarely works well the the end-user. Q2W3 has a simple checkbox option to disable the plugin on either phone or tablet devices.

Or you can use it to get more subscribers, check the below screenshot to see how Shopify is using this to attract more email subscribers.

Creating a Sticky Floating Widget using Q2W3 plugin

Step 1: Install and activate the plugin. Navigate to Plugins > Add New > search for “Q2W3 Fixed Widget” or if you’re familiar with installing plugins in WordPress than you might want to download it from the WordPress directory and upload it manually.

Step 2: Once you activate the plugin, head over to the settings page, which can be found under the “Appearance” section. On the settings page, set the margins, refresh intervals, max width, enable jQuery, and more.

Now to make any widget floating, just tick the checkbox “Fixed Widget” in your widget.

You can use the sticky widget to boost newsletter signups, showcase content, promote your social media profiles, put banner ads, etc. And you can even have multiple floating widgets in your sidebar area.

You notice the use of sticky content all over the web. Some people use sticky content on their twitter profiles to promote their businesses. WordPress websites often have a sticky post at the top of  the blog in order to put important information front and center. The most important thing to remember is that you should use stick content selectively and make sure it not getting in the way of your visitors – once they’ve left, there is a good chance they might never visit your website again.

Are you using this plugin? What do you think about floating widgets, in general? Please share your thoughts in the comments below.