Are you in search of a strategy 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 may well show you how to promote low cost affords or social media handles, which might scale back the bounce price and get extra conversions.
On this article, we are going to present you how one can 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 permits you to 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 should 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 affords/gross sales.
Promote your social media accounts.
Construct model recognition.
Present entry to necessary sources in your WordPress web site.
Having stated that, let’s see how one can simply create a sticky floating footer bar in WordPress. We are going to present you two strategies on this tutorial, and you need to use the hyperlinks under to leap to the strategy of your selection:
You’ll be able to simply create a sticky floating footer bar with OptinMonster. It’s the finest lead era and conversion optimization device available on the market 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 mean you can create a floating footer bar, slide-in popups, and banners with out utilizing any code.
We suggest this technique as a result of OptinMonster is tremendous straightforward to make use of and affords 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, you will need to set up and activate the free OptinMonster connector plugin in your web site. For extra directions, see our newbie’s information on how one can set up a WordPress plugin.
Upon activation, the OptinMonster setup wizard will open up in your display, the place you need to click on the ‘Join Your Current Account’ button. This may join your WordPress web site along with your OptinMonster account.
When you do this, a brand new window will open up in your display.
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 got linked OptinMonster along with your web site, it’s time to create a sticky floating footer bar.
To do that, you should go to the OptinMonster » Templates web page from the WordPress admin sidebar and choose ‘Floating Bar’ because the marketing campaign kind.
When you do this, all of the premade templates for the floating bar will load on the display. From right here, you possibly can click on the ‘Use Template’ button on the one you need to use.
This may open the ‘Create Marketing campaign’ immediate on the display, 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, the place you can begin customizing your floating footer bar. Right here, you’ll discover a floating bar preview on the proper with blocks within the left column.
For instance, you need to use a countdown timer block in case your floating footer bar is selling a reduction provide. This may assist create a way of urgency amongst customers and encourage them to take motion.
You can even add a CTA, video, or social media block to the footer bar. For detailed directions, you possibly can see our tutorial on how one can create an alert bar in WordPress.
You can even edit textual content on the footer bar by clicking on it. This may open the block settings within the left column, the place you possibly can regulate them in accordance with your liking.
For instance, if you wish to change the low cost provide 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’re happy along with your footer bar’s customization, simply change 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 you will need to choose the ‘time on web page’ possibility from the left dropdown menu.
After that, select the ‘is rapid’ possibility from the dropdown menu on the proper.
Nonetheless, to show the floating footer bar on a particular web page, you will need to choose the ‘Web page Focusing on’ possibility from the proper 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 point out the sticky floating footer bar when the consumer is about to go away your web site. You’ll be able to then configure the exit intent sensitivity and select the gadgets the place the footer bar might be displayed. This may be useful if you wish to scale back your bounce price.
You’ll be able to even choose the ‘Customer’s Machine’ possibility in the event you solely need to show the floating footer bar to desktop guests.
You can even configure the show guidelines in accordance with the date, time, or scroll distance by choosing the ‘When’ possibility from the left column.
For an evidence of extra show rule choices, you possibly can see our full OptinMonster evaluate.
Step 4: Publish Your Floating Footer Bar
After getting outlined the show situations in your footer bar, change to the ‘Publish’ tab from the highest.
Right here, merely click on the ‘Publish’ button.
After that, don’t overlook to click on on ‘Save’ to make your modifications stay.
Now, you possibly can go to your WordPress weblog to see the sticky floating footer bar in motion.
Various: You can even use Thrive Ultimatum to point out a countdown timer floating footer bar in your web site. For extra particulars, see our Thrive Themes Suite evaluate.
Technique 2: Create a Sticky Floating Footer Bar With a Free Plugin
If you’re in search of a free strategy to create a sticky floating footer bar, then this technique is for you. Nonetheless, take into account that you’ll have restricted customization choices in comparison with OptinMonster.
First, you should set up and activate the Firebox Popup Builder plugin. For detailed directions, see our tutorial on how one can 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 may 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 underneath the floating footer bar that you just like. Needless to say if you choose a header bar, then you definitely gained’t have the ability to change its place. You have to make sure the template you choose is for a footer bar.
The block editor will now open up in your display, the place you can begin by including a reputation in 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 may 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 how one can add social media icons in WordPress menus.
You can even 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, kind within the URL of your selection and press ‘Enter’.
Subsequent, you possibly can scroll right down to the ‘Firebox Settings’ part.
Right here, you possibly can change the background colour, textual content colour, alignment, dimension, padding, and margin for the floating footer bar.
After that, change 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 might be displayed as soon as the consumer has spent 15 seconds in your web site.
If you need the sticky floating footer bar to be displayed instantly, then you possibly can hold the slider at 0.
Subsequent, you possibly can go away different settings as they’re or configure them in accordance with your liking.
As soon as you’re achieved, don’t overlook to click on the ‘Publish’ button on the high.
Now go to your WordPress web site to view the sticky floating footer bar in motion.
That is what it regarded like on our demo web site.
Bonus: Create a Sticky Floating Navigation Menu in WordPress
Aside from including a sticky footer bar, you may also wish to create a sticky floating navigation menu in your WordPress web site.
A navigation menu accommodates hyperlinks to crucial pages in your WordPress weblog and acts as an organizational construction in your web site.
In case you make this menu sticky, then it’s going to stay seen in your web page always, even because the consumer scrolls down in your display. This will enhance 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 how one can 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)’ possibility.
After that, click on the ‘Save Adjustments’ button to retailer your settings. You’ve gotten now efficiently created a sticky floating navigation menu.
For detailed directions, please see our tutorial on how one can 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 might also need to see our newbie’s information on how one can 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 appreciated this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You can even discover us on Twitter and Fb.