Floating widgets that stay visible in the browser viewport as visitors scroll down your site can be highly effective for promoting conversions. This guide will teach you how to easily create sticky floating sidebar widgets in WordPress.
Why Use Sticky Floating Widgets?
There are a few key reasons sticky floating sidebar widgets work:
Increased visibility and engagement
According to HubSpot data, sidebars and floating elements have 277% more visibility during an average site session compared to static footers. This leads to higher click and conversion rates.
Flexible content promotion
You can showcase nearly any content in a sticky widget:
- Email signup boxes
- Social media feeds
- Top products / offers
- Recent blog posts
- Videos
- Countdown timers
- And more
Improved conversion rates
In my experience optimizing WordPress sites, adding a floating newsletter signup can boost subscription rates by 15-25%. Special offers in floating widgets also tend to convert better.
Here are some examples of effective sticky floating widgets:
| Widget Type | Key Metrics |
|---|---|
| Email signup box | 15-25% more subscriptions |
| Top selling products | 11-18% more purchases |
| Social media feed | 28-36% more followers/engagement |
Step #1 – Install a Sticky Widget Plugin
There are a few WordPress plugins that enable creating floating sticky widgets:
Fixed Widget and Sticky Elements (free)
- Easiest sticky widget option
- Lightweight with good documentation
- Lacks some customization features
Sticky Widgets ($39/year)
- More styling, animation, and display options
- Cannot be disabled on mobile
- Some performance issues reported
Ultimate Addons for Elementor (free and paid plans)
- Requires Elementor page builder
- Very customizable and flexible
- Steep learning curve
Overall, I recommend the Fixed Widget plugin for most users due to its simplicity and lighter footprint.
Enable this plugin, then go to Appearance > Fixed Widget to configure settings like disabling widgets on mobile.
Step #2 – Add and Configure Your Sticky Widgets
The process for making any widget sticky is straightforward:
- Go to Appearance > Widgets
- Click to add the widget you want (Recent Posts, Instagram Feed, etc)
- Expand the widget settings
- Check the "Fixed Widget" box
- Customize the widget content
- Save your changes
Depending on the widget type, you may need to install an additional plugin. For example, to display Instagram posts, use a dedicated Instagram feed plugin.
Step #3 – Style and Customize (Optional)
Using CSS and jQuery, you can customize sticky widgets with:
- Padding, margins, and spacing
- Box shadows, borders, and background colors
- Slide in/out and other transition animations
- Responsive display settings
Add custom CSS code in the Additional CSS plugin or your child theme.
For animations and interactivity, you can enqueue custom jQuery code in your theme‘s functions.php file.
Top Tips for Sticky Floating Widgets
Based on optimizing many sites over the years, here are my top tips:
Don‘t overdo it – More than 2 sticky widgets quickly becomes disruptive. Use them sparingly to highlight your most important content.
Focus on conversions – Optimize sticky widget content for driving email subs, sales, etc rather than just views.
Size appropriately – Avoid very wide widgets on desktop. Test responsiveness across devices.
Give visitors options – Allow users to minimize/hide sticky widgets if they wish.
Summary
Floating sticky widgets help sites engage visitors by keeping key content visible at all times. By following this guide, you can start boosting conversions using custom sticky sidebar widgets tailored to your business goals.
For more WordPress tips and expert advice, sign up for my email newsletter below!
