HOW TO CREATE A SIMPLE LANDING PAGE WITH SQUARESPACE

how to create a landing page in squarespace

If you want to dramatically improve your marketing ROI, creating a landing page (or pages) would be a great way to do it.

Generally, if you use any kinds of social media ads, it is best to direct traffic to a landing page for maximum conversion.

 

WHAT IS A LANDING PAGE?

In the words of Wikipedia, the most straight-forward explanation of a landing page is this:

In online marketing, a landing page, sometimes known as a "lead capture page", "static page" or a "lander", or a "destination page", is a single web page that appears in response to clicking on a search engine optimized search result or an online advertisement.

 

Landing pages are designed to get your visitors to complete a specific action step, such as:

  • Subscribe to your email list

  • Sign up for your event

  • Purchase your product


The list goes on, but these are some of the most common uses of a landing page.

There are several ways to create a landing page. Some can be quite expensive and complex (like LeadPages).

But the way I’m about to show you is really simple and doesn’t cost you anything extra outside of your Squarespace subscription!

Plus, when you do it on your Squarespace website, the landing page will match the rest of your site design, which makes for a more professional and cohesive branding experience.

 

CREATING A LANDING PAGE IN SQUARESPACE

To begin, open your Squarespace admin panel.

Just so you know, you have two options to do this.

One is to use a Cover Page, but that’s not what I’m about to show you. The Cover Page has its purposes but I find it very limiting. It’s best for things like creating a Coming Soon Page, but for capturing leads and anything else, I prefer more options to customize my landing page.

So that’s what I’m going to teach you here. All you need is a bit of code and you’ll have yourself a custom made landing page. Don’t worry, I’ll provide the exact code and I’ll tell you exactly where you can simply copy and paste it.

1. CREATE A NEW PAGE

First, log into your Squarespace account and go to Pages.

Click on the + sign under the NOT LINKED section and select Page. Creating it under ‘not linked’ means the page won’t show in your navigation menu. If you do want it to show there, you can simply drag it up to the MAIN NAVIGATION area at the top after you’re finished creating your new page.

custom landing page in Squarespace
 

Now you’ll be taken to naming your page and choosing your layout. I like to always leave it blank so I can fully customize my pages.

Once you’ve entered your title, click START EDITING.

landing page in Squarespace

2. CUSTOMIZE YOUR PAGE

Now you can build your new page by adding content blocks. Use the blocks as needed to add in your text and images as well as sign up forms or whatever else you need on your page. This obviously depends on what you’re promoting.

how to create a landing page in Squarespace
 

After you’re done creating and designing your page, move on to the final step.

 

3. REMOVE HEADER AND FOOTER

In case you’re not aware, landing pages typically do not have headers and footers. The reason is because like I mentioned at the beginning of this post, they’re meant to get visitors to complete a specific action step. And that means eliminating any distractions that might take the visitor away from your landing page before they complete that action step.

Since having headers and footers means giving your visitors more options to click on, you’ll want to remove them altogether from this page.

In order to do that, you’ll need to enter some code.

Click on the cog to open up the Settings of your page and go to the Advanced tab.

Now copy this code and paste it in under PAGE HEADER CODE INJECTION:

 

<!-- Hide footer & pre-footer code -->

<style>

             .Footer{

             display: none !important; 

             }

             </style>

 

<!-- Hide header & navigation -->

<style>

             .Header {

               display: none !important;

             }

             .Mobile-bar {

               display: none !important;

             }

             body {

               margin-top: 0 !important;

             }

</style>

 

If you’re using an announcement bar on your site, you’ll also want to add this code below:

 

<!-- Hide announcement bar -->

<style>

.sqs-announcement-bar {

display: none !important

}

</style>

creating a landing page in Squarespace
 

Click SAVE and you’re done! Wasn’t the easy?

Now when you share the link to your new custom landing page, it will look the part.

If you’re used this tutorial to create your own landing page, I’ll love to see it! Share the link to it below. :)