How to remove the header and/or footer from a single page in Squarespace 7.0, 7.1 + Fluid Engine
Don’t get us wrong, your website’s header and footer are crucial elements that are key for your visitors to navigate smoothly 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 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 towards your offers.
This is why removing distracting elements like your header and/or footer from landing pages, sales pages, freebie opt-ins, or Instagram links pages is a pretty smart business move that is likely to increase your overall conversions, sign-ups, and sales! 💸
Indeed, without having access to a header or footer with all kinds of links that can swiftly whisk them away from your offers, your visitors will have no choice but to focus on the message you're putting out, and no where else to click but on your carefully crafted call-to-action button.
While Squarespace doesn't natively give you the option to remove the header or footer from a particular page on your site, we've put together a handy guide and some copy + paste custom CSS that takes just seconds to implement and does just that!
Ready to boost your sign-ups and sales with distraction-free pages? Dive into our two step tutorial for both Squarespace 7.1 and 7.0 below!
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 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 1 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, and to the specific page from which you want to remove the header and/or footer from.
Click the extensions icon in the top right corner of your browser and find Squarespace ID Finder.
This will automatically bring up all 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, head to Design > Custom CSS.
Now paste in your page/collection ID that you just copied from Squarespace ID Finder, followed by an opened curly bracket {
Squarespace will automatically add a closed curly bracket afterwards }
If you want to apply this CSS to multiple pages, go back to step 2 to retrieve the ID of the next page and paste it after the first collection ID, with a comma between the two. You can add as many pages as you like using this method!
In between the two brackets { }, paste in the relevant piece of code from our list below to remove the header and/or footer from this particular page!
Click Save in the top left and voila! A couple of easy steps and you've got yourself a distraction-free page! 👏
Squarespace 7.1 and Fluid Engine Custom CSS
Note! These pieces of code are compatible with Squarespace 7.1 and Fluid Engine websites only. Not entirely sure which version of Squarespace you're using? Read this post.
Insert the following code after your page/collection ID, in between curly brackets { }
Remove the header AND footer:
.header{display:none}
footer{display:none}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 little tutorial comes in handy to improve your site's conversion rates and get 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 profesh' 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! 👇🏻
