How to create a custom landing page in Squarespace
/
While creating my recent e-course, I've spent a lot of time researching the best tools and resources to use to ensure a smooth launch. Today I want to share with you how you can use your Squarespace site to create your own, customized landing pages without having to make use of a landing page generator site like Leadpages.
One of the benefits of blogging with Squarespace is the ability to create Cover Pages (just like this one that I made for BeautifyYourBlog.
But
Cover Pages are designed to be super simple landing pages, with just one or two call to actions. If you are looking for something a little heftier to be able to add in more images & your own custom sign up forms (currently if you want to connect Squarespace Cover Pages & their Forms blocks to Convertkit, you need to use a site like Zapier to run an integration) then a custom landing page is what you're after. I've found some super simple tweaks that you can do to a regular Squarespace page to make it look like a fancy landing page.
If, you're like me, and not quite ready to make the jump to LeadPages, then creating your own landing pages on Squarespace is a great workaround, and with just a few coding tweaks you can make it look like an actual landing page, as opposed to the rest of the pages on your Squarespace site which have things like your menu bar & header image. Convertkit (which I just LOVE!) does offer a few options for landing pages, but the customization is very limited, and I like to make my pages look as pretty as can be. That's why I have been playing around with using Squarespace pages as customized landing pages.
These customized pages can be used for anything from sales pages to thank you pages, to course sign up pages & so much more.
What goes goes into a Good Landing Page
Landing pages are actually very simple to make! There are only a few things you need
to keep in mind to get people to take action.
You need to be as clear what it is you want people to do i.e sign up to your newsletter/course
You need to convince people that they need your offering
You need to make sure there is only one call to action on your page ie for people to enter their email address. If you have too many links, there is a chance that your customer may get distracted and click away from your page without signing up
Visuals are key! You need a good image/graphic that sums up your offering in an eye catching way
How to Create a Custom Landing Page in SquareSpace
Below is before & after of my e-course Landing Page before I removed the header, menu bar & announcement bar (left) and after (right)
Removing the header, menu bar & announcement bar from your Squarespace page
This coding may work slightly differently depending on your Squarespace theme. If it doesn't work for you, please click here to refer to the Official Squarespace Help forums.
**A little CSS Warning from Squarespace: Adding custom CSS to your site can break your design. Please use caution when using this feature. Our support team will be limited in their ability to help you with design related issues if you have custom CSS.
Note: Custom CSS does not apply to Cover Pages.**
1. Find your page ID:
To be able to isolate your page, you need to find your page ID (a long string of numbers). There are a number of different ways to do this, but this is what worked for me:
On the page you want to customize > Right Click > View Source > Command F (on a Mac) to search > search for your page name (our page url ).
About 1/3 of the way down the page you will find the name and the ID and corresponding numbers. Mine looks like this:
Don't let the above freak you out. It's not that difficult, I promise!
One you have that ID number, save it somewhere for safe keeping.
2. Customize the CSS
This is the code you need to remove the header (menu bar & header image/logo). Using a text editor or simply a new Word document, copy the following code:
.collection-57de23a9859fd0a23e1c2c43 #header { display: none; }
#header-controls {display:none;}
**Replace the italicisized numbers with your own page ID found in step 1
3. Insert the code into your site
Design > Custom CSS > Insert Code
4. Save & Refresh your page
Removing the Announcement Bar from your Squarespace page
This is a little easier than removing the header. For this you need to have the actual page open and you are going to 'inject' code in the advanced settings of the actual page.
1. Page Content > Settings > Advanced > Page Header Code Injection
2. Add in the following code. This is the code you need to remove the announcement bar.
<style>
.sqs-announcement-bar {
display: none !important
}
</style>
3. Save & Refresh your page
There you have it.
A clean landing page that you can add anything you like to, right inside your squarespace dashboard.
I have been juggling between a Cover Page & a Sales Landing page for my new, free e-course. I have found that when I have set the Cover page as my home page , I actually have more signups that when I direct people to the landing page. I think this is due to the fact that there are more things for people to get distracted by on the Landing Page, and because my course is free, people don't really need convincing to sign up.
In the future, when I create paid courses, I will definitely use a customized sales 'Landing Page' as opposed to a Cover Page. But, personally, for a free course,I would suggest using a Cover Page rather than a landing page...but that's just my two cents from what I have seen happening here in my blog.
What are you currently using for landing pages on your Squarespace site? I'd love to hear from you in the comments below.
