Do you need to create a sticky floating footer bar in WordPress? We’ve got been utilizing the floating footer bar on our web site for a few years as a result of it helps us cut back bounce fee and enhance pages seen by customers. Lots of you’ve gotten requested us tips on how to create an analogous floating bar, so right here it’s. On this article, we are going to present you tips on how to create a sticky floating footer bar in WordPress.
What’s Floating Footer Bar?
A sticky floating footer bar permits you to prominently show your necessary content material to customers. This bar stays seen to customers in any respect time, so they’re extra more likely to click on on it and uncover extra helpful content material.
You need to use the floating footer bar to:
- Drive extra clicks to different weblog posts
- Construct your e mail listing
- Carry consideration to particular provides / sale
On this article, we are going to present you two strategies so as to add a sticky floating footer bar in your WordPress website. One makes use of a plugin whereas the opposite is a code technique that we’re utilizing on WPSaviour. You may select the one you discover simpler to make use of.
Technique 1: Manually Create Sticky Floating Footer Bar in WordPress
This technique requires you so as to add code in your WordPress information. If you’re new to including code, then please check out our information on how to paste snippets from web into WordPress.
First, you might want to hook up with your WordPress website utilizing an FTP consumer or file supervisor in cPanel.
In your FTP consumer, you might want to find the footer.php file in your WordPress theme folder and obtain it to your desktop. It might be situated at a path like this:
/wp-content/themes/your-theme-folder/
Subsequent, you might want to open the footer.php file in a plain textual content editor like Notepad and add the next code simply earlier than the tag.
|
1 2 3 4 5 6 7 8 9 10 |
|
You may add as many listing gadgets as you need. We are going to present you tips on how to randomly rotate them on every web page load.
The subsequent step is including the CSS types.
You may add CSS to your WordPress theme’s type.css file or use the Simple Custom CSS plugin.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
|
After including the CSS, you could not be capable of see the modifications in your web site. It is because we’ve got set the show for gadgets in our listing to none.
Subsequent, we are going to use jQuery to randomly show one merchandise from our listing on every web page load.
You could open a plain textual content editor like Notepad in your pc and add this code to a clean file:
|
1 2 3 4 5 6 7 8 9 10 11 |
|
As soon as you might be achieved, you might want to save this file as floatingbar.js in your desktop.
Now open your FTP consumer and hook up with your net server. Go to your theme folder and find js folder. It might be at a path like this:
/wp-content/themes/your-theme-folder/js
If there isn’t a js folder in your theme listing, then you might want to create one.
Now you might want to add floatingbar.js file you created earlier to the js folder you simply created.
The subsequent step is to enqueue (load) the JavaScript file in your WordPress theme.
Paste this code in your theme’s capabilities.php file or a site-specific plugin.
|
1 2 3 4 |
|
That’s all, now you can go to your web site to see the floating footer bar in motion. Reload the web page a few occasions to see footer bar randomly exhibiting completely different gadgets out of your listing.
The good thing about utilizing this technique is that you simply get to randomly rotate a number of hyperlinks within the floating footer bar like we’re doing.
Nevertheless the problem is that you might want to add code. Moreover, you possibly can’t use this floating bar for different issues with out doing an excessive amount of CSS customizations.
Technique 2: Utilizing OptinMontser to Add Floating Footer Bar in WordPress
OptinMonster is a well-liked lead era plugin that works on all web sites. It helps you change web site guests into subscribers and prospects.
One of many options OptinMonster has is a floating header and footer bar that you need to use to show an e mail optin kind in addition to to advertise single hyperlinks / provides.
The good thing about utilizing this technique is:
- Straightforward to Setup (no code)
- You may present customized floating bars on completely different pages / classes of your web site.
- You need to use it to construct your e mail listing in addition to promote provides.
The one draw back is that OptinMonster is a paid service. However you need to use our OptinMonster Coupon: WPB10 to get 10% low cost on any OptinMonster plan.
After you’ve gotten bought OptinMonster (Plus or Professional plan), you need to use the OptinMonster WordPress API plugin in your website. For extra particulars, see our step-by-step information on how to install a WordPress plugin.
This plugins simply acts as a connector between your WordPress website and OptinMonster.
Upon activation, the plugin will add a brand new menu merchandise labeled OptinMonster to your WordPress admin bar. Clicking on it can take you to plugin’s settings web page.
You may be requested to offer your OptinMonster API username and key. You will get these keys out of your OptinMonster account.
Copy and paste the keys into the plugin settings and click on on ‘Connect with OptinMonster’ button. The plugin will now join your WordPress website to your OptinMonster account.
Subsequent, you might want to click on on the ‘Create New Optin’ button.
This may take you to ‘Create New Optin’ web page on OptinMonster web site.
First you might want to present a title to your Optin Marketing campaign and choose a web site the place you’ll be utilizing this optin. In case your website isn’t listed then click on on ‘Add a brand new web site’ hyperlink.
Subsequent, you possibly can click on on the Floating bar below the ‘Choose your optin sort’ to make use of templates accessible to make use of as a floating bar.
You may customise all these templates to your individual liking. Choose the one that appears closest to what you take into account.
As quickly as you choose a template, OptinMonster will launch their design customizer. It’s a point-and-click builder the place you possibly can configure look and settings to your optin.
If you end up achieved configuring the looks of your optin, you should definitely click on on the save button.
Whereas these are referred to as optins, they don’t all the time should be. You need to use the Sure / No function so as to add the button to view a weblog submit or declare a particular low cost.
If you first create your floating bar, it’s Paused by default.
When you’ve completed configuring it, hover over to the standing bar within the prime menu and select Begin Marketing campaign.
Your floating bar is now able to be added to your WordPress website.
Return to the admin space of your WordPress website and go to OptinMonster » Optins. You will notice your optin listed right here. In case you don’t see it, then click on on Refresh Optins button and the plugin will show it.
Click on on the ‘Edit output settings’ hyperlink to proceed.
On the subsequent web page, examine the field subsequent to ‘Allow optin on website’ possibility after which click on on the save settings.
You can too use the Superior choice to solely present the floating bar on particular posts, pages, classes, and different areas.
That’s all, floating footer bar optin is now reside in your WordPress website.
We hope this text helped you add a floating footer bar to your WordPress website. You may additionally need to see these actionable tips to drive traffic to your WordPress site.
