How to Add a Floating Flyout Sidebar in WordPress

Do you have a website without a sidebar or otherwise called a one-column theme? You may want to add widgets to your website but you prefer a one-column layout. The solution to this problem would be to create a floating Flyout sidebar and add widgets to it.

There are multiple useful widgets for WordPress which you might not want to miss, but still, have a simple and clean no-sidebar theme.

This flyout will be hidden at first and users can click a button to open it.

Step 1 – Adding flyout sidebar using Ultimate floating Widgets plugin #

Ultimate floating widgets is a free WordPress plugin to create floating popups or flyout sidebars and add widgets inside them.

It also provides multiple options to customize the popup, flyout, the button to trigger, etc. There are also options to automatically open the popup/flyout when the page is scrolled.

These sidebars are mobile responsive and automatically resize to small screens.

Let’s get started by installing the Ultimate floating widgets plugin.

To install the plugin, go to Plugins > Add New > Search for “Ultimate floating widgets”. Install

and activate the plugin from the search result.

Step 2 – Creating the widget box #

Go to Ultimate floating widgets > Create a new widgets box. This is to create a new sidebar

where we can add widgets later. This is called a “widget box” in the plugin.

Give a name for the widget box and select “Flyout” as the type.

Down below, you can choose the location/position of flyout on the screen i.e left or right side.

To open this widget box, there are multiple ways.

• Through a button
• Automatic on page scroll
• Both a button and automatic

For this example, we will open the flyout sidebar at the click of a button. Select “Trigger type” as the “From button”

You can configure other settings for the widget box as needed.

Step 3 – Adding widgets to the Flyout sidebar #

Now that we have created a floating flyout widget box, it is time to add your favorite widgets inside it.

Go to the Widgets page and you can find a sidebar with the same name as the widget box.

Drag and drop the widgets you need and configure them as needed.

The flyout sidebar in action #

You have created a flyout sidebar and added widgets to it. Visit your website and you can see a button near the window.

When you click the button, the flyout sidebar opens with the widgets.

The Ultimate floating widgets plugin provides various settings to tweak the design and behavior. You can explore them on the widget box’s settings page.

Add more features #

Ultimate floating widgets plugin offers a PRO version which provides features like below,

• Multiple columns in the sidebar
• Animate the button on idle
• Add rules to show/hide the widget box
• Target visitors

You can enhance your flyout sidebar by upgrading to the PRO version and adding these features.

Conclusion #

I hope this article was helpful in sharing a new way of adding widgets to a website with no sidebar. 

If you like this article, please share and add any comments you have in the comments section below.