Squarespace Hack: How to Create a Custom Landing Page in 3 Steps
First thing’s first: what exactly is a landing page?
A landing page is a simple webpage that offers your visitors something of value (a lead magnet, like an ebook, checklist, etc.) in exchange for their information (at minimum, their email address).
Landing pages are an important tool for growing your email list.
There are a number of ways to create landing pages, such as with your email marketing service provider (Flodesk, ConvertKit, MailChimp, etc.) or with a landing page builder, like LeadPages. However, LeadPages starts at $25+/month and email marketing tools have limited layouts and styling options. So...
That’s where Squarespace comes in!
If you have a Squarespace website, you can easily create simple, custom landing pages, completely for free. (By free, I mean it’s included in your SS plan.) AND they will already match the design of your website. Win-win.
But, wait...
Squarespace has the option for Cover Pages (their version of a landing page), so why would you want to create a custom landing page?
Cover Pages don’t allow you to embed a form from your email marketing platform. You only have the option to link a button or add a Squarespace form. And if you use an email software other than MailChimp, you have to create a roundabout way to send the subscriber’s info to your list. *Cue sad trombone*
By creating a custom landing page, you have complete control over the layout, you can embed a form from any email marketing provider, add as many content blocks as you like, AND it will automatically match your brand.
Ready to create your custom landing page?
All you need is a Squarespace account and a few snippets of code — don’t let that scare you, though. I’ll give you the exact code you need and tell you where to put it. All you gotta do is copy and paste!
Note: This tutorial works for Squarespace 7.1 and most themes on Squarespace 7.0.
Here’s how to hack a custom landing page in Squarespace
1) Create a new page
Login to your Squarespace account and click ‘Pages.’
Click the plus sign (+) next to Not Linked to create a new page that won’t be listed in your navigation. (You can always drag it into your navigation if you want it listed later.) Select ‘Page.’
Enter a title for your new page, such as the name of your offer or lead magnet, select the ‘Blank’ template and then click “Start Editing.”
2) Build the page with content blocks
Start building out your landing page by adding content blocks and entering your text and images.
To add a form from your email service provider (ESP) such as MailChimp or Flodesk, first create the form in your ESP and then copy the embed code.
Then add a Code block on your Squarespace landing page and paste the embed code into it.
Like this:
To make the form centered on the page, simply add <center> before the embed code and </center> after the embed code.
Click ‘Apply.’
Note: Squarespace disables the preview for embedded code while you’re logged in and editing your website. To see what your form looks like, just save your landing page and navigate to the page in another tab or window by entering your domain name/landing-page-name (e.g. www.mydomain.com/freebie).
3) Remove the header and footer
A best practice for landing pages is to remove anything that might distract your viewer from the goal of the page. That includes removing the navigation menu, footer areas, and announcement bars (if enabled on your site).
To do that, you need a bit of code:
<!-- Hide footer & pre-footer code -->
<style>
#footer, #preFooter, #footer-sections {
display: none;
}
</style>
<!-- Hide header & navigation -->
<style>
#header { display: none }
#siteWrapper {background-color:#f6f7f9 !important;}
</style>
<!-- Hide announcement bar -->
<style>
.sqs-announcement-bar {
display: none !important
}
</style>Copy the code from above and then navigate to the Settings menu for your landing page by clicking the gear icon next to your page in the left-hand menu, or saving your page and selecting “Settings” from the Page Content options.
With the Settings menu open, click “Advanced” and paste the code into the Page Header Code Injection field. Click “Save.”
Important: Make sure you paste the code in the Page Header and NOT the Code Injection for your whole site, or it will remove the header/footer across your website.
Note: To change the background color of your landing page, enter the six-digit hex code of the color you want where it says “background-color:#f6f7f9”.
Disclaimer: This code may not work with all Squarespace 7.0 themes. I was using the Bryant theme when I created this tutorial. Any themes in the Bedford family should work, which includes the Anya, Bedford, Bryant, and Hayden themes. If it’s not working with your site’s theme, try searching in the SS forum “code to remove header and footer your theme name.”
Your page should automatically refresh with your navigation menu, header, footer, and announcement bars hidden.
Like this:
Since the footer section with your copyright info was removed, I recommend adding it to the bottom of your landing page with a text block.
Also, since we removed the header, I recommend adding your logo to the page via an image block.
Et voilà — you now have a custom landing page! 🙌 Wasn’t that easy?
YOU SCROLLED *THIS* FAR?!
Here’s a freebie just for you…
SCARY BUT TRUE…
You only have 0.05 seconds to make an impression with your website.
I didn’t make the rules. But I *did* make this guide to help you make the most of that first impression!
People are craving authenticity more than ever (thanks, social media and AI...) so anything you can do to show up as more real, more human, more *YOU* will foster a greater sense of connection with your audience.
Download the free guide for three done-in-a-day ways to take your website from generic to genuine.
I’d love to see the custom Squarespace landing page that you create—share a link in the comments below!
Save this post for later… Pin it! 📌
