How to Create a "Sticky" Floating Footer Bar in WordPress

Are you looking for a way to create a sticky floating footer bar in WordPress?

The sticky floating footer bar will always be displayed at the bottom of the website even if the user scrolls through the page. In this way, you can utilize it to promote offers or social media accounts, entice users to stay longer, and increase conversions. Next, we'll show you step by step how to easily create one of these sticky floating footer bars on WordPress.

How to Create a "Sticky" Floating Footer Bar in WordPress

What is the floating footer bar in WordPress?

Sticky floating footer bar allows you to display important content and news prominently to your users.

How to Create a "Sticky" Floating Footer Bar in WordPress

You can use a floating footer bar to:

  • Bring more clicks to other blog posts.
  • Generate leads and build your email list.
  • Watch for special coupons or discount offers/sales.
  • Promote your social media accounts.
  • Build brand recognition.
  • Provides access to important resources on your WordPress site.

Let's see how you can easily create sticky floating footer bar in WordPress. There are two main ways to do this:

Method 1: Use OptinMonster to create a sticky floating footer bar (recommended)

Sticky floating footer bar can be easily created using OptinMonster. It is the best lead generation and conversion optimization tool in the market that can convert your website visitors into subscribers very easily.

OptinMonster comes with a drag-and-drop builder and pre-made templates that allow you to create floating footer bars, slide-in pop-ups, and banners without using any code.

This method is recommended because OptinMonster is very easy to use and offers more customization options than the free plugin method.

Step 1: Install OptinMonster on your website

First, you need to click on the "Get OptinMonster Now" button on theOptinMonsterRegister on the website.

How to Create a "Sticky" Floating Footer Bar in WordPress

Next, install and activate the free OptinMonster Connector plugin on your website. Once activated, the OptinMonster Setup Wizard will open on your screen, where you can click the "Connect your existing account" button. This will connect your WordPress website to your OptinMonster account.

How to Create a "Sticky" Floating Footer Bar in WordPress

When this is done, a new window will open on the screen.

Here, click on the "Connect to WordPress" button to continue.

How to Create a "Sticky" Floating Footer Bar in WordPress

Step 2: Create and customize a floating sticky footer bar

Now that OptinMonster has been connected to your site, it's time to create a sticky floating footer bar. Requires access from the WordPress admin sidebarOptinMonster " template page and select "Floating Bar" as the activity type.

When you are done, all the pre-made templates in the floating bar will be loaded on the screen. From here, you can click the "Use Template" button on the template you want to use.

How to Create a "Sticky" Floating Footer Bar in WordPress

This will open the "Create Campaign" prompt on the screen where you can add a name for the floating footer bar you want to create. It can be any name you like, as the name will not be displayed to visitors to your site.

After that, just click the "Start Build" button.

How to Create a "Sticky" Floating Footer Bar in WordPress

OptinMonster's drag-and-drop builder will now launch on your screen, where you can start customizing the floating footer bar. Here, you'll notice a floating bar preview on the right and blocks in the left column.

If your floating footer bar is promoting a discount offer, use a countdown timer block. This will help create a sense of urgency among users and encourage them to take action. CTA, video or social media blocks can also be added to the footer bar.

How to Create a "Sticky" Floating Footer Bar in WordPress

You can also edit the text on the footer bar by clicking on it. This will open up the block settings in the left column where you can adjust them to your liking.

For example, if you want to change the discount offer in the template, you can change the button text. After that, you can select the "Redirect to URL" option and add a link to the page you want users to be directed to after clicking the button.

How to Create a "Sticky" Floating Footer Bar in WordPress

Step 3: Configure the display rules for the floating footer bar

Once you are satisfied with the customization of the footer bar, simply click on the "Display Rules" tab at the top of the page.

Here you can set the conditions under which the footer bar will be displayed. If you want the floating footer to always be displayed, select "Dwell time" from the drop-down menu on the left.

Then, select "Now" from the drop-down menu on the right. In this way, the footer bar will always appear on the page, so that users can view it at any time.

How to Create a "Sticky" Floating Footer Bar in WordPress

If you only want to display the floating footer bar on specific pages, you need to select the "Page Positioning" option from the drop-down menu on the right.

