BACK TO TOP

How to Add a Floating Footer to Your WordPress Website

How to Add a Floating Footer to Your WordPress Website

Every site owner strives to keep their visitors engaged in the best possible way to make them stay on their web page longer. This can be done by creating a website design that assures good user experience, which includes having well-implemented website navigation, adding captivating CTAs, and other design elements that will help drive more conversions and reduce bounce rates. One such element that you can easily incorporate into your design to boost the level of engagement on your own WordPress website is a floating footer bar.

What Is a Floating Footer Bar and What Benefits It Can Bring to Your Site

Displayed at the bottom of the page, the website footer is a great place to insert any type of relevant information that can be useful to your visitors. This can include info related to your special offers and sales, a button that allows them to subscribe to your newsletter, links that lead to your newest or most popular articles, and anything else you deem appropriate. A floating footer bar is an element that has the ability to “stick” and remain visible as users scroll up and down your page. As such, it naturally increases your chances of scoring more sales, as well as more page views and clicks to other posts or pages to your site. Of course, these depend on what type of content you add to your floating footer.

Considering all these different benefits a floating footer can bring to your site (and by extension, your business), we’ve decided to demonstrate how you can create and add your own floating footer bar to your WordPress-powered website. Luckily, this is actually quite simple to do if you use the help of a suitable plugin. Here’s how you can do it.

Qode Themes: Top Picks
Bridge New Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

Adding a Floating Footer in WordPress With a Plugin

The plugin we will use to create a floating footer is called Advanced Floating Content. This plugin is quite easy to use and customize, and aside from the floating footer, it also allows you to set the floating header, determine the position of your floating content in more detail, change its colors, and much more.

Advanced Floating Content

First, you should install the plugin and activate it. Then, head to Advanced Floating Content >> Add New in your WordPress admin dashboard.

Advanced Floating Content Add New

Once here, you can simply add the title of your floating content and insert the text that you want your floating footer bar to have using the Classic WordPress editor. You can also include a picture, add links or anything else you’d usually be able to do within the Classic editor.

Still, we have to note that even though there are technically no limitations to how many pieces of content you can add to your floating footer bar, the purpose of this type of bar is usually to add one important piece of information that will be visible to the website viewers. This is unlike the regular website footer, which usually serves to display multiple types of content (such as navigation links, the company logo, contact info, social icons, etc.).

Advanced Floating Content Single

Also, the title itself won’t be shown on the actual floating content bar. Rather, if you create multiple types of floating content, it will only help you differentiate one floating bar from the other in the All Advanced Floating Content screen. Like this:

All Advanced Floating Content

Right below, you can also customize the look of your floating content in full detail. This includes its position (Fixed or Absolute, Top or Bottom, Left or Right), the ability to show or hide the Close button, choose the desired width, etc. In addition, you will also be able to set the background color, set margin and border values, as well as border properties. For instance, this is how we set them:

Floating Content Details

If you upgrade the plugin to the premium version, you will also get plenty of additional options at your disposal. And if you’re only using the free version, you will get to see the preview of these options.

Aside from the ability to choose the position of your floating content, with Advanced Floating Content Premium, you will also be able to set its margin padding and go further in-depth when it comes to customizing your floating bar with options such as font color and font size. You can even add custom CSS if you want to.

Premium Options

Finally, by purchasing the premium version of this plugin, you will have access to some floating content controlling options as well. These include the ability to choose whether you want to show your floating content on your homepage, on your search page, on all or individual posts and/or pages, categories, custom post types, etc.

Another useful option that you get is the ability to set your floating content on other devices, hide them on a certain width, or hide them completely.

Floating Content Controlling Options
Add Floating Content

After hitting the Add button, you can go ahead and preview the look of your floating footer on your site.

Conclusion

Adding a floating footer to your website is a great way to increase user engagement of your website. Depending on what type of content you decide to share in your floating footer, it can boost your page views and even bring you more sales and conversions in the long run.

If you opt for incorporating this useful design element into your own WordPress website, we highly recommend that you use the Advanced Floating Content plugin for this task. It is simple to use and comes packed with plenty of both free and premium customization options that allow you to easily adjust your footer to match the overall design of your brand. Just stick to our simple guide we shared with you above, and you’ll be all set.

Post your comment

Comments0