Create Fixed Side Bar aka sticky Sidebar Widget will help you keep the right or left sidebar stationary when the user scrolls the mouse but the article length is greater than the total length of the side bar, then 1 sidebar will be kept fixed. The purpose of this is that website visitors can pay more attention to your banner. Note that fixing the left or right side bar only makes sense when using a Laptop. Mobile is not very effective.
In this post IMTA will show you how to create sticky widget (fixed widget) for WordPress website. This is a very good tip for WordPress users that you should refer to to improve the user experience on the website and many other benefits.
To put it simply, sticky widget is the term used for WordPress websites when referring to widgets (widgets) that can be pinned when scrolling the page. You can visualize through an example video of this type of widget as below. When I scroll the page, the sidebar ad is pinned (keep it fixed).
Widget will be pinned (stick) during your scrolling, until a preset element is encountered that will no longer be pinned. And at that time, the sticky widget is also scrolled like a normal widget.
Most people set the widget to stop pinning when scrolling to the footer. That helps the content in the sticky widget not be displayed on top of the footer. You can imagine through the following video demonstration:
In addition, sticky is only used to pin necessary utilities for devices with large screens such as tablets (screens larger than 11 inches wide) and laptops, desktops. On phones or devices with small screens, this feature is not available.
Whether it is a website using WordPress or another platform. Sticky widget It’s just a very small feature but brings a lot of value to both visitors and web owners and advertisers. Here are some benefits of this type of widget for your reference.
Table of Contents
For website owners and advertisers
With a longer content display time when the user scrolls the page, the sticky widget helps to keep the reader’s attention during the scrolling process. That helps the content / product / service recommendations better reach the readers. This is much better than placing advertising messages on a regular widget, when scrolling the page it goes by too fast for the user to see.
Since it is always pinned during the user scrolling, the free space of the web page is filled and balanced.
Thanks to the pinned “select” content, the visitor’s onsite time is longer. That also contributes to a positive influence on website SEO.
For users
Feature sticky not only used to pin content/advertisement. For e-commerce websites, classifieds, etc., equipping with filtering tools, classifying content/products/services will reduce page scrolling for users.
For sales websites where the product has too many categorical attributes. If every time you want to filter a product, you have to scroll up to select the taxonomy attribute, it is not very convenient (Theme Flatsome is supporting). Furthermore, with dozens or more categorical attributes, aligning them only horizontally across the screen is not optimal in terms of user experience.
In addition, when you have a website running Google Ads ads, people can also pin forms or call buttons in the fixed sidebar so that users can easily click. Some of you who use WordPress posts will choose this option for the convenience of users and increase the conversion rate that I also mentioned in the Google Ads course.
Currently, some themes are supported sticky widget (fixed widget) for user convenience. However, there are many themes that do not yet support this feature. And most likely the theme you are using does not support this feature. Therefore, if you want to have a sticky widget, there are only 3 ways as follows:
- Install a plugin that supports the sticky widget feature, this method is simple, fast and easy to implement.
- Switch to using a theme with a built-in sticky widget.
- Code sticky widget feature for the theme in use. If you don’t know how to code, you can hire a WordPress developer to do it for you. Some of you are afraid of the problem of installing more plugins that cause heavy web, you can choose that direction.
And within the framework of this article, IMTA only guides you on how to tạo sticky widget (fixed widget) bằng plugin. Because this method is simple, easy to do and moreover, this plugin is completely free on the WordPress.org repository – anyone can download and use.
If you use professional website design services at IMTA, you can request specific functions so that we can plan a consultation and code the fixed widget feature for you.
Install and setup the plugin Q2W3 Fixed Widget
Plugin Q2W3 Fixed Widget available on the WordPress repository. org so you find the correct name to download, install and activate like any other plugin. It is important to set it up correctly so that the sticky widget feature does not raise an error.
Below I will guide you to set up and annotate the features of the Q2W3 Fixed Widget. You rely on that to set up to suit the website you are doing.
BonusDetailed instructions for installing Plugins on WordPress websites
Step 01: In the website’s admin page, click on Appearance >> select next Fixed Widget Options to open the plugin’s settings Q2W3 Fixed Widget go up.
Step 02: You set up the plugin Q2W3 Fixed Widget similar to the image below. In the settings section of this plugin, there are quite a few options. However, in my experience, I just need to do a few things like I’ve modeled in the picture. The other items don’t need much attention so as not to get confused.
- Margin Top: Is the distance from the sticky widget to the element above it, usually a widget. Leave the default value at 10px or change it if you want;
- Margin Bottom: Similarly, this is the distance from the sticky widget to the element below it.
- Stop ID: This is the ID of the element that when scrolling the page, the sticky widget “touches” the right, the pinning feature has no effect (ie unpin). Usually theme designers like to name this ID as “
site-footer,footerorfooter-widgets,.. This is also the HARDEST part when setting up the Q2W3 Fixed Widget. Therefore, if you do not know the ID to insert, you can post a question on the group DIY Website WordPress 101 to ask someone for help! - Disable Width: Is the minimum width for the sticky widget feature to work. But in the picture I have the minimum width set to 960px. That is, when the user browses the web on a screen that is less than 960px wide, the sticky widget acts like a normal widget.
- Disable Height: Minimum height, this item you can leave the default.
- Compatibility: This item you are only interested in if the website is using plugins to optimize website performance (cache plugins). If you use the cache plugin, you tick 02 items as shown above, and if you don’t use it, leave all the entries blank.
Step 03: Press Save Changes to save the settings made. Note: if the website uses a cache plugin, you must clear the cache to see the results.
How to add sticky widget to WordPress website with plugin Q2W3 Fixed Widget
This part is quite simple, you just need to create a normal widget in the sidebar of the website, then tick the Fixed widget item as shown below. Note that the sticky widget must be located at the bottom so that it is not displayed on top of other widgets.
After adding the sticky widget, save it to check if it was successful. If not, then go back to the settings Q2W3 Fixed Widget to check if inserted correctly Stop ID not yet or is there an error caused by the cache plugin?
Frequently asked questions
EPILOGUE
That’s it, IMTA has finished guiding you how to create sticky widget for WordPress website and know. This trick, although very simple, is quite useful, isn’t it? If you have any questions about the operation, you can post it to the WordPress support group I left in the post or leave a comment below.
In addition to keeping the right sidebar of the article fixed, some of you also need to fix an article every year on the homepage when the homepage is in the form of a blog. I will write more in the following posts.
Hello and see you in the following articles on the topic of WordPress tips at IMTA. EDU.VN !