Next, select "Exact Match" from the drop-down menu in the center and enter the URL of the page you want the footer bar to appear on. With this setup, the floating footer bar will only appear on the pages you specify.

How to Create a "Sticky" Floating Footer Bar in WordPress

Additionally, you can select the "Exit Intent" option so that the sticky floating footer will automatically show up when the user is about to leave your site. You can set the sensitivity of this feature and choose which devices to display the footer on. This feature can be very useful if you want to minimize the number of users leaving your site.

If you only want visitors from desktop devices to see the floating footer, you can select the "Visitor device" option. This gives you the flexibility to adjust the way the footer is displayed depending on the type of device the visitor is on.

How to Create a "Sticky" Floating Footer Bar in WordPress

Display rules can also be configured based on date, time or scroll distance by selecting the "When" option from the left column.

Step 4: Publish a Floating Footer Bar

After defining the display conditions for the footer bar, switch to the Publishing tab from the top.

From here, simply click the Publish button.

How to Create a "Sticky" Floating Footer Bar in WordPress

After that, don't forget to click "Save" to make the changes take effect.

Method 2: Create a Sticky Floating Footer Bar with a Free Plugin

If you're looking for a free way to create a sticky floating footer bar, theFirebox Popup BuilderThis plugin can fulfill your requirements by installing and activating the Firebox Popup Builder plugin.

Once activated, access from the WordPress dashboardFirebox " Marketing Campaignspage and click on the "+ New Campaign" button.

How to Create a "Sticky" Floating Footer Bar in WordPress

Once clicked, you will be presented with the Firebox Activity Library, which contains a number of pre-designed sticky floating bar templates for you to choose from.

Once you have found your favorite floating footer template, simply click the "Insert" link below it. However, please note that if you have chosen a header bar template, then its position may not be modifiable. So, make sure that the template you choose is suitable for the footer bar.

How to Create a "Sticky" Floating Footer Bar in WordPress

Now the block editor will open on the screen and you can start giving the floating bar a name.

To edit the text in the footer, just click on it. If you want to add something new, you can click the "+" button, which will bring up a block menu. In the menu, you can add images, titles, paragraphs, videos, quotes or lists.

For example, if you want to add social media accounts, select the "Social Icons" block. Then, just enter your social media accounts and links in the block panel.

How to Create a "Sticky" Floating Footer Bar in WordPress

It is also possible to change the text in a button block and add a link to the page to which the user is to be directed by clicking the link icon in the block toolbar.

After that, enter the URL of your choice and press "Enter".

How to Create a "Sticky" Floating Footer Bar in WordPress

Next, you can scroll down to the "Firebox Settings" section.

Here, you can change the background color, text color, alignment, size, padding and margins of the floating footer bar.

How to Create a "Sticky" Floating Footer Bar in WordPress

Switch to the "Behavior" tab from the left column and select "Page Load" as the float trigger.

Then, use the Delay slider to select the delay time for the floating bar. For example, if you drag the slider to 15 seconds, the floating footer bar will be displayed once the user has been on your site for 15 seconds.

You can leave the slider at 0 if you want the sticky floating footer bar to display immediately.

How to Create a "Sticky" Floating Footer Bar in WordPress

Next, you can leave the other settings unchanged or configure them to your liking.

When you're done, don't forget to click the "Publish" button at the top.

How to Create a "Sticky" Floating Footer Bar in WordPress

The WordPress site you visit now will be able to view the sticky floating footer bar in action.


Contact Us
Can't read the article? Contact us for a free answer! Free help for personal, small business sites!
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) E-mail: info@361sale.com
Working hours: Monday to Friday, 9:30-18:30, holidays off
Posted by photon fluctuations, retweeted with attribution:https://www.361sale.com/en/7897/

Like (0)
Previous April 17, 2024 5:51 pm
Next April 17, 2024 5:53 pm

Recommended

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

020-2206-9892

QQ咨询:1025174874

E-mail: info@361sale.com

Working hours: Monday to Friday, 9:30-18:30, holidays off

Customer Service
In order to facilitate global user registration and login, we have canceled the telephone login function. If you encounter login problems, please contact our customer service for assistance in binding your email address.