How to Remove the Header + Footer from a Single Page in Squarespace

 
 

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 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 3 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? Good.

Below, I have a snippet for both the Beford theme family and the Brine theme family. If you have no idea what I mean by that, that's fine! Check out my Getting Started with CSS guide to get the low down on what that difference means for your code, and to see what this code looks like in action:, click the button below to be directed to the landing page I created:

Anywho, when you are ready, check out the video tutorial; the copy and paste codes are below. Have fun!

Adding This Code to Your Entire Site

Bedford Family Templates

#header, #mobile.bar, #footer {
display: none !important;
}

Brine Family Templates

.Header, .Footer, .Mobile-bar{
     display:none !important;
     }

Adding This Code to One Page

Use "style brackets" in your "Header Page Code Injection", located on the advanced tab of the page menu.

Bedford Family Templates

<style>
#header, #mobile.bar, #footer {
display: none !important;
}
</style>

Brine Family Templates

<style>
.Header, .Footer, .Mobile-bar{
     display:none !important;
     }
</style>

Yup - it’s that easy! All you need to do is center it between two html style brackets and the CSS will apply to that page only.

Now go forth and build that email list!

And when you are ready to brag about your landing page to the rest of the world wide web, post it below so other folks can be inspired :)