Creating a custom landing page in Squarespace

in

So, why does this matter to you as a photographer?

Landing page is one of the best marketing tools for your business! It allows you to capture your audience without the ‘clutter’ of the rest of your website (navigation, announcement bars etc.). You can focus on getting leads by targeting a very narrowly focused ad and focusing the audience’s attention on what they need to see.

But Umar, that’s great, what is a landing page though?

In short, a landing page is a web page separate from your main website. Typically it does not show up on your main navigation panels. The landing page is designed for a single objective: collecting leads! Now I’m not going to go too much into detail on what a landing page should have. When I have more time, I might make a post about that.

Landing Pages in Squarespace

In squarespace, you have the option of using their “Cover Pages”, which are a sort of landing page, but in trying to make it simple, it is very limiting on what you can do with it. I was creating landing page to attract wedding clients, and needed more options. I’ll go through step-by-step on how to create a custom landing page. Since you’re reading this, I’m assuming you’re familiar with Squarespace and how to create a page.

What does a landing page look like? Mine looks like this:

So as you can see, no navigation panels, no menu bars or announcement bars. A fairly simple and focused page. You can see the full page HERE.

Step-by-step instructions:

Step 1: Click on “Pages”

Step 2: If you scroll down in your pages, click the “+” on the “Not Linked” tab. This makes sure you’re not putting the page on your main or secondary navigation that people can directly go to.

Step 3: Click on “Pages” on the pop-up menu

Step 4a: Add all the elements you want to the page

Step 4b: You can add your instagram/links/whatever you typically can do as part of the regular page creation.

Step 5: This is where the fun part begins. Click the gear icon next to your newly created page.

Step 6: Click on Advanced on the popup that appears.

Step 7: Code injection is the box you want to paste the code instructions in

Step 7: Code injection is the box you want to paste the code instructions in

Step 8: You will enter the code in the box and click save! And Voila! Navigation bars disappear. Code is below.

The code you need to type in is this:

<!-- 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>
 

Typical disclaimers apply here: Use at your own risk. If it breaks your website, which I highly doubt a tiny code like that could, don’t come after me. This has been working on the Wells template. If this does not work on yours, send me a message, I’ll see if I can figure it out on your template.

And that is all boys and girls! Enjoy tweaking around to make the best Landing Page ever!