Are you on the lookout for a method 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 might show you how to promote low cost provides or social media handles, which may scale back the bounce charge and get extra conversions.
On this article, we’ll present you simply create a sticky floating footer bar in WordPress, step-by-step.
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 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.
Generate leads and construct your e-mail record.
Carry consideration to particular coupons or low cost provides/gross sales.
Promote your social media accounts.
Construct model recognition.
Present entry to necessary assets in your WordPress web site.
Having stated that, let’s see simply create a sticky floating footer bar in WordPress. We’ll present you two strategies on this tutorial, and you should utilize the hyperlinks under to leap to the tactic of your selection:
Methodology 1: Create a Sticky Floating Footer Bar With OptinMonster (Really useful)
You possibly can simply create a sticky floating footer bar with OptinMonster. It’s the finest lead era and conversion optimization software available on the market that makes it tremendous simple to transform your web site guests into subscribers.
OptinMonster comes with a drag-and-drop builder and premade templates that permit you to create a floating footer bar, slide-in popups, and banners with out utilizing any code.
We advocate this technique as a result of OptinMonster is tremendous simple to make use of and provides extra customization choices than the free plugin technique.
Step 1: Set up OptinMonster on Your Web site
First, you will have to enroll on the OptinMonster web site by clicking on the ‘Get OptinMonster Now’ button.
Subsequent, it’s essential to set up and activate the free OptinMonster connector plugin in your web site. For extra directions, see our newbie’s information on set up a WordPress plugin.
Upon activation, the OptinMonster setup wizard will open up in your display screen, the place you need to click on the ‘Join Your Present Account’ button. This can join your WordPress web site together with your OptinMonster account.
When you do this, a brand new window will open up in your display screen.
Right here, click on the ‘Connect with WordPress’ button to maneuver forward.
Step 2: Create And Customise the Floating Sticky Footer Bar
Now that you’ve related OptinMonster together with your web site, it’s time to create a sticky floating footer bar.
To do that, you could go to the OptinMonster » Templates web page from the WordPress admin sidebar and choose ‘Floating Bar’ because the marketing campaign sort.
When you do this, all of the premade templates for the floating bar will load on the display screen. From right here, you possibly can click on the ‘Use Template’ button on the one you wish to use.
This can open the ‘Create Marketing campaign’ immediate on the display screen, the place you possibly can add a reputation for the floating footer bar that you’re about to create. It may be something you want, because the identify gained’t be exhibited to your guests.
After that, simply click on the ‘Begin Constructing’ button.
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 suitable with blocks within the left column.
For instance, you should utilize 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 too can add a CTA, video, or social media block to the footer bar. For detailed directions, you possibly can see our tutorial on create an alert bar in WordPress.
You too can edit textual content on the footer bar by clicking on it. This can open the block settings within the left column, the place you possibly can modify them in line with your liking.
For instance, if you wish to change the low cost supply within the template, then you possibly can change the button textual content. After that, you possibly can choose the ‘Redirect to a URL’ possibility and add the web page hyperlink that you really want customers to be directed to upon clicking on the button.
Step 3: Configure The Show Guidelines For Your Floating Footer Bar
As soon as you might be happy together with your footer bar’s customization, simply swap to the ‘Show Guidelines’ tab from the highest.
Right here, you possibly can configure when to show the bar in your web page. If you wish to show the floating footer bar always, then it’s essential to choose the ‘time on web page’ possibility from the left dropdown menu.
After that, select the ‘is instant’ possibility from the dropdown menu on the suitable.
Nevertheless, to show the floating footer bar on a particular web page, it’s essential to choose the ‘Web page Concentrating on’ possibility from the suitable dropdown menu.
After that, select the ‘precisely matches’ possibility from the dropdown menu within the center after which add a web page URL. When you do this, the floating footer bar will solely displayed on the web page you selected.
Moreover, you possibly can choose the ‘Exit Intent’ possibility to indicate the sticky floating footer bar when the consumer is about to go away your web site. You possibly can then configure the exit intent sensitivity and select the units the place the footer bar can be displayed. This may be helpful if you wish to scale back your bounce charge.
You possibly can even choose the ‘Customer’s Gadget’ possibility when you solely wish to show the floating footer bar to desktop guests.
You too can configure the show guidelines in line with the date, time, or scroll distance by deciding on the ‘When’ possibility from the left column.
For an evidence of extra show rule choices, you possibly can see our full OptinMonster assessment.
Step 4: Publish Your Floating Footer Bar
After you have outlined the show circumstances on your footer bar, swap to the ‘Publish’ tab from the highest.
Right here, merely click on the ‘Publish’ button.
After that, don’t neglect to click on on ‘Save’ to make your modifications reside.
Now, you possibly can go to your WordPress weblog to see the sticky floating footer bar in motion.
Different: You too can use Thrive Ultimatum to indicate 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 on the lookout for a free method to create a sticky floating footer bar, then this technique is for you. Nevertheless, remember the fact that you should have restricted customization choices in comparison with OptinMonster.
First, you could set up and activate the Firebox Popup Builder plugin. For detailed directions, see our tutorial on 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.
This can open the Firebox marketing campaign library, the place you possibly can seek for sticky floating bar premade templates.
Subsequent, merely click on the ‘Insert’ hyperlink below the floating footer bar that you simply like. Needless to say if you choose a header bar, you then gained’t have the ability to change its place. You should make sure the template you choose is for a footer bar.
The block editor will now open up in your display screen, the place you can begin by including a reputation on your floating bar.
After that, you possibly can 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 possibly can add photographs, headings, paragraphs, movies, quotes, or record blocks.
As an illustration, if you wish to add social media handles, then you possibly can select the Social Icons block. After that, you possibly can add social media accounts and hyperlinks utilizing the block panel.
For extra particulars, you possibly can see our tutorial on add social media icons in WordPress menus.
You too can change the textual content within the button block and add a hyperlink to the web page the place you wish 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’.
Subsequent, you possibly can scroll all the way down to the ‘Firebox Settings’ part.
Right here, you possibly can change the background coloration, textual content coloration, alignment, measurement, padding, and margin for the floating footer bar.
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, when you drag the slider to fifteen seconds, then the floating footer bar can be displayed as soon as the consumer has spent 15 seconds in your web site.
In order for you the sticky floating footer bar to be displayed instantly, then you possibly can maintain the slider at 0.
Subsequent, you possibly can go away different settings as they’re or configure them in line with your liking.
As soon as you might be achieved, don’t neglect to click on the ‘Publish’ button on the prime.
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.
Bonus: Create a Sticky Floating Navigation Menu in WordPress
Other than including a sticky footer bar, you may additionally prefer to create a sticky floating navigation menu in your WordPress web site.
A navigation menu accommodates hyperlinks to a very powerful pages in your WordPress weblog and acts as an organizational construction on your web site.
Should you make this menu sticky, then it can stay seen in your web page always, even because the consumer scrolls down in your display screen. This could improve engagement and make your web site simpler to navigate.
To create a sticky floating navigation menu, merely set up and activate the Sticky Menu & Sticky Header plugin. For particulars, see our tutorial on set up a WordPress plugin.
Upon activation, go to the Settings » Sticky Menu web page from the WordPress dashboard and sort #main-navigation subsequent to the ‘Sticky Component (required)’ possibility.
After that, click on the ‘Save Modifications’ button to retailer your settings. You may have now efficiently created a sticky floating navigation menu.
For detailed directions, please see our tutorial on create a sticky floating navigation menu in WordPress.
We hope this text helped you learn to simply create a floating sticky footer bar in WordPress. You may additionally wish to see our newbie’s information on add header and footer code in WordPress and our guidelines of issues so as to add to the footer in your WordPress web site.
Should you appreciated this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You too can discover us on Twitter and Fb.
The publish Methods to Create a “Sticky” Floating Footer Bar in WordPress first appeared on WPBeginner.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!