Are you in search of a technique to create a sticky floating footer bar in WordPress?
A sticky floating footer bar stays seen in your web site even when customers scroll down in your web page. It could actually allow you to promote low cost presents or social media handles, which may cut back the bounce charge and get extra conversions.
On this article, we are going to present you methods to simply create a sticky floating footer bar in WordPress, step-by-step.
![Create a "Sticky" Floating Footer Bar in WordPress Create a "Sticky" Floating Footer Bar in WordPress](https://www.wpbeginner.com/wp-content/uploads/2016/10/create-a-sticky-floating-footer-bar-og.png)
What Is a Floating Footer Bar in WordPress?
A sticky floating footer bar means that you can prominently show necessary content material and information to customers.
This bar stays seen to guests always, so they’re extra prone to click on on it and uncover extra helpful content material.
![WPForms floating footer bar preview WPForms floating footer bar preview](https://www.wpbeginner.com/wp-content/uploads/2016/10/floating-footer-bar-preview.jpg)
![WPForms floating footer bar preview WPForms floating footer bar preview](https://www.wpbeginner.com/wp-content/uploads/2016/10/floating-footer-bar-preview.jpg)
You need to use the floating footer bar to:
- Drive extra clicks to different weblog posts.
- Generate leads and construct your e mail record.
- Convey consideration to particular coupons or low cost presents/gross sales.
- Promote your social media accounts.
- Construct model recognition.
- Present entry to necessary assets in your WordPress web site.
Having mentioned that, let’s see methods to simply create a sticky floating footer bar in WordPress. We are going to present you two strategies on this tutorial, and you should use the hyperlinks beneath to leap to the strategy of your selection:
You may simply create a sticky floating footer bar with OptinMonster. It’s the greatest lead technology and conversion optimization software in the marketplace that makes it tremendous straightforward to transform your web site guests into subscribers.
OptinMonster comes with a drag-and-drop builder and premade templates that let you create a floating footer bar, slide-in popups, and banners with out utilizing any code.
We advocate this methodology as a result of OptinMonster is tremendous straightforward to make use of and presents extra customization choices than the free plugin methodology.
Step 1: Set up OptinMonster on Your Web site
First, you’ll need to enroll on the OptinMonster web site by clicking on the ‘Get OptinMonster Now’ button.
![The OptinMonster lead generation tool The OptinMonster lead generation tool](https://www.wpbeginner.com/wp-content/uploads/2021/05/optinmonster-optimization-conversion.png)
![The OptinMonster lead generation tool The OptinMonster lead generation tool](https://www.wpbeginner.com/wp-content/uploads/2021/05/optinmonster-optimization-conversion.png)
Subsequent, you should set up and activate the free OptinMonster connector plugin in your web site. For extra directions, see our newbie’s information on methods to set up a WordPress plugin.
Upon activation, the OptinMonster setup wizard will open up in your display screen, the place you must click on the ‘Join Your Current Account’ button. This can join your WordPress web site together with your OptinMonster account.
![Connect your existing account Connect your existing account](https://www.wpbeginner.com/wp-content/uploads/2011/09/connect-your-existing-account.png)
![Connect your existing account Connect your existing account](https://www.wpbeginner.com/wp-content/uploads/2011/09/connect-your-existing-account.png)
When you try this, a brand new window will open up in your display screen.
Right here, click on the ‘Hook up with WordPress’ button to maneuver forward.
![Connect OptinMonster to WordPress Connect OptinMonster to WordPress](https://www.wpbeginner.com/wp-content/uploads/2019/12/connect-optinmonster-to-wordpress.png)
![Connect OptinMonster to WordPress Connect OptinMonster to WordPress](https://www.wpbeginner.com/wp-content/uploads/2019/12/connect-optinmonster-to-wordpress.png)
Step 2: Create And Customise the Floating Sticky Footer Bar
Now that you’ve linked OptinMonster together with your web site, it’s time to create a sticky floating footer bar.
To do that, it’s good to go to the OptinMonster » Templates web page from the WordPress admin sidebar and choose ‘Floating Bar’ because the marketing campaign sort.
When you try this, all of the premade templates for the floating bar will load on the display screen. From right here, you’ll be able to click on the ‘Use Template’ button on the one you need to use.
![Choose a premade template for a floating sticky footer bar Choose a premade template for a floating sticky footer bar](https://www.wpbeginner.com/wp-content/uploads/2016/10/choose-premade-template-for-floating-footer-bar.png)
![Choose a premade template for a floating sticky footer bar Choose a premade template for a floating sticky footer bar](https://www.wpbeginner.com/wp-content/uploads/2016/10/choose-premade-template-for-floating-footer-bar.png)
This can open the ‘Create Marketing campaign’ immediate on the display screen, the place you’ll be able to add a reputation for the floating footer bar that you’re about to create. It may be something you want, because the identify received’t be exhibited to your guests.
After that, simply click on the ‘Begin Constructing’ button.
![Add a name for your floating sticky footer bar Add a name for your floating sticky footer bar](https://www.wpbeginner.com/wp-content/uploads/2016/10/add-a-name-for-floating-sticky-footer-bar.png)
![Add a name for your floating sticky footer bar Add a name for your floating sticky footer bar](https://www.wpbeginner.com/wp-content/uploads/2016/10/add-a-name-for-floating-sticky-footer-bar.png)
OptinMonster’s drag-and-drop builder will now be launched in your display screen, the place you can begin customizing your floating footer bar. Right here, you’ll discover a floating bar preview on the fitting with blocks within the left column.
For instance, you should use a countdown timer block in case your floating footer bar is selling a reduction supply. This can assist create a way of urgency amongst customers and encourage them to take motion.
You may also add a CTA, video, or social media block to the footer bar. For detailed directions, you’ll be able to see our tutorial on methods to create an alert bar in WordPress.
![Add blocks to customize your floating footer bar Add blocks to customize your floating footer bar](https://www.wpbeginner.com/wp-content/uploads/2016/10/add-blocks-to-footer-bar.png)
![Add blocks to customize your floating footer bar Add blocks to customize your floating footer bar](https://www.wpbeginner.com/wp-content/uploads/2016/10/add-blocks-to-footer-bar.png)
You may also edit textual content on the footer bar by clicking on it. This can open the block settings within the left column, the place you’ll be able to alter them based on your liking.
For instance, if you wish to change the low cost supply within the template, then you’ll be able to change the button textual content. After that, you’ll be able to choose the ‘Redirect to a URL’ choice and add the web page hyperlink that you really want customers to be directed to upon clicking on the button.
![Change button text in the footer bar Change button text in the footer bar](https://www.wpbeginner.com/wp-content/uploads/2016/10/change-button-text-in-footer-bar.png)
![Change button text in the footer bar Change button text in the footer bar](https://www.wpbeginner.com/wp-content/uploads/2016/10/change-button-text-in-footer-bar.png)
Step 3: Configure The Show Guidelines For Your Floating Footer Bar
As soon as you’re glad together with your footer bar’s customization, simply swap to the ‘Show Guidelines’ tab from the highest.
Right here, you’ll be able to configure when to show the bar in your web page. If you wish to show the floating footer bar always, then you should choose the ‘time on web page’ choice from the left dropdown menu.
After that, select the ‘is rapid’ choice from the dropdown menu on the fitting.
![Configure display rules to display the floating footer bar at all times Configure display rules to display the floating footer bar at all times](https://www.wpbeginner.com/wp-content/uploads/2016/10/configure-display-rule-to-display-footer-bar-at-all-time.png)
![Configure display rules to display the floating footer bar at all times Configure display rules to display the floating footer bar at all times](https://www.wpbeginner.com/wp-content/uploads/2016/10/configure-display-rule-to-display-footer-bar-at-all-time.png)
Nonetheless, to show the floating footer bar on a particular web page, you should choose the ‘Web page Focusing on’ choice from the fitting dropdown menu.
After that, select the ‘precisely matches’ choice from the dropdown menu within the center after which add a web page URL. When you try this, the floating footer bar will solely displayed on the web page you selected.
![Configure page targeting for floating footer bar Configure page targeting for floating footer bar](https://www.wpbeginner.com/wp-content/uploads/2016/10/configure-page-targeting-for-floating-footer-bar.png)
![Configure page targeting for floating footer bar Configure page targeting for floating footer bar](https://www.wpbeginner.com/wp-content/uploads/2016/10/configure-page-targeting-for-floating-footer-bar.png)
Moreover, you’ll be able to choose the ‘Exit Intent’ choice to point out the sticky floating footer bar when the person is about to go away your web site. You may then configure the exit intent sensitivity and select the units the place the footer bar will likely be displayed. This may be useful if you wish to cut back your bounce charge.
You may even choose the ‘Customer’s System’ choice in the event you solely need to show the floating footer bar to desktop guests.
![Configure exit intent technology for footer bar Configure exit intent technology for footer bar](https://www.wpbeginner.com/wp-content/uploads/2016/10/configure-exit-intent-technology-for-footer-bar.png)
![Configure exit intent technology for footer bar Configure exit intent technology for footer bar](https://www.wpbeginner.com/wp-content/uploads/2016/10/configure-exit-intent-technology-for-footer-bar.png)
You may also configure the show guidelines based on the date, time, or scroll distance by deciding on the ‘When’ choice from the left column.
For an evidence of extra show rule choices, you’ll be able to see our full OptinMonster assessment.
Step 4: Publish Your Floating Footer Bar
After you have outlined the show circumstances to your footer bar, swap to the ‘Publish’ tab from the highest.
Right here, merely click on the ‘Publish’ button.
![Publish floating footer bar Publish floating footer bar](https://www.wpbeginner.com/wp-content/uploads/2016/10/publish-floating-footer-bar.png)
![Publish floating footer bar Publish floating footer bar](https://www.wpbeginner.com/wp-content/uploads/2016/10/publish-floating-footer-bar.png)
After that, don’t neglect to click on on ‘Save’ to make your adjustments stay.
Now, you’ll be able to go to your WordPress weblog to see the sticky floating footer bar in motion.
![Sticky floating footer bar preview Sticky floating footer bar preview](https://www.wpbeginner.com/wp-content/uploads/2016/10/floating-sticky-footer-bar-preview.jpg)
![Sticky floating footer bar preview Sticky floating footer bar preview](https://www.wpbeginner.com/wp-content/uploads/2016/10/floating-sticky-footer-bar-preview.jpg)
Different: You may also use Thrive Ultimatum to point out a countdown timer floating footer bar in your web site. For extra particulars, see our Thrive Themes Suite assessment.
Methodology 2: Create a Sticky Floating Footer Bar With a Free Plugin
In case you are in search of a free technique to create a sticky floating footer bar, then this methodology is for you. Nonetheless, remember the fact that you’ll have restricted customization choices in comparison with OptinMonster.
First, it’s good to set up and activate the Firebox Popup Builder plugin. For detailed directions, see our tutorial on methods to set up a WordPress plugin.
Upon activation, go to the Firebox » Campaigns web page from the WordPress dashboard and click on the ‘+ New Marketing campaign’ button.
![Click + New Campaign button Click + New Campaign button](https://www.wpbeginner.com/wp-content/uploads/2016/10/click-new-campaign-button.png)
![Click + New Campaign button Click + New Campaign button](https://www.wpbeginner.com/wp-content/uploads/2016/10/click-new-campaign-button.png)
This can open the Firebox marketing campaign library, the place you’ll be able to seek for sticky floating bar premade templates.
Subsequent, merely click on the ‘Insert’ hyperlink underneath the floating footer bar that you simply like. Remember that if you choose a header bar, then you definitely received’t be capable to change its place. You need to make sure the template you choose is for a footer bar.
![Click the Insert link under a template Click the Insert link under a template](https://www.wpbeginner.com/wp-content/uploads/2016/10/click-insert-under-a-template.png)
![Click the Insert link under a template Click the Insert link under a template](https://www.wpbeginner.com/wp-content/uploads/2016/10/click-insert-under-a-template.png)
The block editor will now open up in your display screen, the place you can begin by including a reputation to your floating bar.
After that, you’ll be able to edit the textual content within the footer by clicking on it and add new blocks by clicking the ‘+’ button. This can open the block menu, the place you’ll be able to add pictures, headings, paragraphs, movies, quotes, or record blocks.
As an illustration, if you wish to add social media handles, then you’ll be able to select the Social Icons block. After that, you’ll be able to add social media accounts and hyperlinks utilizing the block panel.
For extra particulars, you’ll be able to see our tutorial on methods to add social media icons in WordPress menus.
![Add blocks in the floating footer bar from the block menu Add blocks in the floating footer bar from the block menu](https://www.wpbeginner.com/wp-content/uploads/2016/10/add-blocks-from-block-menu.png)
![Add blocks in the floating footer bar from the block menu Add blocks in the floating footer bar from the block menu](https://www.wpbeginner.com/wp-content/uploads/2016/10/add-blocks-from-block-menu.png)
You may also change the textual content within the button block and add a hyperlink to the web page the place you need to direct customers by clicking on the hyperlink icon within the block toolbar.
After that, sort within the URL of your selection and press ‘Enter’.
![Add a link for the button Add a link for the button](https://www.wpbeginner.com/wp-content/uploads/2016/10/add-anchor-link-for-buton.png)
![Add a link for the button Add a link for the button](https://www.wpbeginner.com/wp-content/uploads/2016/10/add-anchor-link-for-buton.png)
Subsequent, you’ll be able to scroll right down to the ‘Firebox Settings’ part.
Right here, you’ll be able to change the background shade, textual content shade, alignment, measurement, padding, and margin for the floating footer bar.
![Configure floating footer bar design Configure floating footer bar design](https://www.wpbeginner.com/wp-content/uploads/2016/10/configure-footer-bar-design.png)
![Configure floating footer bar design Configure floating footer bar design](https://www.wpbeginner.com/wp-content/uploads/2016/10/configure-footer-bar-design.png)
After that, swap to the ‘Behaviour’ tab from the left column and choose ‘Web page Load’ because the floating bar set off level.
Then, use the ‘Delay’ slider to decide on a delay timing for the floating bar. For instance, in the event you drag the slider to fifteen seconds, then the floating footer bar will likely be displayed as soon as the person has spent 15 seconds in your web site.
If you need the sticky floating footer bar to be displayed instantly, then you’ll be able to maintain the slider at 0.
![Choose a trigger point for footer bar Choose a trigger point for footer bar](https://www.wpbeginner.com/wp-content/uploads/2016/10/choose-trigger-point-for-footer-bar.png)
![Choose a trigger point for footer bar Choose a trigger point for footer bar](https://www.wpbeginner.com/wp-content/uploads/2016/10/choose-trigger-point-for-footer-bar.png)
Subsequent, you’ll be able to go away different settings as they’re or configure them based on your liking.
As soon as you’re executed, don’t neglect to click on the ‘Publish’ button on the prime.
![Publish floating footer bar Publish floating footer bar](https://www.wpbeginner.com/wp-content/uploads/2016/10/publish-floating-bar.png)
![Publish floating footer bar Publish floating footer bar](https://www.wpbeginner.com/wp-content/uploads/2016/10/publish-floating-bar.png)
Now go to your WordPress web site to view the sticky floating footer bar in motion.
That is what it appeared like on our demo web site.
![Sticky floating footer bar preview Sticky floating footer bar preview](https://www.wpbeginner.com/wp-content/uploads/2016/10/sticky-footer-bar-preview.jpg)
![Sticky floating footer bar preview Sticky floating footer bar preview](https://www.wpbeginner.com/wp-content/uploads/2016/10/sticky-footer-bar-preview.jpg)
Bonus: Create a Sticky Floating Navigation Menu in WordPress
Other than including a sticky footer bar, you may also wish to create a sticky floating navigation menu in your WordPress web site.
A navigation menu comprises hyperlinks to a very powerful pages in your WordPress weblog and acts as an organizational construction to your web site.
In case you make this menu sticky, then it should stay seen in your web page always, even because the person scrolls down in your display screen. This could enhance engagement and make your web site simpler to navigate.
![Sticky floating navigation menu preview Sticky floating navigation menu preview](https://www.wpbeginner.com/wp-content/uploads/2016/10/sticky-floating-nav-menu-preview-1.gif)
![Sticky floating navigation menu preview Sticky floating navigation menu preview](https://www.wpbeginner.com/wp-content/uploads/2016/10/sticky-floating-nav-menu-preview-1.gif)
To create a sticky floating navigation menu, merely set up and activate the Sticky Menu & Sticky Header plugin. For particulars, see our tutorial on methods to set up a WordPress plugin.
Upon activation, go to the Settings » Sticky Menu web page from the WordPress dashboard and kind #main-navigation subsequent to the ‘Sticky Factor (required)’ choice.
![Type navigation menu as the sticky element Type navigation menu as the sticky element](https://www.wpbeginner.com/wp-content/uploads/2016/10/type-sticky-element.jpg)
![Type navigation menu as the sticky element Type navigation menu as the sticky element](https://www.wpbeginner.com/wp-content/uploads/2016/10/type-sticky-element.jpg)
After that, click on the ‘Save Modifications’ button to retailer your settings. You could have now efficiently created a sticky floating navigation menu.
For detailed directions, please see our tutorial on methods to create a sticky floating navigation menu in WordPress.
We hope this text helped you discover ways to simply create a floating sticky footer bar in WordPress. You may additionally need to see our newbie’s information on methods to add header and footer code in WordPress and our guidelines of issues so as to add to the footer in your WordPress web site.
In case you preferred this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may also discover us on Twitter and Facebook.
Leave a comment