Blog footer Design Guide [Includes 72 Examples]

Blog Footer Design

The blog footer, of any site, is often overlooked. 

Because it’s at the end of the page, and most users don’t even reach that point, it is often neglected. 

But, having a powerful one that is visually appealing and with the right content, can increase your credibility. 

It will also get you more user session time, and ultimately, more leads. 

Blog Footer Design

The Blog Footer Guide

This article will cover how you can make a blog footer, and what it should include. One step foot at a time. Keep reading.

Setup a footer on WordPress

Go to WordPress [Haven’t installed WordPress? Check out our guide to setting up a blog].

On the left sidebar, hover over Appearance, and click on customize in the side dropdown:

Blog footer setup - Navigating through WordPress

In the new display, click on the footer in the left sidebar:

Blog footer setup - Navigating to footer

This next display may differ based on the theme you use [The examples displayed in the pictures used the Kadence theme].

But, you should see the following three options: Footer navigation, Copyright, and Social.

Blog footer setup - Footer customization

Clicking on the Footer navigation will let you customize the overall footer.

Click on Social. Give the social section a title like ‘Find us on social media’ [You don’t need to have a title].

And place them in all your social media accounts with their respective links.

You will also get further customization options [Don’t forget about the design tab that gives you visual customization options].

Lastly, click on Copyright, and input your copyright text.

Plus, you can add a lot more options, and you are free to decide where you want it to be displayed in the footer with the following customization feature:

More footer customization in WordPress

It’s a simple layout that mimics the footer, to let you organize elements in the footer.

Simply click on one of the plus icons to get the popup [See in the screenshot above], which lets you add anything.

Widgets are elements you can make and fully customize. So, you can technically add whatever you like to your footer.

To edit the background of the footer, simply click on the design tab where you can have whatever background you’d like [The Kadence theme lets you have the background be a colour, gradient, or even an image].

Footer design customization in WordPress

And that’s the end of the blog footer setup tutorial. Keep reading for best practices.

Blog Footer Design Guide

Here is a quick guide to making a good blog footer:

Background of your blog footer

The background should follow a similar style to your overall website. Style refers to the site’s colours and theme. 

Don’t base it on a single page. Because the blog footer will be present at the bottom of every page.

The most common blog footer background is having a single colour or a colour gradient.

Here is an example of a blog footer background:

This is Backlinko’s blog footer and has a single colour background

Blog footer example

Have high contrast between text & background

Make sure the text is easy to read. It should have a high contrast with the background colour.

Above you can see in Backlinko’s footer, Shades of white are used in contrast to shades of grey.

Certain words are less visible [That have a grey font colour] but that was intended to not overwhelm the eyes with too much white.

Imagine if all the words had the stark white font colour. It’d be too much to look at.

And when a reader hovers over the words, they brighten up to the stark white colour. Here are other examples:

Blog footer example

This is Neil Patel’s blog footer and is also a single colour. Take note how there is high contrast in terms of colour, but because the text is so thin, it has low visibility. It would be far more visible if the text was bold.

footer example
Blog footer example

This is WordStream’s blog footer and is a great example to demonstrate high contrast between text and background.

footer example
Blog footer example

This is WPBeginner’s blog footer. There isn’t high contrast here, but it is all fairly visible. There are two colours used here: A shade of brown, and beige.

blog footer example

Typography of your blog footer

The typography includes the font, font size, and font colours of the text. 

The typography should be the same as your general website. Make sure the typography is easily readable like the typography in Word Stream’s footer. Avoid typography that’s barely visible like in Neil’s footer.

Use a ton of space

The footer can have all the space it wants. And it should be well spaced out to avoid clutter.

Space is quite important because there are usually an immense amount of links. 

And that is quite overwhelming. But pairing it up with the proper organization and enough space will neutralize that problem.

See WP Beginner’s footer, it takes up a lot of space. So, despite having so many links, it doesn’t look cluttered.

Stop overusing link underlining

When a link is underlined, it stands out a lot more. Which can be good if you want certain links to stand out. 

But overusing it actually makes it overwhelming and cluttered. So keep the underlining to a minimum.

See Word Stream’s links. They have just underlined the headers of the different categories [That aren’t even links]. That makes the different sections more obvious

Use a Drop Down for links in the mobile footer

Make sure to see your footer on mobile. Don’t be that blog that leaves their links as is from their desktop version to the mobile version. Ensure your mobile version has a dropdown feature, so the footer is sleek and compact, and not just a huge list of links [Mobile footer examples coming up]

What links to include in your footer?

The blog footer’s purpose has been to have all the necessary links a user might want to check out. 

