How to Make a Landing Page on Squarespace

Before I jump into today’s topic of how to make a landing page on Squarespace, let’s start by knowing its purpose. A landing page is a single page on your website that includes a CTA (call to action) somewhere on it prompting potential clients to either purchase something, sign up for something, or download something. It is to engage said clients into wanting to know more about you in exchange for giving them something in return. That’s right. In order to gain trust and credibility in showing that you know what you’re doing (or selling), you have to give the audience something that makes them want to come back for more. This is where landing pages come in handy.

LANDING PAGE VERSUS HOME PAGE

A landing page is different than your homepage as there is no additional navigation on it. Its sole purpose is to get your audience to do something so that you can then turn those visitors into leads and potential clients. Landing pages aren’t permanent. They should only be used during a limited time frame to get your audience/follower’s attention to whatever it is you’re promoting and they should be concise with one clear message.

So, what are some examples of why you would create a landing page on Squarespace? You would create one when you want to grow your audience by either creating a newsletter signup and giving them something in return like a free download (this is called a lead generator), you are wanting to reveal something in your business whether it’s a product or a class (think promotional items), you want to distribute marketing materials, promote an event, or when you simply want to build an “Under Construction” page or a “Coming Soon” page. Whatever your purpose is, you need to design it so that it has one clear message of what you’re trying to accomplish and that’s why it’s important to keep it simple.

GETTING STARTED

I’m going to walk you through the steps of how to make a landing page on Squarespace and I’ll be using version 7.1.  

1. In your main menu inside your Squarespace website, go to “Pages” and scroll down to the “Not Linked” section.

2. Hit the add (+)  button and add a blank page. You’ll want this in your “Not Linked” section because you don’t want it to show up on your main page as part of your navigation menu (especially if you already have a webpage that’s up and running). Name this tab whatever you want to name it.

3. Select “Blank Page” and now we’re ready to get started.

SELECT A GREAT “HERO” IMAGE

In a landing page, having an amazing hero image that grabs your potential client’s attention is key. So, let’s start with that. In my imaginary scenario, my client sells pottery and now wants to expand her business to offering pottery making classes. She’s opened a brick-and-mortar location and is offering a 30% discount on classes to new enrollees. That’s her hook and promo to get them to visit her business.

First, let’s insert your main image as the background.

1. Start by clicking on “Edit” in the top left-hand corner of your now blank page, followed by clicking on “Add Section” (step 1, shown below).  

2. Then click on “Add a Blank Section” (step 2).

3. Once your section has been added, you’ll see “Add Block” (step 3) on the left-hand corner (see right image below). Select it and a pop-up menu will appear.

4. Select the “Image” option in the pop-up menu. Place your pre-selected image and expand it to your liking.

After you’ve done this, hover over your new image until a fly-out menu appears on the right-hand corner. Select “Edit Section” and fine tune the width, padding, background color, etc. Play around with the placement until you get your image to look as centered as you want it.

ADDING TEXT

Now it’s time to add your text, namely your CTA. It should be something that will want to get your audience to buy, enroll, sign up, follow, etc. To do this, simply click “Add Block” and select the “Text” option. Place the text box where you’re wanting it and insert your text inside the text block. If you don’t have your fonts formatted, select them by going to the little paintbrush (called Site Styles) on the top, right hand side and clicking on it. This will open a menu where you can select your font styles. This option works great if you don’t have a website yet. You’re free to choose the fonts you like and the color you want by formatting them here. If you need help on how to format fonts in Squarespace, you can check out this article in Squarespace that shows you how.

ADDING YOUR LOGO

Your logo will normally go in the header of your page, but because your header includes navigation, we don’t want to have a header (more on this in a minute) in our landing page on Squarespace. So, we need to add it to the top of your landing page.

Select “Add Block” and select “Image” and place your logo where you’d like it to go.

ADDING YOUR BUTTON OR SIGN-UP FORM

Now we need to add a button or a form for the next action. Select “Add Block” and then select “Button” and a button will be added. To learn more about how to style buttons, forms or any other options you need, you can read this article in Squarespace. This article is great because it highlights each option such as buttons and forms, etc., and how to set that up each of those. Make sure you’re reading the correct version. Again, my steps are for the 7.1 version.

REMOVING YOUR HEADER AND FOOTER

As I’ve stated before, your landing page should not have a header or a footer. These two items will distract your audience and defeats the purpose of what a landing page is supposed to do.

1. To remove them, click on the little wheel next to your landing page tab under “Not Linked”. It will open a pop-up menu.

2. Under the “Navigation” option, deselect the “Show Header” and “Show Footer” option and you will see them disappear. There will be a lot of white space at the top, but we’ll fix this in a minute.

OTHER IMPORTANT TECHNICAL ASPECTS

