floating footer bar | The Blog Pros

April 11, 2024

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?

A sticky floating footer bar stays visible on your website even when users scroll down on your page. It can help you promote discount offers or social media handles, which can reduce the bounce rate and get more conversions.

In this article, we will show you how to easily create a sticky floating footer bar in WordPress, step by step.

What Is a Floating Footer Bar in WordPress?

A sticky floating footer bar allows you to prominently display important content and news to users.

This bar remains visible to visitors at all times, so they are more likely to click on it and discover more useful content.

You can use the floating footer bar to:

Drive more clicks to other blog posts.
Generate leads and build your email list.
Bring attention to special coupons or discount offers/sales.
Promote your social media accounts.
Build brand recognition.
Provide access to important resources on your WordPress website.

Having said that, let’s see how to easily create a sticky floating footer bar in WordPress. We will show you two methods in this tutorial, and you can use the links below to jump to the method of your choice:

Method 1: Create a Sticky Floating Footer Bar With OptinMonster (Recommended)
Method 2: Create a Sticky Floating Footer Bar With a Free Plugin
Bonus: Create a Sticky Floating Navigation Menu in WordPress

Method 1: Create a Sticky Floating Footer Bar With OptinMonster (Recommended)

You can easily create a sticky floating footer bar with OptinMonster. It is the best lead generation and conversion optimization tool on the market that makes it super easy to convert your website visitors into subscribers.

OptinMonster comes with a drag-and-drop builder and premade templates that allow you to create a floating footer bar, slide-in popups, and banners without using any code.

We recommend this method because OptinMonster is super easy to use and offers more customization options than the free plugin method.

Step 1: Install OptinMonster on Your Website

First, you will need to sign up on the OptinMonster website by clicking on the ‘Get OptinMonster Now’ button.

Next, you must install and activate the free OptinMonster connector plugin on your website. For more instructions, see our beginner’s guide on how to install a WordPress plugin.

Upon activation, the OptinMonster setup wizard will open up on your screen, where you have to click the ‘Connect Your Existing Account’ button. This will connect your WordPress site with your OptinMonster account.

Once you do that, a new window will open up on your screen.

Here, click the ‘Connect to WordPress’ button to move ahead.

Step 2: Create And Customize the Floating Sticky Footer Bar

Now that you have connected OptinMonster with your website, it’s time to create a sticky floating footer bar.

To do this, you need to visit the OptinMonster » Templates page from the WordPress admin sidebar and select ‘Floating Bar’ as the campaign type.

Once you do that, all the premade templates for the floating bar will load on the screen. From here, you can click the ‘Use Template’ button on the one you want to use.

Choose a premade template for a floating sticky footer bar

This will open the ‘Create Campaign’ prompt on the screen, where you can add a name for the floating footer bar that you are about to create. It can be anything you like, as the name won’t be displayed to your visitors.

After that, just click the ‘Start Building’ button.

Add a name for your floating sticky footer bar

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

For example, you can use a countdown timer block if your floating footer bar is promoting a discount offer. This will help create a sense of urgency among users and encourage them to take action.

You can also add a CTA, video, or social media block to the footer bar. For detailed instructions, you can see our tutorial on how to create an alert bar in WordPress.

Add blocks to customize your floating footer bar

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

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

Step 3: Configure The Display Rules For Your Floating Footer Bar

Once you are satisfied with your footer bar’s customization, just switch to the ‘Display Rules’ tab from the top.

Here, you can configure when to display the bar on your page. If you want to display the floating footer bar at all times, then you must select the ‘time on page’ option from the left dropdown menu.

After that, choose the ‘is immediate’ option from the dropdown menu on the right.

Configure display rules to display the floating footer bar at all times

However, to display the floating footer bar on a specific page, you must select the ‘Page Targeting’ option from the right dropdown menu.

After that, choose the ‘exactly matches’ option from the dropdown menu in the middle and then add a page URL. Once you do that, the floating footer bar will only displayed on the page you chose.

