Lesson 2: What goes in your footer?

 

The space at the bottom of your website is known as the footer, and you might have already set the colour of it in the Style Editor or added some info to it. But there's also a lot of potential for this area of your website to include a lot of useful links, extra branding, and more information than your Main Navigation can hold. 

In this lesson we will:

  1. Discuss what can go on your footer

  2. Look at different ways to design your footer and add content

  3. Design your own footer!

 

As mentioned, a footer can hold a lot of information - more than the main navigation, and visitors expect to be able to scroll to the bottom of a website to find certain pieces of info or links they need. 

Here are some commonly found footer items that we've been taught to expect:

  • visible contact info, like an email address or phone number

  • links to FAQ, Shipping & Returns, or other additional info

  • subscription boxes for a mailing list

  • social media handles/ links

  • location/ address

  • support or help section

  • copyright or all rights reserved 

Now whether you include any or all of these items is totally up to you, but it is worth remembering what people have been taught what to expect on websites, and what they might be looking for on your website. With that in mind, you can curate your footer to match.

 

With Squarespace, you can treat your footer like any other page in some ways, and can add any of the content blocks to it. That means you don't just have to add pages to the Footer index (found under the Main Navigation in many, but not all, templates).

That means you can add any of these things: 

  • photos

  • videos

  • live preview of social feeds

  • newsletter blocks

  • donation buttons

  • graphs

  • music

  • ANYTHING!

Yep, you really can add all of these things, and we suggest doing so! Even adding a secondary logo or monogram from your brand can bring some visual detail.

Here are some examples: 

1. Company info + extra links
True to style, our own footer is very clean and to the point. With social links taking priority, and a few additional links, we house all of our footer content with a 2-column grid that is very large on the left-hand side and a little slimmer on the right-hand side. We've done that by simply adjusting the width of the spacers that are above the content blocks, and have then removed the spacers before saving it. 

Footer.png

2. Live Instagram feed + extra links
Our clients at Mint Club Athletics wanted to showcase their Instagram in an easy to find location, and the footer was the best spot for it. With simple links and information underneath the feed, the hierarchy is visually clear, but other info is still clear. 

3. Newsletter, address + more
Werklab, here in Vancouver, also have a Squarespace website, and they've added in a newsletter block, as well as a live Instagram feed. 

 

Much like any of the other pages, you edit the footer by hovering over the area and clicking "Edit". Once in there, you can add your content blocks exactly how you would on a page - and here we definitely suggest using the spacers to create margins or a grid, as the small space can make it hard to move around so much info, or create order and the size you want. 

Actions we suggest taking to create your own footer:

1. Delete "Powered by Squarespace" (we give major eye rolls to anyone who doesn't do this...)

2. Remove any other info that's in the footer because of the template, unless you want to keep it of course!

3. Add 3 spacers and move them next to each other to create the start of a grid

4. Adjust those spacers if and when you need to create a small section for any of your content blocks

5. Add content blocks and start building your footer!

6. Keep playing - we genuinely go through so many layout options for footers, and there really is no wrong answer, so play until you find something that suits you best!