How to remove the header + footer from a single page in Squarespace
This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes
This tutorial is a total game changer for building your email list. You need a good landing page to get those conversions, and I am here to teach you how to make a fabulous one!
With an email list that grows every day, I know a few things about getting subscribers: Any good landing page needs to have two major things:
1 - A really good call-to-action
Tell them what to do.
It sounds simple, but so many people make this part soooo boring! It's 2019, and a generic "subscribe" ain't gunna cut it.
Your call to action need to be specific:
Sign up now.
Download now.
Get the goods.
Enroll.
Make it so.
You need to inspire action in just a few words, and sure, you can be clever about it if that fits your style!
Just make sure you specifically tell them what to do, and if you can add an action word like now or instant to see that conversion rate soar.
2 - Only one option
If you give people three things to do, its harder to make them do the one thing you want them to.
A good landing page gives people one and only one option - convert.
It's that simple!
Remove your navigation, headers and footers, and people won't be too distracted by the rest of your site to convert!
And that brings me to today's CSS tutorial - how to remove the header and footer of one single page on your Squarespace site.
Ready to dive into the details?
Check out this tutorial video to see how to create a landing page in Squarepsace step by super simple step.
Below, I have a snippet for Bedford sites, Brine sites and for any Squarespace 7.1 template.
Pro Tip: If you have no idea what I mean by that, don’t worry! Check out my free class on getting started with CSS for Squarespace. It’s a quick 15 minute breakdown of the basics, including why it is so important for you to know what template you are using before you start using any code.
Adding This Code to One Page?
Use "style brackets" in your "Page Header Code Injection", located on the advanced tab of the page menu.
Settings > Advanced > Page Header Code Injection
More of a visual learner? Check out this tutorial on how to install code on a single page in Squarespace.
BEDFORD FAMILY TEMPLATES
<style>#header, #mobile.bar, #footer {display: none !important; }</style>
BRINE FAMILY TEMPLATES
<style>.Header, .Footer, .Mobile-bar{display:none !important; }</style>
ANY SQUARESPACE 7.1 SITE
<style>.header, #footer-sections {display:none!important;}</style>
