How To Create Sticky Floating Footer Bar In GeneratePress

How To Create Sticky Floating Footer Bar In GeneratePress 源码网站 第1张

In this article, we are going to see how to create sticky floating footer bar in GeneratePress theme. I have seen that multiple website owners face problems in creating a sticky floating footer bar in GeneratePress theme and this is one of the most common issues seen on GeneratePress’s official forum.

There is a simple method of accomplishing this in the GeneratePress premium version. For those who are running the GeneratePress free version, they need to do this via downloading a plugin.

GeneratePress is a multi-purpose WordPress theme that is fast, flexible and has tons of customization options. Well, the free version does not support granular levels of customization but does offer a lot more than its competitors. If you want to know all the differences in detail, please go through our article GeneratePress free vs premium. I have given a detailed comparing between both versions.

If you are involvemented in understanding why GeneratePress is so popular and want to have a look at its most crucial features, I’d suggest you click here to go through a detailed review of GeneratePress Theme.

Before we head into creating a sticky floating footer in GeneratePress theme, let us first understand why do we need a sticky floating footer bar on a website.

Why To Create Sticky Floating Footer Bar?

A sticky floating footer bar is a fixed footer bar at the bottom end of your browser’s window. As the name says “Sticky”, it will always remain at the end of your browser’s window, no matter how long the user keeps scrolling down on the page. This is to predominantly display the most of import info/content of your website, to your visitors.

How To Create Sticky Floating Footer Bar In GeneratePress 源码网站 第3张

As it remains visible to your users at all times, there is a higher possibility of them clicking on it to find out better content.

This is the place you can offer deals to your clients, create social sharing buttons, have your visitors to opt-in for email subscriptions, or even promote discount coupons. Remember, to use this only for content that turns out to be more useful to your audience.

What Can You Expect From A Sticky Floating Footer Bar?

A sticky floating bar can…

  • Get you more clicks to pages that weren’t getting enough traffic
  • Increase your email list of subscribers as Opt-Ins in a sticky floating footer bar work very well
  • Showcase discounts and coupons that you’ve always wanted to promote on your site. Bringing in more sales and revenue.

To create sticky floating footer bar in GeneratePress theme we will be using 2 methods.

  • Method 1: By using a Plugin – Recommended for GeneratePress Free users
  • Method 2: By using small amount of Code – Recommended for GeneratePress Premium users

Note: If you are not comfortable with coding I recommend using the plugin, even if you are running the GeneratePress premium theme.

I will be demonstrating method 1 using WPFront Notification Bar plugin on BloggingIdol

Create Sticky Floating Footer Bar In GeneratePress Using Plugin

Below is an image of how my website, BloggingIdol looks like, before creating a sticky floating footer bar

How To Create Sticky Floating Footer Bar In GeneratePress 源码网站 第5张

Now we will accomplish method 1, by downloading a plugin called WPFront Notification Bar.

  • Go to your WordPress Dashboard, hover your mouse on Plugins and click on Add New.
How To Create Sticky Floating Footer Bar In GeneratePress 源码网站 第7张
  • Type in WPFront Notification Bar in the search box, and later click on Install and Activate.
How To Create Sticky Floating Footer Bar In GeneratePress 源码网站 第9张
  • Once you’ve installed and activated the plugin, it will automatically take you to its Settings page.
How To Create Sticky Floating Footer Bar In GeneratePress 源码网站 第11张
  • You will need to check mark Enabled, Preview Mode, and Fixed at Position. Also select Bottom as place.
  • Further below you have an option to write your own Custom Text and create Buttons. Moreover, it also offers color customization options to match the theme of your website.
  • Don’t forget to hit the Save Changes button at the bottom end of the WPFront Notification Bar Settings page.
How To Create Sticky Floating Footer Bar In GeneratePress 源码网站 第13张

That’s it, this is how you create sticky floating footer bar in GeneratePress theme using a plugin.

Also Read: How to Add Social Sharing Buttons

Create Sticky Floating Footer Bar In GeneratePress Theme Using Code

This method needs you to have GeneratePress premium plugin installed on your WordPress website.

The reason being, you will need a module for accomplishing this task, that only gets bundled with GP Premium plugin.

Note:

Let’s get started then…

Activate Elements Module

  • Go to your WordPress Dashboard, hover your mouse on Appearance and then click on GeneratePress.
How To Create Sticky Floating Footer Bar In GeneratePress 源码网站 第15张
  • Here you will need to activate the Elements module.
How To Create Sticky Floating Footer Bar In GeneratePress 源码网站 第17张
  • For BloggingIdol, I have already activated the Elements module on my GeneratePress premium theme.

Create A Hook

For creating a Hook, you will need to Add New Element.

  • Go to your WordPress Dashboard, hover your mouse on Appearance, and this time click on Elements.
How To Create Sticky Floating Footer Bar In GeneratePress 源码网站 第19张
  • This will open the Elements Page. Click on Add New Element.
How To Create Sticky Floating Footer Bar In GeneratePress 源码网站 第21张
  • Once you click on Add New Element, you will see a window to choose from. Select Element type as Hook and click on Create.
How To Create Sticky Floating Footer Bar In GeneratePress 源码网站 第23张
  • After creating the Hook you will need to add the code.
How To Create Sticky Floating Footer Bar In GeneratePress 源码网站 第25张
<div class="sticky-floating-footer-bar">
    <div class="notice-inner grid-container">
        <span>Let's Make Your Blogging Journey Easy</span>
<a href="https://www.facebook.com/groups/823816958094089">
<button class="bloggingidol-button">Join FB Group</button></a>
    </div>
</div>
  • With the code you will also need to select the Hook – generate_after_footer. This will generate the hook after the GeneratePress footer copyright section.

Note:

  • Under Display Rules, select Location as Entire Site. Click on Save.
  • Now you will need to use those CSS classes under Additional CSS in GeneratePress Theme Customizer.
  • Go to your WordPress Dashboard, hover your mouse on Appearance, and this click on Customize.
How To Create Sticky Floating Footer Bar In GeneratePress 源码网站 第27张
  • Go to Additional CSS option and put the CSS code.
How To Create Sticky Floating Footer Bar In GeneratePress 源码网站 第29张
.sticky-floating-footer-bar {
    place: fixed;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
    z-index: 9999;
    background-color: #0f0f0f; /* Change the Color according to your choice */
    color: #ffffff;
    width: 100%;
}
.sticky-floating-footer-bar span {
    padding-right: 10px;
    font-size: 18px;
}
.bloggingidol-button {
	  background-color: #4267B2;
    border-radius: 50px;
    padding: 5px 10px;
	font-size: 18px;
  font-weight: bold;
	margin-left: 12px;
}
body {
    margin-bottom: 50px;    /*  Change to Match with body*/
}
How To Create Sticky Floating Footer Bar In GeneratePress 源码网站 第31张

This is how the sticky floating footer bar looks on desktop and mobile view.

Conclusion

That’s it, wasn’t it simple.

Basically, using the code is for users who have GeneratePress premium version.

Copy the code and change the color according to your theme style. If you still have any doubts regarding this guide, feel free to leave a comment.

More in Generatepress:

参与评论