How To Create A Landing Page in Squarespace: Easy To Follow Squarespace Landing Page Tutorial
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Step by step process
→ Related content
About This Tutorial
This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
If you want to learn how to create a landing page in Squarespace, you are in the right place!
What’s a landing page? A page focused on users taking a single page. A sales page, a freebie sign-up page, or even an event RSVP - a landing page removes all the website distractions like a header and footer so people can focus on one specific action.
What’s an advanced landing page? A landing page with its own navigation! This page has a unique header and footer specific to the page content. This can help you create longer landing pages without your audience getting in the sea of content. It also looks polished and professional compared to a single page with a simple form.
In the video below, I’ll show you how to create this in Squarespace using new features, anchor links, and more. When you’re ready to give this a try, follow along with the steps outlined under the video.
Squarespace Tutorial
Step by Step Process:
How to create a landing page in Squarespace
Step 1: Create a blank page in the not linked section of your site.
You don’t want this landing page to be a part of your main navigation; it’s a special page that you will send people to for sales &/or marketing campaigns.
Step 2: Add page sections with content about what you are offering
My highest converting freebie landing pages have seven parts: (1) header with a logo and text links, (2) intro section, (3) about section, (4) additional info section, (5)about me section, (6) sign up, and (7) footer. here is a link to two different examples of my own landing pages for inspiration:
📖 Five codes I use on every Squarespace website
💌 How to build your email list using Squarespace
Step 3: Create a custom header with your logo, text links, and a button
These text links in your page’s header section should be simple and easy to understand. Each one will link to an anchor label we will create next. Make sure you toggle off the “open in new tab” option.
Step 4: Create anchor links in your different sections
Add a code block to the top and center of the section you want to link to. Inside the code block, you’ll create an anchor using this example below. Make sure that each anchor has a unique title (the word anchor in the example below)
<div id="anchor"></div>
Step 5: Check your layout on mobile
Squarespace will shift and change things while you edit the desktop site. Double check the layout and alignment on mobile to make sure it looks good.
Step 6: Create a custom footer
Add a blank page section to the bottom of the page and link to important pages and add anything you need to have in your site footer. For my example, I link to my privacy policy, terms & conditions, and I add disclaimer text. Double check this on mobile too!
Step 7: Remove the header and footer from the page
Save your changes so far and go back to your pages menu. Click on the gear icon for your landing page to access the page settings. Click on the navigation option and toggle on “remove header” and “remove footer”
Optional: Update your URL slug, SEO and Social Share Image
Every page in Squarespace can have a unique URL slug, customized SEO title & description, and a social share image. Make sure these settings are updated for your new landing page! You’ll find these options inside the settings for your page.
Step 8: Customize with code
The following code will remove the link underline and create a smooth scroll effect. These codes are optional.
<style>
a {
text-decoration:none!important
}
html {
scroll-behavior:smooth
}
</style>Step 9: Learn more about the cool things Squarespace can do
This is the tip of the iceberg, my friend! Squarespace can do a ton of cool things and I’d love to teach you about it. Check out the related content links below to learn more about Squarespace.
Related Content
📖 Five codes I use on every Squarespace website (advanced landing page example)
💌 How to build your email list using Squarespace (advanced landing page example)
📝 Free guide to Squarespace code basics (advanced landing page example)
