Website Footer Design: All You Need To Know About Creating A Kick-Ass Footer


Let me ask you this:

How well are you utilizing the footer section of your website?

Does your website even have a footer to start with?

And if not, do you even care about creating or using one?

Whether you’re thinking about a new website or redesigning an existing website, one area of your design project you shouldn’t ignore is the footer section.

When it comes to designing a “close to perfect” website for your business, it’s so easy to become overwhelmed by the whole process.

Having created so many websites, both for myself and for my clients, I know this feeling all too well.

There are so many things to consider in a web design project. There’s the header, homepage, hero section, CTA buttons, images, videos, layouts, and all the rest of it.

One area that’s not often talked about is the footer section.

“Who actually cares about the very bottom of a website anyway, it’s not like anyone scrolls down to that part, do they?”

I’m pretty sure people scroll down to the footer –

But, of course, paying special attention to the header section, and the fold design and content takes priority because, essentially, that’s where most of your visitors will no doubt spend most of their time, right?

Hmm, that may be so – However, the lower part, in particular, the footer of your website deserves just as much attention too, I think anyway.

Check this out:

In a case study carried out some time ago, Chartbeat actually found that 65% of their engagement happened right ‘below the fold’.

Interesting stuff, don’t you think?

So people do scroll!

Yes, and if you’ve decided not to invest your time and energy into paying attention to optimizing your website’s bottom half and footer area, you could be missing out on some unique opportunities, such as –

  • Providing additional important information about your website.
  • Improving user experience and navigation.
  • Improving your conversion rates.

So – For those of your website users who wish to spend a little extra time on your site, perhaps by scrolling all the way down to the bottom to discover what they’re looking for, creating a well-optimized footer area is just what’s needed.

In this post, we’re going to cover everything you need to know about creating a killer website footer, and how to make good use of it, regardless of the type of website/business you have.

Here’s what we’re going to be covering in detail –

  • What is a website footer? For all of you new to web design.
  • Why your website needs a footer?
  • Website footer case studies.
  • Five examples of beautifully designed website footers.
  • 16 things to consider including in your website’s footer.
  • Tools to help you create a great-looking footer section.

OK. let’s begin.

What is a website footer?

If you didn’t already know this, a website footer is the very bottom part of a website or webpage.

Website footers come in all shapes, sizes, and styles.

Some websites have very minimal-looking footer areas, while some websites have very large multi-column, full-height footers, and sub-footers.

Some websites don’t have a footer at all, whilst some will have a design feature called “infinite scrolling” – Meaning there is no footer or end to the bottom of the site.

We won’t get into infinite scrolling today. Perhaps in another post.

Items such as contact information, a search box, and navigational links to essential pages, social media profile icons can all usually be found in most website footer areas.

A website footer can also be used for providing other essential information about a website or business, such as a company’s mission statement, location information (map), website statistics, social proof, an email signup form, registration or login details, other types of call-to-actions, etc.

Why you need to strategize your website footer design

It is not 100% necessary for your website to have a footer area at all, however, not using one may make it frustratingly challenging for some of your website visitors to find specific pieces of information about your website or business.

For instance, the footer section is ideal for placing your copyright info, and important links to essential pages of your website, such as your about page, contact page, terms and conditions page, privacy policy page, disclaimer page, GDPR information page, etc.

Contact information is a pretty popular one, mind you. Most people expect to find contact details in the footer if they can’t find them in the header.

Other than improving the navigational flow of a website as well as user experience, strategizing a website’s footer design has been proven to impact conversions for some brands and businesses. Maybe it can work for you too.

Take a look below:

Website footer case-studies

During a usability test, UserTesting found that placing their conversion goals in the footer section helped them to increase their conversion rate by 50% over a two-week period.

SmartInsights also reported that they saw a near 24% growth in their sales conversion rate simply by optimizing their website footer.

Examples of beautiful footer designs to inspire you

Now. I want to share with you a small collection of website footer designs that I found and really liked. I want you to take a look and get inspired for creating your own website footer design –

