How to Remove the Header (or Footer) from a Page in Squarespace
Donβt get us wrong, your websiteβs header and footer are crucial elements that are key for smooth navigation across your site, but in some scenarios not having a header or footer on a particular page can actually be super beneficial!
Now you might be thinking that it's totally crazy to purposely take away navigation tools from your site visitors, and while it may sound somewhat counterintuitive, sometimes your visitors just need a little extra, distraction-free, direction to gently push them toward your offers.
This is why removing elements like your header and footer from landing pages, sales pages, freebie opt-ins, or Instagram links pages is actually a pretty smart business move that is likely to increase your overall conversions, sign-ups, and sales!
Without having access to a header or footer (with all kinds of links that can swiftly whisk them away), your visitors will have no choice but to focus only on the message you're putting out. The page will feel special and extra important and theyβll have nowhere else to click but on your carefully crafted call-to-action buttons.
And luckily, Squarespace (by the way if you use BIGCATCREATIVE10, you get 10% off your first year!) now makes it easier than ever to accomplish this in version 7.1. Plus, you can still use code to get the same result in version 7.0! We've put together a handy guide to explain the process for both versions along with some copy + paste custom CSS for version 7.0 that takes just seconds to implement.
So, are you ready to boost your sign-ups and sales with distraction-free pages? Dive into our step-by-step walkthrough for both Squarespace 7.1 and 7.0 below!
Removing the Header and/or Footer in Squarespace 7.1
Like we said above, Squarespace now makes it super easy (for anyone using version 7.1) to remove both the Header and Footer from any page on your site without custom code.
Seriously, itβs almost laughable just how simple it is to now achieve this!
All you need to do is navigate to your Pages Panel and click on the cog icon next to the page of your choice to access the Page Settings.
In the Settings window that pops up, click on the Navigation tab.
From here you can toggle on and off the visibility for both the Header and the Footer of that particular page. And make sure to hit Save!
And thatβs all there is to it!
Removing the Header and/or Footer in Squarespace 7.0
If youβre using Squarespace version 7.0, there are a couple of additional steps youβll need to take in order to remove the Header and/or Footer from a page.
But donβt worry, weβre going to walk through everything you need to know and provide you with the exact custom CSS youβll need to get the job done!
Step 1: Get Squarespace ID Finder
Squarespace ID Finder is a Google Chrome extension that allows you to easily find the ID of specific pages, sections, and blocks on your Squarespace site.
It's incredibly helpful for custom CSS customizations that need to target specific elements, and this is what we will be using to find the Page ID we need in order to remove the header and/or footer from specific pages on our site.
You will need to use Chrome as your browser for this tutorial (if you aren't already!), and step one will be to install the Squarespace ID finder extension.
Click here and follow the instructions to install the extension.
Step 2: Find your specific page ID
Once you have installed Squarespace ID Finder, head to your Squarespace website, navigate to the Pages Panel and then find and click on the specific page from which you want to remove the header and/or footer from.
You can then click the extensions icon in the top right corner of your browser and find Squarespace ID Finder.
This will automatically bring up all of the IDs on your page.
The Page ID is actually called the Collection ID, and is denoted by a yellow color.
Click on your page ID (you'll generally find it in the top left of the page) to copy it to your clipboard.
In this case, our page ID is: #collection-64372925905fa64a81238144
Step 3: Add your code
In your websiteβs main menu navigate to the Pages Panel and scroll to the very bottom.
Under where it says βUtilitiesβ click on the Website Tools tab.
From here click on Custom CSS.
This is where you can paste in the Page ID that you just copied from Squarespace ID Finder, followed by an opened curly bracket: {
Squarespace will automatically add the closed curly bracket after for you: }
If you want to apply this code to multiple pages, you can go back to step 2 and follow the instructions to retrieve the Page ID of a second page. Youβll then paste that Page ID after the first ID with a comma between the two.
You can add as many pages as youβd like using this method!
Finally, in between the two curly brackets { }, youβll want to paste in the relevant piece of code from our list below to remove the Header and/or Footer from the page (or pages) that you've chosen!
Here's an example of what it might look like:
Click Save in the top left and voila! A couple of easy steps and you've got yourself a distraction-free page! π
Custom CSS for Squarespace 7.0
Important Note: the particular code you need will depend on which Squarespace 7.0 template your site is built on.
If youβre not entirely sure which 7.0 template youβre using, read this post for some help figuring it out.
To remove the Header and/or Footer from a page, insert the following code after your Page ID and in between the curly brackets { }
Brine Template Family
Remove the header AND footer:
.Header, .Footer {display:none !important;}Remove the header only:
.header{display:none}Remove the Footer only:
footer{display:none}Squarespace 7.0 Custom CSS
Note! The particular code you need will depend on what Squarespace 7.0 template your site is built on! Not entirely sure which Squarespace 7.0 template you're using? Read this post.
Insert the following code after your page/collection ID, in between curly brackets { }
Brine Template Family
Remove the header AND footer:
.Header, .Footer {display:none !important;}Remove the header only:
.Header {display:none !important;}Remove the Footer only:
.Footer {display:none !important;}Bedford, Montauk, or Pacific Template Family
Remove the header AND footer:
header#header, footer#footer {display: none !important;}Remove the header only:
header#header {display: none !important;}Remove the footer only:
footer#footer {display: none !important;}Adirondack, Avenue, Aviator, Forte, Skye, Supply, or York Template Family
Remove the header AND footer:
header#header, footer#footer {display: none;}Remove the header only:
header#header {display: none;}Remove the footer only:
footer#footer {display: none;}Farro, or Galapagos Template Family
Remove the header AND footer:
header.header, footer.footer {display: none !important;}Remove the header only:
header.header {display: none !important;}Remove the footer only:
footer.footer {display: none !important;}Wexley, Native, or Ishimoto Template Family
Remove the header AND footer:
div#headerWrapper, div#footerWrapper {display: none;}Remove the header only:
<div#headerWrapper {display: none;}Remove the footer only:
div#footerWrapper {display: none;}We hope this tutorial comes in handy to improve your siteβs conversion rates and gets you on your way to your best sales year yet!
If you need a sales page template ready to go (all code included), check out our Squarespace 7.1 Sales Page Templates here. These have been strategically designed with copy guidelines, call-to-actions, pricing boxes, and loads more professional elements that will boost your sales in no time at all. ο»Ώπο»Ώ
If you want more helpful biz tips to implement on your Squarespace site, check-out the blog posts below! π
3 website pages that will increase your revenue (and you should add today!)
The 5 must-haves on your Sales Page
10 fun customisations for your Header Navigation menu in Squarespace
Why you should stop using Linktree & how to create your own in Squarespace
How to redirect Squarespace forms to a freebie or thank you page
If you liked this post, Pin it to Pinterest! ππ»
