Have you ever wanted to hide your header and footer on Squarespace to make you're own landing page without using a program like LeadPages or OptinMonster or a Cover Page template?

In this blog post, I'm going to show you how you can create a page in Squarespace landing page that hides your header and footer. This is separate than a Squarespace Cover Page.

I created this page for my instagram account.

It's on Squarespace and it's essentially my "all the links" page which is very similar to a site called linktr.ee.

Since I designed it on Squarespace, I'm able to have more flexibility without having the header and footer.

I have had so many people ask me how to do this so in the video below I'm going to show you real quick how I did that.

Here are the steps:

1. Hit the little settings icon on your page.

2. Click on advanced.

3. Insert this code. You can just copy and paste it and use it for your own.

If you are using the Brine template, use this code that Felicia Adelina found and commented with on my youtube video.

<style>
     #footerBlocksTop, #footerBlocksMiddle, #footerBlocksBottom { 
     display: none !important;
     } 
     .sqs-announcement-bar-custom-location {
     display: none !important;
     }
     .Header, .Header--top {
     display: none !important;
     }
     .Header-inner, .Header-inner--bottom; {
     display: none !important;
     }
     
     .Header-inner, .Header-inner--bottom {
     display: none !important;
     }
     .Footer-inner, .clear {
     display: none !important;
     }
     style>

NOTE: if you still wanted to have the prefooter and your footer there you will delete that part of the code to not include hiding it.

If you're using a template from inside the Brine family, Brine uses different IDs and Classes than other templates.

In the case of the header and footer, it uses classes. Try simplifying your code down a bit with just:

<style> #footerBlocksTop, #footerBlocksMiddle, #footerBlocksBottom {       display: none !important;      }       .sqs-announcement-bar-custom-location {      display: none !important;      }      .Header, .Header--top {      display: none !important;      }      .Header-inner, .Header-inner--bottom; {      display: none !important;      }            .Header-inner, .Header-inner--bottom {      display: none !important;      }      .Footer-inner, .clear {      display: none !important;      }      style>

4. Once you add the code, hit save and that's it.

You can create pages like this for things like:

• opt-in forms

• webinar signups

• thank you pages

• sales pages

• and etc.

I know when I was trying to figure this out I could not find anything so hopefully that was helpful for you and it helps save you time.

Create a page that you want to share? Share the link below!! If you have any questions just leave them below!

You Might Also Enjoy:

Hey there, I'm Lindsey the online educator behind hazelhaven.com. I help small business owners create video content with confidence. I'm an introverted extrovert who loves dark chocolate and a strong cup of coffee. Be sure to click here to learn about my favorite tools and resources that I use to run my business everyday!