Plugin Review: Simple Sticky Footer

I wanted to feature something quick and easy that can make a big difference in your website, without having to know too much code.  This plugin allows you to add a footer to your site that will stay at the bottom no matter how short or tall the browser window is. It’s the Simple Sticky Footer plugin. It’s responsive so it works across tablet and mobile devices as well. It’s a great place to put your contact info so it’s always visible to your viewers.

So, already that’s pretty useful, but it gets better…

You’ve probably seen the Hello Bar on different websites.

It’s a great attention getter that sits on the top of your pages and has some really great attributes, but it’s not free.  You can use the Simple Sticky Footer plugin to get the same affect.

It’s very easy to use.
Step 1:Simply install the plugin and activate it.  Then create a new page that will hold the content you want on your footer.  Call the page something like “Sticky Footer” so you will remember what it is.
Step 2: Go to the configuration page APPEARANCE > SIMPLE STICKY FOOTER.
Step 3: Select the page which will be shown on your website.
Step 4 (optional): Define a width, in most cases the width of your page. I used 100% to make the footer responsive.
Step 5 (optional): Define an animation effect.
Step 6 (optional): Define a delay. Sometimes you want to show the sticky footer after 10-15 seconds.
Step 7 (optional): Define additional CSS rules like: rounded borders, gradient background, shadows, etc … Do not use { }, just enter the css properties ex: background:gray;border-top:1px;

Here is what the footer looked like with no additional CSS:

You can see it’s stuck to the very, very bottom and has no padding and a white background by default.

Now we want to move the bar to the top instead of the bottom, so go to Plugin > Editor, and use the dropdown to choose Simple Sticky Footer, then click on the last file there, which is the CSS file. Then find this code:
#simple-sticky-footer-container
And where it says “bottom: 0;” change it to say “top:0;”. Super simple!

We can change the way it looks by adding a little additional CSS back under Appearance > Sticky Footer. Here is what I added to make it look more like the Hello Bar.

text-align: center;
font-family: Georgia,Times New Roman, Times, serif;
color:#ffffff;
font-size: 14px;
line-height: 30px;
background: #F16952;
border-bottom: 3px solid #fff;

Since you are writing what you want to go here on a regular page, you can easily add an image, a link or a button. So just by adding a little link to the page:

Sign Up Now

and then a little CSS to the style.css sheet (under Appearance > Editor)

a.hellobar  {
	background: -moz-linear-gradient(center top , #4A4844 0%, #2D2C29 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.28);
        color: #FFFFFF;
	border-radius: 4px;
        font-size: 0.854em;
        margin: 0 0 0 7px;
        padding: 2px 8px 1px;
        text-decoration: none;
}

You can also mimic that cute little button.

It would also be easy to add a email signup here with Gravity Forms. The possibilities are endless!

Good luck and let me know your results!