All in one place. Now, don’t clog it with an excessive amount of internal and/ or external links. 

Only keep the links that are most commonly searched for, as well as, your header navigation links. Check out our blog header guide that covers best practices to build a simple yet impactful header.

You can determine which links are the most sought on your website by checking out your analytics or search console page. 

Just take note of the most common pages users visit. And add those to the footer. Those links should also be added to your sidebar. Check out our guide to building an epic blog sidebar that converts.

A call to action link

The call to action for your blog should be placed wherever possible. 

And, it should especially be placed in the blog footer. 

Because it’s where users who are invested enough in your site, will come to check out more information about your site. 

If you have the call to action available in the footer, they can be a click away from becoming a prospect. 

Consider a secondary sticky blog footer

A secondary sticky footer will be stuck to the bottom of the screen independent of any scrolling. 

Such blog footers are great to display calls to action consistently to the user while they’re going through your site or blog post content. Here is an example of a sticky footer:

Sticky footer

Have an email sign up

The footer can also be used to gather more emails. Get people to sign up with a call to action. Check out our listbuilding guide to learn more about using call to actions to get emails.

The blog footer is THE place for links to legal pages

It should also include links to all your legal pages. This includes the following 3:

  • Privacy policy
  • Terms of use
  • Disclaimer policy

Social media links

Social media links are always a must have in the blog footer. The footer is usually where users go to find a business’s social media. 

Instead of just having links, make sure the links are embedded in the logo icons of the respective social media. Read our blog logo guide to learn the best practices to make a quick and powerful logo.

Almost all websites have their social media icons in their footer. So, you should too. Here is an example of a blog footer [Hubspot], that displays its social media links extremely well:

social media links in blog footer

Organize links to make them user friendly

Depending on the website, you might end up with several links. 

And that will be quite confusing to go through, especially for users. 

So, create columns, and rows, and organize the links into groups. Here are popular groups that links are usually organized under:

  • Resources [Links to Free OR Premium tools]
  • Resources [Links to blog, whitepapers, case studies, PDFs, templates]
  • Partners [Links to partner pages, partner program signup]
  • Company [Links to about us, Careers, Contact us, team about us]
  • A separate section to display legal pages []Privacy policy, terms of use disclaimer, etc]

A great way to seek guidance on organizing the links is to go check out as many blog footers as possible. You can check out their footers while doing a blog competitor analysis on them as well.

What should you put in the footer of your blog?

The blog footer should have more than just a list of links. Here are other elements to grace your footer with:

Contact information

Contact information is content that you always want to have readily available for your users. 

And so having it on all your pages would be the best solution. 

But, sometimes, having contact information in the header may not look the best. 

So, the best place to place your contact information is in the blog footer. 

What contact information should you include?

  • Name: The name of your blog
  • Business address [with link to Google maps for directions]: If you have an in-person location, it’s best to display it in the footer so users have easy access to it
  • Phone number: Your business number
  • Email: Your business email

Is this required for all blogs? No. But if you a solar blogger, and want to potentially be reached out to by companies who want to hire you as a freelancer, this will make that happen with a higher probability.

Have a copyright notice

Every website, not just blogs, has a copyright notice within its footer. 

A simple ©, copyright icon along with your business name is needed. So, no one will plagiarise your site. Check out the copyright notice of Blog Tyrant:

copyright in footer

Add your logo to the blog footer

Having your logo within your blog footer helps with the overall branding of your site. 

Having the logo present in more places will give users more experiences in remembering it. Not to mention that it looks cool. Remember Backlinko from before? See how their logo makes their footer so much better:

logo in a footer

Have a site search tool

Having a site search tool can be beneficial if your site has a product catalogue or several pages. 

It will be much easier for a user to use the search bar to search through your blog/ website. It’s not necessary but a nice add on to the footer. Check out Ahref’s footer and their site search bar:

site search bar in a footer

Show off your certifications/ awards in the blog footer

Since the footer is part of all pages, showcase your certifications, awards, and even any membership logos. 

This provides more credibility to your site, and immediately builds more trust for you. 

Remember WP Beginner from before? They also show off their awards and features in the form of a bar at the top of the footer.

Featured bar in footer

Blog footer SEO

The footer should have all your main keywords [Don’t overstuff], since it is part of every page, and will provide a small SEO boost. 

It’ll be a small boost because, in the past, websites have abused the algorithm by overstuffing the footer with keywords. 

So, now, Google doesn’t consider the links in your footer to have as much weight as they do in the body of your web page. In fact, if you do bother abusing your footer by spamming links in it, Google will penalize you.

Check out our blog post SEO guide to learn the most important & impactful SEO concepts.

