How To Create Cover Pages In Squarespace 7.1

Abi Bacon

Squarespace Developer based in Southampton, UK

With the move to 7.1 we lost Cover Pages being a design option. A lot of my clients want to achieve a similar style for landing pages, lead magnets etc. Luckily we can do this with a little bit of Custom CSS.

A bonus of using 7.1 to create these pages is that we actually have much more control over the design of the page. Before with 7.0 Cover Pages you could only add one CTA and some copy, you couldn’t add additional blocks. Now we can design this page like we can any other, using fluid engine.

Check out the page here.

Lets Get Building

1. Create a new page

2. Add your content to a section (be mindful of how much content you’re adding)

3. Add the below CSS to your site

Remove Header & Footer

#collection-id {
 header, footer {
 display: none;
 }
 .page-section {
 height: 100vh;
 }
}

Remove Navigation & Footer, Keep Logo

#collection-id {
  .header-nav, .header-actions, .header-burger, footer {
    display: none;
  }
  .page-section {
    height: 100vh;
  } 
}

In terms of where we place this code, we have two options. We can target the pages Collection ID and add to Custom CSS Panel or wrap in <style> tags and add to Page Header Injection. I’d recommend adding it to the Page Header Injection as it’s a piece of code specifically targeting a certain page, this then keeps your Custom CSS panel less cluttered.