anika-samples-150px.png

Hey, I’m Anika.

Welcome! This blog is an exploration of my passions: design, branding, entrepreneurship, and mindfulness — and how they all come together. 

Squarespace Hack: How to Create a Custom Landing Page in 3 Steps

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 (e.g. 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 (e.g. ConvertKit, MailChimp, etc.) or with a landing page builder, like LeadPages. However, LeadPages starts at $25+/month and ConvertKit has 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 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 jerry-rig it to send the subscriber’s info to your list. Womp womp. 

By creating a custom landing page, you have complete control over the layout, you can embed a form from any email marketing provider, and your landing page 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! 


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‘.

Squarespace Hack: How to Create a Custom Landing Page (for free!)

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.”

creating-custom-landing-pages-in-squarespace2.png

 

2) Build the page with content blocks

Start building out your landing page by adding content blocks and entering your text and images. 

creating-custom-landing-pages-in-squarespace3.png

To add a form from your email service provider (ESP) such as MailChimp, ConvertKit, etc., 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:

creating-custom-landing-pages-in-squarespace5.png

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.incandescentcreative.com/brand-forecaster).

 

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 {
     > 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.”

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:#XXXXXX”.

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. 

creating-custom-landing-pages-in-squarespace8.png

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? 

creating-custom-landing-pages-in-squarespace9.png

See my custom landing page live at www.incandescentcreative.com/brand-forecaster 
 


I’d love to see the custom Squarespace landing page that you create — share a link in the comments below!


 
6 Common Branding Mistakes Small Business Owners Make

6 Common Branding Mistakes Small Business Owners Make

Client Avatar 101: What It Is & Why You Need One

Client Avatar 101: What It Is & Why You Need One