{"id":2571,"date":"2017-08-01T21:09:58","date_gmt":"2017-08-02T04:09:58","guid":{"rendered":"https:\/\/www.fastwebhost.com\/blog\/?p=2571"},"modified":"2017-12-03T15:37:23","modified_gmt":"2017-12-03T23:37:23","slug":"how-to-add-a-sticky-floating-bar-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.fastwebhost.com\/blog\/how-to-add-a-sticky-floating-bar-in-wordpress\/","title":{"rendered":"How to add a Sticky Floating Bar in WordPress"},"content":{"rendered":"<p>Adding a floating bar to your WordPress website allows you to show to visitors current promotions you have going on or show information you want them to see. Floating bars or \u201c<em><strong>sticky<\/strong><\/em>\u201d bars are notification bars that are placed on the bottom of\u00a0the visitor\u2019s browser and stays there as they are scrolling. Sticky bars are now very common to use amongst bloggers and WordPress users.<br \/>\n<!--more-->If you wish to catch a visitor\u2019s attention to promote an article, make an announcement about a product, etc. then adding a sticky bar will do just that. You can also use it for social media promotions to get more subscriptions.<\/p>\n<p>There are different\u00a0options, styles and features you can choose to add to your sticky bars. WordPress has various plugins available to add the floating bar to your site. In this article, I will show you how you can add a sticky floating bar to your WordPress site.<\/p>\n<h3>Installing the floating bar to your blog<\/h3>\n<p>To start adding a floating bar to your site, go to <span style=\"color: #ff6600;\"><em><strong>Plugins &gt; addnew<\/strong><\/em><\/span><\/p>\n<p>I will be using the <em><strong>GC Message Bar plugin<\/strong><\/em>. Go to the search form and type in GC Message Bar. Once you get the search results, you can begin installing the plugin.<br \/>\nAs soon as you press to activate, you can check out your blog and see that the floating bar is already up. The default settings for the plugin places the floating bar at the top of your site, but you can configure the settings to your liking.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2574\" src=\"https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/Screenshot-191-1.png\" alt=\"\" width=\"740\" height=\"498\" srcset=\"https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/Screenshot-191-1-200x135.png 200w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/Screenshot-191-1-300x202.png 300w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/Screenshot-191-1-400x269.png 400w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/Screenshot-191-1-600x404.png 600w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/Screenshot-191-1.png 740w\" sizes=\"(max-width: 740px) 100vw, 740px\" \/><\/p>\n<p>To start configuring your floating bar go to your dashboard, <span style=\"color: #ff6600;\"><strong><em>Plugins &gt; GCMessageBar<\/em><\/strong><\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2573\" src=\"https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/Screenshot-192-4.png\" alt=\"\" width=\"588\" height=\"613\" srcset=\"https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/Screenshot-192-4-200x209.png 200w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/Screenshot-192-4-288x300.png 288w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/Screenshot-192-4-400x417.png 400w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/Screenshot-192-4.png 588w\" sizes=\"(max-width: 588px) 100vw, 588px\" \/><\/p>\n<p>From here, you can select your background color, text color, floating bar location, etc.\u00a0To pick the location of your bar, go to the General Settings tab.<br \/>\n<strong>General Settings<\/strong>\u00a0tab you can also enable animations, alignment of your content, enabling a close button, CSS caching, and more.<br \/>\n<strong>Filters<\/strong>\u00a0tab allows you to choose whether you want the floating bar to show up on just the desktop, or both mobile and desktop. You can also choose whether you want your floating bar to show up only on your home page or on other pages as well.<br \/>\n<strong>Compose Message<\/strong>\u00a0tab is where you write what you want your floating bar to display and type in the URL location of where you want your visitors to be directed.<br \/>\n<strong>Style Settings<\/strong>\u00a0tab choose the footer color, text, color, font size, font style, etc.<br \/>\nAfter getting familiar with the settings, you can start configuring your floating bar to get it ready to show up on your WordPress site. Don\u2019t forget to press save anytime you make any changes.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2572\" src=\"https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/Screenshot-194-2.png\" alt=\"\" width=\"727\" height=\"509\" srcset=\"https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/Screenshot-194-2-200x140.png 200w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/Screenshot-194-2-300x210.png 300w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/Screenshot-194-2-400x280.png 400w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/Screenshot-194-2-600x420.png 600w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/Screenshot-194-2.png 727w\" sizes=\"(max-width: 727px) 100vw, 727px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adding a floating bar to your WordPress website allows you to show to visitors current promotions you have going on or show information you want them to see. Floating bars or \u201csticky\u201d bars are notification bars that are placed on the bottom of\u00a0the visitor\u2019s browser and stays there as they are scrolling. Sticky bars are now very common to use amongst bloggers and WordPress users.<\/p>\n","protected":false},"author":2,"featured_media":2575,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_links_to":"","_links_to_target":""},"categories":[70],"tags":[139],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/posts\/2571"}],"collection":[{"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/comments?post=2571"}],"version-history":[{"count":3,"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/posts\/2571\/revisions"}],"predecessor-version":[{"id":2578,"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/posts\/2571\/revisions\/2578"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/media\/2575"}],"wp:attachment":[{"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/media?parent=2571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/categories?post=2571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/tags?post=2571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}