How to Quickly Create a Landing Page on Squarespace

In my last post, I talked about how you can use Squarespace to grow your email list and I mentioned that you can turn any page into a landing page. In today's post, I'm taking you behind the scenes on my demo website on Squarespace to show you how you can turn a regular page or an index page into a landing page for your lead magnet by removing the header and the footer.

But, before getting into the video, let's back up a moment and explain what's a landing page.

What is a landing page?

A landing page is simply a page on your website that visitors land on from social media, advertising campaigns, guest posts. Now, technically, any page on your site can be a landing page. For example, once someone clicks on a pin that links to your blog post, that blog post becomes a landing page.

However, in marketing speak, a landing page is a page that's designed with a sole purpose in mind: getting visitors to convert to subscribers, clients, or customers by signing up for your email list, booking a call, registering for a webinar, etc.

Usually, a dedicated landing page has no distractions, which means elements like the header, the footer, social media icons are removed in order to reduce the chances of visitors leaving the page.

SUBSCRIBE TO MY YOUTUBE CHANNEL

So, if you've been using Squarespace for a while, you've probably stumbled onto a tutorial or two that shows you to use the Cover Pages features to make simple landing pages. And while there is absolutely nothing wrong with that method, there is a reason I prefer using this method. The reason is quite simple: regular pages are more flexible and I can add any content block as opposed to cover pages where you're only limited to text and buttons.

And even though you can add text and buttons and a sign up form, you don't really have a lot of control over it. In the end, it's just a matter of personal preference and I thought I'd show you a more flexible way to create landing pages in Squarespace.

Learn how to create a landing page on Squarespace and ditch LeadPages for good! |Squarespace tutorial | #squarespacetips

For starters, you're going to go to the unlinked section and click on the plus sign and then you can either select the page or the index page. The difference between them is personal preference -- I would select the regular page if you're making like a landing page for a checklist or lead magnet or a freebie. But if you're making a sales page and you want to sell like a course or your services or programs then I would choose the index page. Index pages allow you to create those full width sections that make it easy to create transitions and break up a long sales page.

For this tutorial, I'm going to select the blank layout and then we can start editing this page as we would with any normal page.

Add a heading that describes your freebie
Add a paragraph that explains the freebie in more details
It's a good idea to also add a few bullet points that stress benefits of the freebie

You can also add an image to give them a visual representation of what they will get.

The most important thing to add though, is the newsletter form, so let's go ahead and add that block now. Under storage, you can either choose the Squarespace email campaigns or you can connect it to MailChimp or use Zapier to connect it to other services.

In this example, I'm just going to connect it to my MailChimp account. Once you've connected the form to your email service provider, click on apply, then click Save and that's that as far as the page design goes.

With that out of the way, now we need to remove the header and the footer. You'll do this by going to the page and then clicking on the little cogwheel. Under Advanced settings tab, you're going to paste this little bit of code:

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

The code tells the page not to display the header, the footer, the mobile bar, and the Squarespace announcement bar. Then, click on Save and once the page refreshes, you should see no header and no footer. The code above will work for any template in the Brine family.

If you want to remove the header and the footer on Bedford or Pacific template (and any templates in those families), replace the code above with this one:

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

All that's left to do now, is to test your form and make sure it works. Congrats babe, you've just made a simple landing page in Squarespace! Now, it's time to go share that page all over your social media, kick off your heels, celebrate with a mimosa, and watch the subscribers roll in.

That's it for today's post. Let me know in the comments below what type of freebie you're promoting with your new landing page!

Launch a website that sells with the help of my website launch roadmap! Sign up below and I’ll send it to you ASAP!

More posts like this one:

BLOG