How to create a landing page on Squarespace in 5 easy steps (7.1)
If you’ve been dipping your toes into the world of online marketing for a while you’ve probably heard the term landing page being bandied around.
Apart from being one of those phrases that make people sound like they know what they’re talking about, a landing pages is a powerful tool for your online marketing strategy - in fact around 68% of B2B businesses use landing pages for lead generation, a crucial part of building your email list (if you’re not on it - read this on why building your email list should be your top priority this year!)
In this article I break down…
What a landing page is
Why you need a landing page
(or in reality multiple landing pages) as part of your online marketing strategy,
The different types of landing pages
and how they’re used
Best practices for your squarespace landing page
for landing page design
and of course
The 5 simple steps to creating a landing page on Squarespace
If you’re just interested in how to create a landing page in Squarespace
Otherwise, if you’re interested in learning more about landing pages and how they can help you achieve your goals, let’s get started…
Oh & pst… like all things website, to have a solid foundation you need to get clear on your ideal client first… finding that tricky? Or don’t know where to start? I gotcha covered with my free step by step workbook that takes you by the hand from clueless to crystal clear, giving you the foundation you need to build everything else on!
Get the free workbook here
This post may contain affiliate links. These are denoted by a *. If you make a purchase via one of these links I may get a small kickback. I only recommend products and services I use and love myself! Thanks in advance :)
What is a landing page?
Using the definition most used in marketing - a landing page is a page on your website that has one objective only. In other words a landing page is a simplified page, without the clutter and confusion of a header and footer, and with one key action you want people to take. It’s different from say a home page, or an about page which form a part of the main structure of your site and likely have multiple objectives & a variety of content.
On a landing page all content - copy, images etc - supports this key action.
Why do I need a landing page?
A landing page is fantastic for things like your email list sign up or lead generator (a freebie that people download in return for their email address), a limited time offer or the final culmination of an action from elsewhere on your website (such as a sign up page for a course/ application page or enquiry page).
Most online strategies will benefit from multiple landing pages serving different purposes - read more about the different types of landing pages below.
What’s the difference between a landing page and homepage?
Most websites will have a homepage that includes at a high level, lots of information. The home page is one of the primary trust builders on your website and is really important - including information such as
What you do and who you do it for
Your product or service offerings
Social proof such as “as seen in” or reviews
A mini about section
A lead generator
And with plenty of click throughs to other parts of your website - a “choose your own adventure” if you will.
It’s worth mentioning that your other core website pages exist as part of the tapestry connected to your home page and often will require a visitor to explore and click through multiple pages to build trust or gather sufficient information to make any kind of commitment (purchase, making contact or email list sign up being the primary 3).
In contrast a landing page has one objective or focus only and can (although doesn’t always) exist in isolation to the rest of your website. Because landing pages are designed with one focus in mind they avoiding muddying the waters in the way a homepage might.
Types of landing pages
Here are some examples of the most common types of landing pages
Lead generation landing page (V similar to a Squeeze landing page)
Such as offering a free ebook or other sweetener in return for someone’s email address or other details. Landing pages for lead generation highlight the value of the freebie and make signing up for it easy. They don’t muddy the waters with any superfluous information.
This example below is a long form lead generation landing page.
Sales landing page
This type of landing page is focussed on giving the visitor all of the information they need to make a purchase. All of the information required for someone to make a buying commitment is on this page. It is focussed on only one product or service and has only one call to action which is to purchase said product/service.
This is an example of a short form sales landing page.
This is an example of a snippet of a long form course sales page.
Splash landing page
The purpose of a splash page is to ask the user to take a specific action, they can be used at any stage of the sales funnel and create a simple process step such as asking someone to choose their country, or segment.
Viral landing page
The objective of this type of landing page is to get people to share it, hence the name “viral” with the main aim being to increase brand awareness. Essentially a viral landing page adds value on a topic without selling anything. It could include videos, imagery or infographics. CTAs are kept streamlined and are more focussed on sharing than on any other action
Top tips for your Squarespace landing page
Regardless of the type of landing page you’re creating there are a few landing page best practices you should follow to ensure your landing page is effective:
Be clear on the audience segment for your landing page (the specific nature of a landing page allows you to be more specific in your copy and design than perhaps you are able to be with your homepage)
Have ONE clear objective for your landing page - research shows that including multiple offers on your landing pages can decrease conversions by up to 266% - keep it simple and focussed!
Include just enough information to achieve that objective and no more - remove any distractions
Focus your landing page on the objective at hand (lead generator, product, service, offer, question) rather than your business as a whole
If you’re using a form that people will complete, keep it simple
Keep your CTAs (Call to Action) buttons simple and focussed on the objective
One awesome use of a Squarespace landing page is creating your own “link tree” or instagram links landing page!
In my FREE Squarespace template Libre, I’ve created one for you already, that you can simply customize & use however your little heart desires! (Oh and did I mention you get a 6 month extended Squarespace trial and 20% off your first year’s subscription plus a library of Squarespace how-to videos?!) What’s not to love!
Grab your FREE Squarespace template here
Examples of great landing pages
Here are some examples of different landing pages
Example of a lead capture landing page (long form) You can see the value offer, and space to sign up clearly on this clutter free page.
Example of a limited time offer short form sales landing page (which is also a lead capture!)
This page has mouthwatering looking meals and an attractive money-off offer along with a lead capture form. It is a sales page as the commitment involves a purchase.
This is an example of a long form lead capture page. It is not a sales page as the offer is free - however to make it a long form sales page the only difference would be that the ask would be a paid service or product.
hunting for more on webdesign? check out these posts
How to create a landing page on Squarespace in 5 easy steps
1. Create a new page on Squarespace
From the pages menu in the “unlinked” section create a new page using a blank template.
2. Add your page sections to your squarespace Landing Page
Click on the page to edit it and add your page sections as normal by clicking on the “add a section” blue cross icon. Remember to keep your page design as simple as possible.
3. Add your content to your Landing Page - ensure clear call to action
Add your content blocks as normal. Some commonly used blocks for landing page content include text, images, sign up or contact forms, code blocks (if using a form from a 3rd party email marketing software like flodesk), video blocks and of course CTA buttons.
Ensure your CTAs are clear and all leading to the same action (unless your landing page is a Splash tyle page that presents the user with a choice in which case your buttons will align with that choice).
4. Add CSS to hide the header and footer on your Landing Page
Now we want to remove the header and footer (the last of the distractions). We can do this in two different ways. If you’re on a Squarespace business plan we will use the page code injection to easily apply this CSS only to the landing page in question.
Hide header and footer on Squarespace landing page with Business Plan or higher
Navigate to page settings by hovering over the gear icon on the right of the page in question - click the gear icon to show the page settings
When the page settings pop up, click on advanced on the right hand side
In the box titled “page header code injection” paste this code snippet (making sure to include the <style> tags which are required to tell the code injection that the language you’re adding is CSS as opposed to another language.
<style>
.header, #footer-sections {display:none!important;}
</style>
4. Click save. Your header and footer should now be hidden. Here’s a before and after example:
Hide header and footer on Squarespace landing page with Personal Plan
With the personal plan we don’t have access to the header code injection so we will use the main CSS injection panel instead, and will use the page collection ID to target the CSS to the right page.
Find your page Collection ID by using the chrome plug in “Squarespace ID Finder” by Heather Tovey - you can download this here. Copy the page ID by clicking on the yellow page ID box at the top of the page in question.
Navigate to the Design Menu from the main menu list.
Then click on the Custom CSS option
Using the code snippet below, replace the Collection ID with the one you copied in step 2, and paste the whole lot into your CSS panel (note that because this panel is for CSS only you don’t need the <style> tags
#YOURPAGE-Collection-ID {
.header, #footer-sections {display:none!important;}
}
Click save. Your header and footer should now be hidden. It will look exactly the same as the before and after examples above.
5. Add/ amend page settings (url, title, meta description, social sharing image AND if you want Your landing page to be your homepage - set as homepage)
Our final step is to make sure we’ve updated our page settings (something we should do for every page on our Squarespace website - not just our landing page). Why? Because SEO for our landing pages is as important as any other page on our site - with 48% of top landing pages ranking in google search or maps it’s a valuable tool for driving traffic, and one of must dos is ensuring our page settings are optimised.
Go to the pages menu
Hover over the page in question and click the gear icon
In the general settings section update your page title and url
In the SEO settings section update your SEO title and description (for more on how to do this using SEO best practices to help with your google rankings - read this)
If you will be sharing the link to your landing page on social media you may wish to create and upload a unique social sharing image that communicates what this page is about
Finally - in some scenarios you may wish for your landing page to be set as your homepage for a period of time. This could be during a launch for example. To do this, navigate back to General settings and toggle “on” the set as homepage. This should only be used as a time limited strategy as part of a launch so do remember to set a reminder to change this back again after your campaign!
Click save
So there you have it, everything you need to create a landing page on Squarespace 7.1.
You can see that …
Creating a landing page on Squarespace is really easy!
As long as you understand your ideal client! Make sure to grab the workbook - it’s packed with guides, templates & strategy to help you get clear before you start designing your landing page for them!
New on the ‘Gram…