Configure page targeting for floating footer bar

Additionally, you can select the ‘Exit Intent’ option to show the sticky floating footer bar when the user is about to leave your site. You can then configure the exit intent sensitivity and choose the devices where the footer bar will be displayed. This can be handy if you want to reduce your bounce rate.

You can even select the ‘Visitor’s Device’ option if you only want to display the floating footer bar to desktop visitors.

Configure exit intent technology for footer bar

You can also configure the display rules according to the date, time, or scroll distance by selecting the ‘When’ option from the left column.

For an explanation of more display rule options, you can see our complete OptinMonster review.

Step 4: Publish Your Floating Footer Bar

Once you have defined the display conditions for your footer bar, switch to the ‘Publish’ tab from the top.

Here, simply click the ‘Publish’ button.

After that, don’t forget to click on ‘Save’ to make your changes live.

Now, you can visit your WordPress blog to see the sticky floating footer bar in action.

Alternative: You can also use Thrive Ultimatum to show a countdown timer floating footer bar on your website. For more details, see our Thrive Themes Suite review.

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

If you are looking for a free way to create a sticky floating footer bar, then this method is for you. However, keep in mind that you will have limited customization options compared to OptinMonster.

First, you need to install and activate the Firebox Popup Builder plugin. For detailed instructions, see our tutorial on how to install a WordPress plugin.

Upon activation, visit the Firebox » Campaigns page from the WordPress dashboard and click the ‘+ New Campaign’ button.

This will open the Firebox campaign library, where you can search for sticky floating bar premade templates.

Next, simply click the ‘Insert’ link under the floating footer bar that you like. Keep in mind that if you select a header bar, then you won’t be able to change its position. You must ensure the template you select is for a footer bar.

The block editor will now open up on your screen, where you can start by adding a name for your floating bar.

After that, you can edit the text in the footer by clicking on it and add new blocks by clicking the ‘+’ button. This will open the block menu, where you can add images, headings, paragraphs, videos, quotes, or list blocks.

For instance, if you want to add social media handles, then you can choose the Social Icons block. After that, you can add social media accounts and links using the block panel.

For more details, you can see our tutorial on how to add social media icons in WordPress menus.

Add blocks in the floating footer bar from the block menu

You can also change the text in the button block and add a link to the page where you want to direct users by clicking on the link icon in the block toolbar.

After that, type in the URL of your choice and press ‘Enter’.

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

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

After that, switch to the ‘Behaviour’ tab from the left column and select ‘Page Load’ as the floating bar trigger point.

Then, use the ‘Delay’ slider to choose a delay timing for the floating bar. For example, if you drag the slider to 15 seconds, then the floating footer bar will be displayed once the user has spent 15 seconds on your site.

If you want the sticky floating footer bar to be displayed immediately, then you can keep the slider at 0.

Next, you can leave other settings as they are or configure them according to your liking.

Once you are done, don’t forget to click the ‘Publish’ button at the top.

Now visit your WordPress site to view the sticky floating footer bar in action.

This is what it looked like on our demo site.

Bonus: Create a Sticky Floating Navigation Menu in WordPress

Apart from adding a sticky footer bar, you might also like to create a sticky floating navigation menu on your WordPress site.

A navigation menu contains links to the most important pages on your WordPress blog and acts as an organizational structure for your website.

If you make this menu sticky, then it will remain visible on your page at all times, even as the user scrolls down on your screen. This can increase engagement and make your website easier to navigate.

To create a sticky floating navigation menu, simply install and activate the Sticky Menu & Sticky Header plugin. For details, see our tutorial on how to install a WordPress plugin.

Upon activation, visit the Settings » Sticky Menu page from the WordPress dashboard and type #main-navigation next to the ‘Sticky Element (required)’ option.

Type navigation menu as the sticky element

After that, click the ‘Save Changes’ button to store your settings. You have now successfully created a sticky floating navigation menu.

