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 “Site Styles” 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. Refer back to your wireframes and sitemap to determine what could potentially go into your footer!
In this lesson we will:
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
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:
live preview of social feeds
Yep, you really can add all of these things! 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.
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 is a result of the template that's in the footer, unless you want to keep it, of course!
3. Add at least 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 to your grid 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!
Great job! You’ve made it so far and your website is almost done! But the process of having a site is never really fully finished. We are constantly going in and modifying what we’ve created to make it the best to our own abilities. So don’t fret if you feel like you want to keep playing and testing. If, however, you’re ready for your site to go live, head to the next module!