Now that we’ve got our landing page set up how we want it design wise, we need to do some behind the scenes work to make sure it’s set up properly so that it starts to appear in search engines.

URL AND HOME PAGE

Let’s start with giving it a proper URL name. I’m not going to go too deep into SEO best practices because that’s an entirely different blog post all on its own. Just know that your URL slug should be assigned a name that matches what you’re trying to do/sell/promote, etc. so that it aligns with your goal of getting eyes on your landing page. Your URL slug should ideally be between four to six words long.

1. To do this, go back to your “Pages” section, scroll down to where you placed your landing page under the “Not Linked” section and click on the little gear on the right-hand side.

2. Under “General”, you’ll see a place called “URL Slug”. Name your URL here. Because my client is wanting to promote her pottery making class, I gave it the name terraformastudio-pottery-class-promo-signup . This is concise, is five words long, and it tells people what it is and who it is. This is great for SEO. And you’ll want to put dashes, not underscores, between each word.

Continue scrolling down at the bottom and select “Set as Homepage” because you’ll want this landing page to temporarily act as your homepage.

LINK TO YOUR ACTUAL HOMEPAGE

Now that we have designed our landing page with all the pertinent information, what do we do if a potential client wants to learn more about who we are before deciding to sign up? If you only have a landing page and not an actual webpage, you can continue to add more information below your main hero image by simply adding more blocks. Just click on “Add Block” at the bottom of your hero image and continue to build.

But what if we have an actual homepage where we can direct our followers? Remember where we placed our logo? We can make that “clickable” to our actual homepage.

1. Click on your logo until a little pencil appears. Click on the pencil. A pop-up will appear and you’ll want to go to “Attach Link”.

2. Here we are going to link our logo to our actual homepage. When you click on “Attach Link”, a drop down menu should appear where you’ll see all of the sections you have built into your webpage.

3. Select “Home” and now when anyone clicks on that logo, it will take them to your homepage.

You have the option to have the homepage open in a new tab or not. My recommendation is that it opens in a new tab. Why? What if after all they read about your business, they’re interested in signing up/purchasing what you had advertised on your landing page? How will they find that promo again? Unless you have it clearly stated somewhere on your homepage again, you don’t want them hunting for that promo. We live in a fast-paced world where there is no time for frustration. If they can’t find that promo again, chances are, they aren’t going to sign up and you will have missed your opportunity for a potential client.

BUILDING IN SEO

Next, we want to build in SEO so that your landing page gets hits. SEO is very important, especially when it comes to using the right keywords, etc. because that will make sure you have eyes on your page. Because that is another in-depth blog post for another day, I’m just going to teach you the very basics of where you can set up SEO for your landing page.

Go ahead and go back to your “Pages” and scroll down to where you have your landing page. Click on the little gear icon to open your settings.

Scroll down to SEO and select “Edit Website SEO Settings”. This will open a new window where you can add an SEO title and description. Your title should be concise and should tie in close to your URL description. You want everything to align in your messaging. Your SEO title should be, at most, 160 characters long and should include your domain name.

To make sure your SEO title includes the name of your domain, make sure it has %s: at the beginning. Here’s an example of my page’s SEO title set up and how it looks.

The 160 characters max will include your domain name so make sure you take that into consideration. Why is this important? Because Google will only read something up to 160 characters and you definitely want Google to find you.

Next, you want to add an SEO description of what you’re selling/promoting, etc. This too should be up to 160 characters long. You can insert this description right below “SEO Title Format” in a little under “SEO Site Description”.

Now that we’ve done all of this, let’s see what our landing page looks like on the desktop version.

CHECK YOUR LANDING PAGE FOR MOBILE

Creating websites in Squarespace is very easy and it has a built-in capability to layout in mobile whatever you layout in desktop. You’ll want to make sure, however, that your mobile version looks good. Unless someone is sitting at home or at work at their desk on their laptop or desktop computer, most of the navigation is going to happen on mobile devices. That’s why it’s super important that designing your landing page on Squarespace in the mobile version is laid out correctly with the right hierarchy of text placement, and that your hero image looks right. Let’s take a look at what our mobile version looks like before I go in and start correcting any layout errors.   

This is not an ideal mobile layout landing page. And let’s see why. For starters, the image stayed horizontal even though we are now looking at a vertical screen. This is not the best layout.

Secondly, the text is huge. It looks great on the desktop view, but it’s way too large on mobile view. We can easily move all these blocks around to where we want them for a better layout, but everything just looks way too large. So we’ll need to do a little CSS coding to fix this. I promise it’s not that hard.

SQUARESAPCE ID FINDER

You’ll need to have the Squarespace ID Finder downloaded in Chrome on your desktop to be able to do the next steps. Once you have the app saved somewhere on your desktop (like in your bookmarks banner), duplicate your landing page design in your desktop so that you now have two exact same landing pages. Toggle over to your mobile version and make sure you have two as well.

