How to Hide the Header and Footer in Squarespace
• This article contains affiliate links •
Great news - Squarespace recently released a new feature, enabling you to easily hide your website header and/or footer on individual pages.
Previously, this used to require adding some CSS code to your site, but now, you can do it in just a few clicks.
Save 10% off your first subscription of a Squarespace website by using the code PAULINE10
Why might you want to hide your header and footer?
The classic reason to hide a header and footer on a page is when you want to restrict the number of choices a visitor has, for what to do next.
Pages like these are often called landing pages or squeeze pages, and the marketing concept here is that your visitor either takes the action you want, or they leave.
(Note: some website beginners say “landing page” when they mean the “home page” of a website. I’m not talking about your home page here! Still confused? Checkout my Author’s Guide to Website Terminology)
Most often, we see landing pages used to gather email addresses (= newsletter signups), or assertively promote a limited time action, for example during a course launch or to offer an ARC of your book. The website owner is trying to minimize distractions, giving the visitor one simple choice.
Squarespace also describes a landing page as a visually striking way to convey important information or make announcements on your site, so “website coming soon” pages might also fall into this category.
Special note for author websites:
Be careful linking from your KDP books to landing pages on your website that are purely intended to force an email list sign up. This contravenes KDP policies and I explain more about external links in your Kindle books here.
How to hide your Squarespace header and / or footer
Hover over your list of pages in the left side admin panel, until you see the “gear” icon for the relevant page:
Click the navigation tab, and simply toggle the header and footer on and off:
Simple, right?
What if you only want to hide part of the footer?
I often build footers for client websites that have multiple pieces in them, for example an email newsletter signup form, an Instagram feed, and legal / copyright information. (See more ideas: What to put in your author website footer).
There will be some pages on your website where you don’t want all of this to show up. A good example would be, if you show a confirmation page to new email list subscribers, they don’t need to see your signup form again.
My suggested workaround is:
For the page in question, create a “pretend footer” section at the bottom, containing only the footer parts that you do want to appear
Then, hide the real footer on this page, using the steps shown above
Notes: although Squarespace has a handy feature allowing you to copy and re-use page sections in other places, unfortunately this doesn’t apply to footer sections, so you’ll need to make your “pretend footer” from scratch. As a professional Squarespace designer, I tend to use CSS code to hide parts of the footer, but the workaround here will likely be easier for you to implement.
Advanced: how to hide the header button on one page
It’s likely that your Squarespace website has one important Call to Action button in your website header. For example, my client Gwen Hyman of workshop.company has “Contact” on each of her pages. But she didn’t want this button to show up on her actual Contact page.
For this scenario, I did use some custom CSS code. This is NOT a beginner topic, and you’ll probably want to refer to my best advice for getting started with CSS in Squarespace, where I link you to some expert teachers for this topic.
Once you’re familiar with the basic approach to adding code in Squarespace:
Use the Find Squarespace IDs plugin (explained on that getting started page) to copy the Collection ID for your header section on the page that you’re targeting
Adapt this code so it contains your Collection ID:
#collection-659d7e6683fa955aa4ed7999 .header-actions--right .header-actions-action {display : none; }Add it to the Custom CSS panel for your Squarespace site, and click Save
•
Small touches like this can make a big difference in the overall experience for your website visitor, in turn getting you more of the results that you want.
Want to give Squarespace a try? Save 10% off your first subscription of a Squarespace website by using the code PAULINE10
•
Would you like me to design and build your Squarespace website?
Prefer not to spend your time and energy navigating design issues like this? As a professional specializing in strategic websites for authors and solopreneurs with books, I’m an expert in the features you need for a website that delights your audience and gets business results. If you’d like niche expertise, top quality design, and your technical headaches solved, consider hiring me.
After careful preparation together, I’ll design, build, and launch your site in (usually) just 2 weeks. Learn more, and then schedule a complimentary consultation.