For detailed instructions, please see our tutorial on how to create a sticky floating navigation menu in WordPress.

We hope this article helped you learn how to easily create a floating sticky footer bar in WordPress. You may also want to see our beginner’s guide on how to add header and footer code in WordPress and our checklist of things to add to the footer on your WordPress site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a “Sticky” Floating Footer Bar in WordPress first appeared on WPBeginner.

August 12, 2022

How to Add a Smooth Scroll to Top Effect in WordPress using jQuery

Do you want to add a smooth scroll to the top of the page effect on your WordPress website?

A scroll to top effect is great when you have a long page and want to give your users an easy way to get back to the top. It helps improve the user experience of your website.

In this article, we will show you how to add a smooth scroll-to-top effect in WordPress using jQuery and a plugin.

How to scroll to top effect using jQuery

What is Smooth Scroll and When Should You Use It?

Unless the site has a sticky header menu, users that scroll to the bottom of a long WordPress page or post have to manually swipe or scroll their way back to the top to navigate the site.

That can be a real annoyance, and often users will simply hit the back button and leave. That’s why you need a button that will quickly send users to the top of the page.

You can add this functionality as a simple text link without using jQuery, like this:

<a href="#" title="Back to top">^Top</a>

That will send users to the top by scrolling up the entire page in milliseconds. It works, but the effect can be jarring, kind of like when you hit a bump in the road.

Smooth scroll is the opposite of that. It will slide the user back to the top with a visually pleasing effect. Using elements like this can drastically improve the user experience on your site.

That said, let’s see how you can add a smooth scroll to top effect using a WordPress plugin and jQuery.

How to Add a Smooth Scroll-to-Top Effect Using a WordPress Plugin

This method is recommended for beginners, since you can add a scroll-to-top effect to a WordPress website without touching a single line of code.

The first thing you’ll need to do is install and activate the WPFront Scroll Top plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, you can go to Settings » Scroll Top from your WordPress dashboard. Here you can configure the plugin and customize the smooth scroll effect.

First, you’ll need to click the ‘Enabled’ checkbox to activate the scroll-to-top button on your site. Next, you’ll see options to edit the scroll offset, button size, opacity, fade duration, scroll duration, and more.

If you scroll down, you’ll find more options like editing the auto-hide time, enabling the option to hide the button on small devices, and hiding it on the wp-admin screen.

You can also edit what the button does when you click it. By default, it will scroll to the top of the page, but you can change it to scroll to a particular element in the post or even link to a page.

There’s also an option to change the location of the button. It will appear in the bottom right corner of the screen by default, but you can choose to move it to any of the other corners, too.

The WPFront Scroll Top plugin also offers filters to show the scroll-to-top button only on selected pages.

Normally, it will appear on all the pages on your WordPress blog. However, you can navigate to the ‘Display on Pages’ section and choose where you’d like to display the scrolling to the top effect.

The plugin also offers pre-built button designs you can choose from. You should be able to easily find a design that matches your site.

If you can’t find a pre-built image button that works for you, then there is an option to upload a custom image from the WordPress media library.

When you’re done, simply click the ‘Save Changes’ button.

You can now visit your website to see the scroll-to-top button in action.

Adding Smooth Scroll to Top Effect with jQuery in WordPress

This method is not recommended for beginners. It is suitable for people who are comfortable editing themes because it includes adding code to your website.

We will be using jQuery, some CSS, and a single line of HTML code in your WordPress theme to add the smooth scroll top effect.

First, open a text editor like Notepad and create a file. Go ahead and save it as smoothscroll.js.

Next, you will need to copy and paste this code into the file:

jQuery(document).ready(function($){
	$(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
			$('#smoothup') .fadeOut();
        } else {
			$('#smoothup') .fadeIn();
        }
    });
	$('#smoothup').on('click', function(){
		$('html, body').animate({scrollTop:0}, 'fast');
		return false;
		});
});

After that, you can save the file and upload it to the /js/ folder in your WordPress theme directory. For more details, please see our guide on how to use FTP to upload files to WordPress.

