How to Create a “Sticky” Floating Footer Bar in WordPress

Are you on the lookout for a option 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 aid you promote low cost provides or social media handles, which might cut back the bounce price and get extra conversions.

On this article, we’ll present you simply create a sticky floating footer bar in WordPress, step-by-step.

A sticky floating footer bar means that you can prominently show vital 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.

You should use the floating footer bar to:

• Drive extra clicks to different weblog posts.
• Generate leads and build your email list.
• Convey consideration to particular coupons or low cost provides/gross sales.
• Promote your social media accounts.
• Construct model recognition.
• Present entry to vital assets in your WordPress website.

Having mentioned that, let’s see 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 tactic of your selection:

You possibly can simply create a sticky floating footer bar with OptinMonster. It’s the best lead generation and conversion optimization instrument 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 assist you to 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 provides extra customization choices than the free plugin technique.

Step 1: Set up OptinMonster on Your Web site

First, you will want 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 to install a WordPress plugin.

Upon activation, the OptinMonster setup wizard will open up in your display screen, the place it’s important to click on the ‘Join Your Present Account’ button. This can join your WordPress website 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 ‘Hook up with WordPress’ button to maneuver forward.

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 do 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.

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 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 appropriate 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 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 how to create an alert bar in WordPress.

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 modify them in response to your liking.

For instance, if you wish to change the low cost provide 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’ 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 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 will need 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 appropriate.

Nonetheless, to show the floating footer bar on a particular web page, you will need to choose the ‘Web page Concentrating on’ possibility from the appropriate 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’ll be able to choose the ‘Exit Intent’ possibility to point out the sticky floating footer bar when the person is about to go away your website. You possibly can 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 reduce your bounce rate.

You possibly can even choose the ‘Customer’s Machine’ possibility when you solely need to show the floating footer bar to desktop guests.

You may also configure the show guidelines in response to the date, time, or scroll distance by choosing the ‘When’ possibility from the left column.

For a proof of extra show rule choices, you’ll be able to see our complete OptinMonster review.

Step 4: Publish Your Floating Footer Bar

After you have outlined the show situations on your footer bar, swap 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’ll be able to go to your WordPress blog to see the sticky floating footer bar in motion.

Various: 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 review.

If you’re on the lookout for a free option to create a sticky floating footer bar, then this technique is for you. Nonetheless, remember that you should 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 how to install 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’ll be able to seek for sticky floating bar premade templates.

Subsequent, merely click on the ‘Insert’ hyperlink beneath the floating footer bar that you just like. Understand that 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’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 photos, headings, paragraphs, movies, quotes, or checklist blocks.

For example, 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 how to add social media icons in WordPress menus.

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’.

Subsequent, you’ll be able to scroll right down to the ‘Firebox Settings’ part.

Right here, you’ll be able to change the background colour, textual content colour, 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 will likely be displayed as soon as the person has spent 15 seconds in your website.

If you would like the sticky floating footer bar to be displayed instantly, then you’ll be able to hold the slider at 0.

Subsequent, you’ll be able to depart different settings as they’re or configure them in response to your liking.

As soon as you might be carried out, don’t overlook to click on the ‘Publish’ button on the prime.

Now go to your WordPress website to view the sticky floating footer bar in motion.

That is what it seemed like on our demo website.

Other than including a sticky footer bar, you may additionally prefer to create a sticky floating navigation menu in your WordPress website.

A navigation menu incorporates hyperlinks to a very powerful pages in your WordPress weblog and acts as an organizational construction on 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 person scrolls down in your display screen. 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 to install 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 Modifications’ button to retailer your settings. You have got now efficiently created a sticky floating navigation menu.

For detailed directions, please see our tutorial on how 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 might also need to see our newbie’s information on how to add header and footer code in WordPress and our guidelines of things to add to the footer on your WordPress site.

In case you favored this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may also discover us on Twitter and Facebook.