CSS CODING FOR MOBILE IMAGES

With our Squarespace ID Finder, we are now going to do some coding.

1. Click on the Squarespace ID Finder and you will see a lot of IDs appear.

2. Click on the one that says “section id”, it’s a box that’s in blue.

3. Click on the first section id of the two landing pages, and when you do, it will copy it to your clipboard. Paste it somewhere so you’ll have it.

4. Switch to your mobile view and do the same thing. Paste it somewhere as well so you’ll have it.

5. To apply the following CSS code, in your “Pages” section, scroll down to “Website Tools”, click on it and and

6. Click on “Custom CSS”. Inside the CSS box, paste the following CSS code:

@media only screen and(min-width:641px) {[data-section-id="677599c9d7beba70dd94b688"]{display:none}}

@media only screen and (max-width:640px) {[data-section-id="677888e31510a85a855d9e64"]{display:none}}

In the part that reads “min-width: 641px” you are going to copy the id of YOUR desktop section id where you see mine in grey.

In the part that reads “max-width:640px” you are going to copy the id of YOUR mobile section id where you see mine in grey.

Make sure you keep all the brackets and parenthesis as shown above or the code won’t work. For every { open bracket, you must close it }. Click “Save”. Don’t forget to click “Save” or you’ll lose the commands you just typed in.

What this does is that it tells Squarespace, “Anywhere you see this section id that is at a minimum width of 641, I don’t want you to show it”, and vice versa for the mobile version. Since the desktop version probably measures somewhere between 1200 to 2500 px, its minimum width is 641 px.

So now when you check your desktop version, you’ll only see one landing page and you’ll only see one landing page when you go to the mobile version.

Now let’s fix those gigantic fonts.

FIX YOUR MOBILE IMAGE

As I mentioned before, our original image is horizontal and now that we’re looking at the mobile version, it’s still horizontal. Ideally, this image should be vertical. You can adjust this in Photoshop or Canva, or you can add a new image altogether that’s more vertical. We already told Squarespace to ignore our desktop version when looking at mobile and vice versa so we can add an image that’s more vertical if we want.

I adjusted my original horizontal picture to be 600 px wide by 800 pixels long. Remember the max width of the mobile version is going to be 640 px so that is why I adjusted my image to be at 600 px wide.

Adjust the image and the logo where you want them in the mobile version.

CSS CODING FOR FONTS

You can certainly leave the fonts as-is if you’d like, but I think adjusting the size for the mobile view is a much cleaner look. Go ahead and click on your Squarespace ID finder and copy the IDs for each section of text.

In the CSS box, you want to type in the following CSS code for the main heading:

@media screen and (max-width:640px) {#block-yui_3_17_2_1_1735760206437_3790 h1 {

font-size: 35px !important;

line-height: 0.5 !important}}

1. Insert YOUR block id where mine is in grey.

2. Enter the font size that you want where it says “font-size” (you might have to play around with the pixel size to your liking). Depending on what font size you like, your leading (the space between two lines) might be too big now.

3. Adjust the line height to your liking as shown above.

One thing to note is that I assigned this particular block of text as heading one, or h1, and thus you’ll see an h1 after the block id (in red above, though it won’t be red when you insert the code into CSS). Whatever heading you’ve assigned that block of text, make sure you note it accordingly in the CSS code.

For the next line of text, or in my case, heading 2 (h2), copy the following CSS code:

@media screen and (max-width:640px) {#block-yui_3_17_2_1_1735760206437_12649 h2{ font-size: 25px !important;}}

Again, insert YOUR block id where mine is shown in grey. My line height looks good as-is, so I didn’t adjust it here but if you need to, it’s the same command as in the first example.

Now that I’ve tweaked everything. Let’s look at how the new mobile layout looks. The new layout looks cleaner and well adjusted for mobile view.

CSS CODING FOR PADDING AND MARGINS

Remember when we took off the header and footer of our landing page and it left all that white space at the top? Get the Squarespace ID for that section (it’s the same one you used when we formatted it not to show up in your mobile view; the section id that is in blue) and plug in the following code:

[data-section-id="677599c9d7beba70dd94b688"] .content-wrapper

{padding-top: 0 !important}

Insert YOUR section ID where mine is in grey. You’re telling Squarespace that you want zero padding at the top and it will fix this to make your landing page with no padding at the top.

Now that we’ve done all the behind-the-scenes items, you are ready to launch your landing page! Always double check it on your actual desktop and mobile once you’ve gone live to make sure it all looks good. You can make any adjustments needed in those CSS commands.

I hope this small tutorial walk-through helped and that you’re on your way to designing great landing pages in Squarespace!