{"id":21068,"date":"2021-03-04T15:00:41","date_gmt":"2021-03-04T14:00:41","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=21068"},"modified":"2021-03-03T14:06:18","modified_gmt":"2021-03-03T13:06:18","slug":"how-to-add-floating-footer-to-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-floating-footer-to-wordpress\/","title":{"rendered":"How to Add a Floating Footer to Your WordPress Website"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]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<\/a>, adding captivating CTAs<\/a>, 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<\/strong>.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

What Is a Floating Footer Bar and What Benefits It Can Bring to Your Site<\/h2>\n

[\/vc_column_text][vc_column_text]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<\/strong>. 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 \u201cstick\u201d and remain visible as users scroll up and down your page.<\/strong> 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.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Considering all these different benefits a floating footer can bring to your site (and by extension, your business), we\u2019ve 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\u2019s how you can do it.[\/vc_column_text][vc_empty_space height=”80px”][vc_widget_sidebar sidebar_id=”new-top-picks-banner”][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Adding a Floating Footer in WordPress With a Plugin<\/h2>\n

[\/vc_column_text][vc_column_text]The plugin we will use to create a floating footer is called Advanced Floating Content<\/a>. 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.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Advanced <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]First, you should install the plugin<\/a> and activate it. Then, head to Advanced Floating Content >> Add New<\/em> in your WordPress admin dashboard.<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Advanced <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]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<\/a> or anything else you\u2019d usually be able to do within the Classic editor.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]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<\/strong>. This is unlike the regular website footer<\/a>, which usually serves to display multiple types of content (such as navigation links, the company logo, contact info, social icons, etc.).[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Advanced <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Also, the title itself won\u2019t 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<\/em> screen. Like this:[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"All <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]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:[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Floating <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you upgrade the plugin to the premium version, you will also get plenty of additional options at your disposal. And if you\u2019re only using the free version, you will get to see the preview of these options.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Aside from the ability to choose the position of your floating content, with Advanced Floating Content Premium<\/a>, 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.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Premium <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]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.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]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.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Floating <\/div>\n<\/div>[vc_empty_space height=”60px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]After hitting the Add<\/em> button, you can go ahead and preview the look of your floating footer on your site.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"\" <\/div>\n<\/div>[vc_empty_space height=”78px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Conclusion<\/h2>\n

[\/vc_column_text][vc_column_text]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.<\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]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<\/strong>. Just stick to our simple guide we shared with you above, and you\u2019ll be all set.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

A floating footer bar can increase your chances of scoring more sales and page views. Learn how to add it to your own WordPress site with the help of a plugin.<\/p>\n","protected":false},"author":2,"featured_media":21096,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-21068","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/21068","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=21068"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/21068\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/21096"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=21068"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=21068"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=21068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}