Resources     Blog  

  1. Home
  2. WordPress Tutorials
  3. How to Use Floating Button in WordPress and Why

How to Use Floating Button in WordPress and Why

Are you looking for an easy way to add a floating button in WordPress? Floating buttons are versatile tools that developers can take advantage of to improve the navigation on their website and even improve sales.

Unfortunately, floating buttons are not available by default in WordPress. However, like most things in WordPress, there is a plugin that can add it.

Today, I will demonstrate how to add a floating button in WordPress using the Floating Button plugin.

What is A Floating Button?

A floating button is a type of button that appears on the top layer of a webpage so it is always visible even if you scroll down the page. The button can come in a variety of shapes, but the most common is a circle.

You can place it at any location on a page and even allow visitors to move the button around. However, you should limit its placement to the sides of the page. Placing it in the middle is a surefire way to annoy a visitor.

Why Add A Floating Button?

Because a floating button is always visible on a page, it can serve a lot of purposes.

For instance, you can create a floating cart button to help lead customers to checkout. You can also create a floating home button to help visitors get back to the home page. You can use them to create any type of button on your website.

Think of it as a floating call-to-action creator.

One of the most common uses for such a button is to access a live chat or sales team. You’ve probably visited a website that used this technique before. It will usually look like “Contact Us +” and when clicked, will expand into a chatbox.

It’s highly effective for websites that have a sales team.

How to Add A Floating Button in WordPress

Step 1: Install Floating Button

The aptly named Floating Button plugin will allow users to easily add a floating button to their WordPress website. It gives users 4 possible locations to place them on a post or page, multiple button shapes to choose from, color options, highlight options, and a slew of other customization tools.

The plugin is quite simple to use and should only take a few minutes to set up, let’s begin.

Click on Plugins and select the Add New option on the left-hand admin panel.

Add New

Search for Floating Button in the available search box. This will pull up additional plugins that you may find helpful.

Floating Button

Scroll down until you find the Floating Button plugin and click on the “Install Now” button and activate the plugin for use.

Install Now

Step 2: Locate the Settings

Upon activation, you are ready to create your very own floating button. And luckily, the creation process is pretty simple. However, it is worth pointing out that this plugin has a Pro version with extra features.

You can identify features locked behind the Pro version by the little red lock icon. You can create a fully functional button without the Pro version, but extra customization options never hurt.

On the left-hand admin panel, click on Wow Plugins and select the Floating Button Lite option.

Floating Button Lite

Click on the Add new tab.

Add new

This will open up all of the customization options that the plugin offers. At the top, you can enter a name to help you identify the button.

Notice, on the left side, there is a Main, Vertical, and Horizontal option. The main button is what users will see on their page. Its function is to display the horizontal and vertical buttons you add to it.

First, we must customize the main button.

Step 3: Customize the Main Button

The first option you can choose is the main icon or the image that will be within the button. By default, the plugin provides 80 unique icons you can choose from, and if you purchase the Pro version, you get over 1500.

Browse through the icons or use the search feature to find one.

Choose Icon

Underneath the icons, you will see a series of drop-down boxes. The plugin only provides one option for the position, button shape, size, animations, and button type. If you want more options, you are going to need to purchase the Pro version.

At the bottom, you will see the color options. You can select the color for the button, icon, tooltip background, tooltip text, and even the hover-over color. Unfortunately, this plugin does not provide a preview option, so it may be difficult to get it right the first time.

Customize Button

On the right-hand side, you will find some visibility options. They include if the button will appear on certain screen sizes (i.e mobile devices), if all users can see them, dependent on the language selection, or if they will appear on all of the content or only the content that has a shortcode placed in it.

You now need to add vertical or horizontal buttons.

Step 4: Add Horizontal and Vertical Buttons

Horizontal and vertical buttons work the exact same way, they are the buttons that appear after a visitor clicks on the main button. The only difference is that horizontal buttons appear horizontal, while vertical buttons appear vertically.

Simple enough, right?

In this case, I will add a vertical button, but feel free to use a Horizontal one.

Click on Vertical or Horizontal.

Vertical or Horizontal

You will see two buttons: Add item and  Delete last item. Click on the “Add item” button and new options will appear. You can choose an icon, tooltip, and various button colors just like the main button. However, this time you can choose what kind of button it is.

The plugin provides 5 options, Link, Login, Logout, Register, and Lost Password. In this case, I will choose Link and create a floating home button by entering my home page URL.

Button Type

You can add multiple vertical and horizontal buttons to any post or page, so repeat these steps as many times as desired.

Once you are satisfied with the settings, click on the “Save” button.

Save

Your floating buttons should now appear on your website if you selected to display them on all posts and pages. If not, you will need to manually enter the shortcode on the pages you would like them to appear on.

Floating Buttons

Congratulations on adding a floating button in WordPress. Remember that you can do a lot of cool things with floating buttons like using them for chat services, navigation, improving the sales experience, quick access to a contact form, and more. If your looking for cool ideas, take a look at the competition.

Improve Navigation

Visiting a new website can be very exciting, or it can be awful if the website has a bad navigation system. Floating buttons are a great way to improve your website’s navigation and they are versatile tools that can be used for a wide array of features.

Listen closely to feedback from visitors and don’t be afraid to run surveys and polls asking guests what they think. After all, if you don’t collect the information, you can’t improve on designs or fix what’s wrong.

And that can cost visitors and customers on a daily basis.

What types of floating buttons did you create? How easy did you find the Floating Button plugin to use?

Author: Robert Giaquinto

Robert has been writing tutorials about WordPress and other CMS for over 3 years since joining the GreenGeeks marketing team. Thanks to this, he has had the opportunity to research and master several areas of WordPress including plugin usage, SEO, website design, and social media integration. When he is not creating content for WordPress, Robert is digging up new content ideas for environmental pieces. These range from the pollution in our air to the danger’s wildlife face. And with a bachelor’s degree in electrical engineering, he is always eager to discuss the way our technologies are affecting the environment, especially when it comes to solar energy.

Was this article helpful?

Related Articles

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.