Web studio SparkBox makes use of a full-width, card-style interface footer design, which is really simple but attractive.

Their footer area clearly displays contact information, navigational links, and social media profile links.

Zoyo yogurt’s website‘s footer area is another one that I liked the look of. Their footer design contains contact information, navigational links, and a clean and attractive email form.

BlogVault’s website footer displays a sub-footer section with a conversion goal (getting people to signup for a service trial), followed by the main footer area with a list of recently published blog articles, navigational links, conversion links, and links to help and support pages, privacy and policy pages.

So – Are you feeling inspired to start revamping your website footer? Hopefully, you are by now, but here are a few more examples to make sure you are inspired

GiftRocket’s beautiful footer area is made up of a sub-footer section for showing off their testimonials from reputable brands, and a main footer area that consists of all of the important navigational links to other pages on their site.

Lastly, I really love the design of Bristol Archive Record’s footer – Which consists of a graphic background image of the Clifton Suspension Bridge. Their footer section provides three widget areas with links to important pages, copyright info, and authority logos for the websites and profiles they use.

OK, I think that’s enough inspiration for you. Now, let’s look at 16 things to consider including in your footer design

Let’s start with what I believe to be the MOST essential items –

#1. Copyright info – Make it clear that the content of your website is protected and copyrighted, and that plagiarism is prohibited! Copyright info should ideally be placed right at the bottom of your main website footer.

#2. Contact Information – As I mentioned earlier, most people tend to scroll down to the footer section to find contact information for a website. It’s essential that you add yours to your footer, especially if you haven’t included a link to your contact page in the main navigation, which most websites will have.

Your contact information can be a mailing address, telephone number, and email address.

Telephone Number Conversion Tip – If you’re displaying a telephone number in your website’s footer area, why not make it clickable so that it offers your users a simple way to click-to-call your business directly. Useful when they are browsing your website on a smartphone.

#3. Privacy Policy – With the new GDPR laws, it’s essential to display a link to your privacy policy page. This should be placed in secondary navigation to use in the footer.

#4. Terms of Service – If like myself and many others, you provide a service through your website or run an e-commerce website, the last thing you want is for your customers to become confused about the terms of doing business with you. Make sure you display a link to your terms of service page clearly in your footer.

#5. Feedback/Testimonials – This is optional, however, I think it’s important for online businesses to link to their testimonials page or a testimonial page. Assuming you have one, of course.

#6. Google Map – If your website is the online portal for your brick-and-mortar business, perhaps you run a holiday villa, local restaurant, or gift shop – Then certainly consider adding some location information to your footer. This could be a simple address and postcode or a local Google Map integration.

#7. Secondary Navigation – Add links to your About page, FAQ page, and other important pages of your site that you think would provide additional assistance for your website users.

Non-essential Items

Now, let’s take a look at some other items you could add to your website footer design that are non-essential –

#8. Social Proof & Follow Us Icons – If you want to show off your social media influence or get people to follow you on your most active social networks, consider adding some social profiles and perhaps the number of subscribers/followers you currently have for each profile in the footer for social proof.

You could even create a sub-footer area for these, like the one shown below!

#9. SiteMap – A SiteMap essentially helps search engines to get a better understanding of the structure of your website and content. Many websites will choose to have a link to their SiteMap besides their copyright info in a sub-footer.

#10. Social Sharing Tools – Social sharing buttons can also be placed in the footer to make it easier for your visitors to share your page with their social media friends and followers.

#11. Email Opt-in Form – A great way to boost your email opt-in conversion is to display a simple signup form. Alternatively, if a signup form is simply too much to add to your footer, consider a simple call-to-action button or link to your main lead generation page.

#12. Contact Form – If you don’t wish to place your contact information on display in your footer, especially your email address. To reduce the risk of receiving email spam, consider adding a simple contact form instead.

Using a form in the footer area of your website can help make it easier for your users to contact you without having to leave the page they’re on.

Remember, however, a form can take up a considerable amount of footer space.

#13. Mission Statement – If you want to show your visitors what your website or brand stands for, what your goals, and aspirations are, etc. Consider adding a short version of your mission statement in your footer. The perfect place for this would be the sub-footer.