If your theme does not have a /js/ directory, then you can create one and upload smoothscroll.js to it. You can also see our guide on the WordPress files and directory structure for more information.

This code is the jQuery script that will add a smooth scroll effect to a button that takes users to the top of the page.

The next thing you need to do is to load the smoothscroll.js file in your theme. To do that, we will enqueue the script in WordPress.

After that, simply copy and paste this code to your theme’s functions.php file. We don’t recommend directly editing the theme files because the slightest mistake can break your site. Instead, you can use a plugin like WPCode and follow our tutorial on how to add custom code snippets in WordPress.

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '',  true );

In the above code, we have told WordPress to load our script and also load the jQuery library since our plugin depends on it.

Now that we have added the jQuery part, let’s add an actual link to our WordPress site that takes users back to the top. Simply paste this HTML anywhere in your theme’s footer.php file. If you need help, then please see our tutorial on how to add header and footer code in WordPress.

<a href="#top" id="smoothup" title="Back to top"></a>

You may have noticed that the HTML code includes a link but no anchor text. That’s because we will use an image icon with an up arrow to display a back-to-top button.

In this example, we are using a 40x40px icon. Simply add the custom CSS below to your theme’s stylesheet.

In this code, we are using an image icon as the button’s background image and setting it in a fixed position. We have also added a little CSS animation, which rotates the button when a user hovers their mouse over it.

#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
}

#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}

In the CSS above, make sure that you replace https://www.example.com/wp-content/uploads/2013/07/top_icon.png with the image URL you want to use. You can upload your own image icon using the WordPress media uploader, copy the image URL, and then paste it into the code.

We hope this article helped you add a smooth scroll to top effect on your site using jQuery. You may also want to see our expert pick of the best WordPress plugins for small business and our step by step guide on how to start an online store.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add a Smooth Scroll to Top Effect in WordPress using jQuery first appeared on WPBeginner.

December 9, 2021

How to Add a Scrolling News Ticker in WordPress

Do you need to add a scrolling news ticker to your WordPress site?

You’ll often see news tickers used by television networks to highlight breaking news. You can add a news ticker to your website to highlight special deals or popular posts.

In this article, we’ll show you how to add a scrolling news ticker in WordPress.

What Is a Scrolling News Ticker?

A news ticker scrolls a single line of information continuously across the screen. They typically display current news items, sporting results, live financial and currency information, and weather information.

They are a great way to display small snippets of information that are always changing. You’ll find that a news ticker can display quite a lot of information in a limited space on your WordPress blog.

For example, you could use a news ticker to display your best performing posts, items in your store that are on sale, or any other information that you want to highlight.

Another way to display this type of information on your website is with a sticky floating footer bar.

With that being said, let’s look at how to add a scrolling news ticker to your WordPress site.

How to Add a Scrolling News Ticker in WordPress

The first thing you need to do is install and activate the Ditty News Ticker plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin adds a News Ticker menu item to your WordPress admin area.

You need to navigate to News Tickers » Add New to add a news ticker. On the next screen, you will have the ability to give this particular news ticker a name, ticker text, and link.

For each ticker, you can add as many ticks as you like. These are the separate pieces of information you want to display, and each can have its own link.

If you want to add another ticker item, then press the plus + button at the top right of the current tick. A new ticker item will be added.

Once you are done adding ticker items, you should click on the Ticker Mode tab. There are three different ticker modes available: scroll, rotate, and list.

Scroll mode is the default setting because it is the most commonly used in television networks. Rotate is another good option if you want to show one ticker at a time.

The settings on the rest of the page allow you to adjust the behavior of the news ticker. You can configure scroll speed and direction, override the default ticker dimensions, and choose the spacing between each tick.

The plugin generates a shortcode as well as a PHP function for each news ticker you create. You can either add the shortcode to a post, page, sidebar widget, or you can directly insert the PHP function into your theme files.