Have a link to your sitemap in the footer

The sitemap is a backend page that displays the entire structure of your site. Google search console uses the sitemap to have an idea of your entire site structure.

A sitemap helps with your SEO. So, take your domain, add a slash ‘/’, and then type in sitemap.xml. For example, if your domain is www.ebizlr.com, type in www.ebizlr.com/sitemap.xml

Take this link and add it in your footer to so Google can always have easy access to it.

57 Blog Footer Examples [For Blogs]

Here are 57 examples of footers that belong to blogs. Specifically, blogs. Footers vary from site to site, and you can try countless designs and make something unique. But, it’s better to stick with what works. Especially for blogs. These blog footer examples work best for blogs and suit them well.

footer example 1
1. GoogleSearchCentralBlog
footer example 2
2. Canva
footer example 3
3. Wix
footer example 4
4. HubSpot
footer example 5
5. WordStream
footer example 6
6. SmartBlogger
footer example 7
7. MasterClass
footer example 8
8. Ahref’s
footer example 9
9. Grammarly
footer example 10
10. BlogTyrant
footer example 11
11. WebFlow
footer example 12
12. Hostinger
footer example 13
13. TheBlogStarter
footer example 14
14. Thinkific
footer example 15
15. OptinMonster
footer example 16
16. QuickSprout
footer example 17
17. TheContentPanel
footer example 18
18. OmniKick
footer example 19
19. AdamEnfroy
footer example 20
20. Themeisle
footer example 21
21. BloggingWizard
footer example 22
22. Contentellect
footer example 23
23. MargaretBourne
footer example 24
24. SEO.com
footer example 25
25. SheMeansBlogging
footer example 26
26. DuctTapeMarketing
footer example 27
27. MarketingInsiderGroup
footer example 28
28. ContentPowered
footer example 29
29. FirstSiteGuide
footer example 30
30. BuzzSumo
footer example 31
31. TwinsMommy
footer example 32
32. JeffBullas
footer example 33
33. Moz
footer example 34
34. DigitalMarketer
footer example 35
35. SearchEngineJournal
footer example 36
36. ElegantThemes
footer example 37
37. ThriveAgency
footer example 38
38. Copy.ai
footer example 39
39. Ghost.org
footer example 40
40. SEMRush
footer example 41
41. Kinsta
footer example 42
42. Entrepreneur
footer example 43
43. HostPapa
footer example 44
44. GrowthMarketingPro
footer example 45
45. NealSchaffer
footer example 46
46. MillennialMoney
footer example 47
47. SaveTheStudent
footer example 48
48. CodeInWP
footer example 49
49. Bramework
footer example 50
50. TheWritePractice
footer example 51
51. BrightEdge
footer example 52
52. MailChimp
footer example 53
53. RyRob
footer example 54
54. SmartPassiveIncome
footer example 55
55. GoodFinancialCents
footer example 56
56. CopyBlogger
footer example 57
57. Engadget

15 Mobile Footer Examples

Here are 15 examples of mobile footers that can be used for inspiration:

mobile footer example 1
1. Engadget
mobile footer example 2
2. Canva
mobile footer example 3
3. CopyBlogger
mobile footer example 4
4. SmartPassiveIncome
mobile footer example 5
5. BrightEdge
mobile footer example 6
6. CodeInWP
mobile footer example 7
7. SaveTheStudent
mobile footer example 8
8. Kinsta
mobile footer example 9
9. SEMRush
mobile footer example 10
10. Ghost.org
mobile footer example 11
11. SearchEngineJournal
mobile footer example 12
12. Moz

FAQ

What is a blog footer?

A website blog footer is the bottom crust of every page of a website. As the name suggests, the footer stands for the foot. 

And the footer is essentially the feet of a website.

What are the benefits of having a footer?

The main benefit of having a blog footer is to have all your important links in one place, in a well organized manner for users to access. 

It also provides SEO benefits, as these links are internal links [Though they don’t hold as much weight when they’re part of the footer]. 

It’s also the perfect place to include any information you would want the user to have easy access to, that would otherwise be awkward to place elsewhere on a web page. 

What should the blog footer include at the bare minimum?

The blog footer should include, at the bare minimum, your business name, logo, copyright notice, links to legal pages, contact information, and the header navigational links.

How big should the blog footer be?

The blog footer doesn’t need to be of a specific size. It can be large or small. What matters is whether it contains all the necessary links and information needed [Mentioned in the article]

Should a blog have a footer?

Yes a blog should have a footer to display important links, social media links, and legal pages

What should you write in a footer?

You should write a mission statement along with your logo and have links to important pages.