If you have an extended version of your MS, you could always add a link to it.

#14. List of latest/greatest blog posts – You may want to add a feed to your latest blog posts in your website’s footer, or an even better strategy would be to link to just a few of the best and most popular blog posts.

My advice to you would be to keep this minimal, though. Four or five links should be more than enough.

#15. About/Bio – If your website is a personal brand site or blog, you could also add a short bio about yourself including a photo to help humanize your website/brand. You can then add a link to your About page that visitors can click on to learn more.

#16. Conversion Links or Call To Action – Do you have sales pages, best-selling product pages, or affiliate pages that you want to promote further? How about linking to them in your footer anchor text?

Things to avoid adding to your website’s footer

OK, so what about items that shouldn’t be in your website footer? Let’s take a look –

  • Page view counters and traffic stats widgets.
  • Direct affiliate links.
  • Embedded social media feeds.
  • Advertisements.

Note: You may agree or disagree with some of the items I’ve included in the list of things to avoid adding to your website footer. The reason I’ve added them is that I don’t think they’re beneficial in any way for your visitors.

What tools can you use to design your website footer?

It really depends on what platform you’re using to build your website.

For WordPress users, for instance, there are a number of premium quality footer plugins you could try out –

Smart Footer System is a plugin that works with a wide range of page builder plugins such as Elementor and Thrive Architect.

Sitewide footers or single page/posts footers

Some websites use different footers on their pages to meet their conversion goals. Some website owners prefer to only use a footer section on the homepage – In which case, something like Thrive Architect is a great page builder plugin to use to build a custom homepage with an optimized footer area.

Right, I’ve waffled on enough about optimizing your website’s footer design, now let’s ask a few other experts what they think –

Expert’s Insights

Ashley Faulkes, Founder of MadLemmings

“I use the footer for a few key things that are often not found elsewhere or should be easy to find.

  1. The company details (name, address, phone, etc)
  2. List of important pages that are either not in the main header or deserve repeating (shipping, privacy, terms, and conditions, about the company, etc)
  3. Lastly, an important call to action: Further ways to get in touch, an email opt-in (newsletter), a booking button, donate button, etc.

Yes, the footer is often forgotten about and under-utilized, but it can be a very useful place indeed.”

Andrew Lowen, CEO of NextLevelWeb

“The footer area of a website should help website visitors navigate the website. We like including important links (such as most/all menu items), contact information, and copyright info.

Mistakes in the footer area to adding social media feeds or “join our newsletter” forms. When a user looks at the footer, they aren’t interested in your social media… they missed what they were looking for in the main body of your website! If you fail to navigate them to someplace closer to what they were looking for, you are going to lose out on potential conversions.

People don’t go to the footer on purpose – they go there because their scroll action led them there by accident, often due to their lack of attention to detail. Your footer should help them find what they need!”.

It’s a wrap!

So there you have it. Hopefully, you have found this post super useful. I also hope that it has motivated you to rethink the way you utilize your website’s footer section.

Whatever your conversion goal might be on your website or blog, when designing your footer area, just experiment to see what works and what doesn’t.

Start by adding a few of the most relevant elements and items you believe will help improve navigation and user experience for your website users.

If you believe that people aren’t scrolling to your footer section, consider setting up some simple heatmaps and scroll maps to find out for sure.

Whatever you decide to do, I hope you won’t let your website footer go to waste.

Time to have your say!

  • Does your website or blog have a footer area?
  • Are you making the most of it?
  • What do you have in your footer right now?
  • Do you have any additional tips or suggestions you’d like to share?

Get in touch here or feel free to share this post on social media with your comment.

Need help with your website design or redesign project? I can help.

Get full access to all of the content

Everything you need to design your website with WordPress, Oxygen, Bricks Builder, plus over 100 video tutorials, written tutorials, code snippets, and more.

Become a member

FREE WEB DESIGN LESSON

SIGNUP FOR MY FREE 40-MINUTE OXYGEN BUILDER COURSE TASTER