How to Create a Landing Page in Squarespace

CSS

Apr 14

In this blog post, I’ll show you two methods for creating a landing page on your Squarespace website. A landing page is a one-page website that's used for sales pages, product launches, crowdfunding campaigns and more; any page where you don't want your normal header or footer to show up on the page. Typically you’d want to remove four things:

header (logo, navigation, etc) on desktop
header on mobile
announcement bar
footer

Follow along in this video walkthrough, then grab the code snippets below. The code in this post is specific to Squarespace 7.1, so if you are on an older version of Squarespace you’ll need to use different code specific to your template.

How to Create a Landing Page - Squarespace Business Plan or Higher

I like using this code because it is only loaded when this page is loaded. You’ll paste this code into your Advanced Page Settings for the particular page you want to target:

<style> 
  .header, footer, .Mobile-bar—top, .sqs-announcement-bar-custom-location
 {
    display: none!important;
  }
</style>

How to Create a Landing Page - Squarespace Personal Plan

On the Personal Plan of Squarespace, you don’t have access to Code Injection, so you’ll need to first get the Collection-ID of the page you want to use as a landing page, then paste this code into Custom CSS, swapping out the Collection-ID with the specific one on your website. Here’s the method I use for finding collection and block IDs in Squarespace.

/* comment here with what page this applies to */
#your-collection-id-here {
  .header, footer, .Mobile-bar—top, .sqs-announcement-bar-custom-location
 {
    display: none!important;
  }
}

Both these methods accomplish the same thing - removing the header and footer from a page on your Squarespace website to create a landing page. View a before and after here: