Squarespace is one of the top website platforms out right now because there is so much that you can do without knowing a lick of code to get it done. My website is built on the Squarespace platform and it was the best decision I made to switch over (read more about my experience with Squarespace here). One of the best features is that you can create a cover page (aka landing page). People use cover pages for different purposes such as sales pages, email list opt-in pages, thank you pages, etc. The problem with cover pages in Squarespace is that you are limited to the type of content that you can add to it. For example, you can’t place buttons where you want them (they can only be on certain locations of the page) and you can only include a limited number of links. Sometimes you just need a blank page to work with so that you can build your cover page using all of the options available when clicking an insert point. The problem is if you create a new page, all of your page links, header and footer contents will appear as well as any announcement bars that you may have set. The purpose of a cover page is so that the reader doesn’t get distracted and stray away from what you’re trying to get them to sign up for, purchase or learn. Today I am going to give you three simple pieces of code that will help you create a landing page free from all of the default header and footer distractions and how to remove an announcement bar from that page on your Squarespace website.
First I want to show you how one of my cover pages looks using Squarespace’s default cover page settings.
This was made using the Vignette cover page. I have inserted an image, my logo, some text and two buttons. The purpose of this page is to get visitors to sign up for my free email course. To do this, they must click the “Um, bring it!” button to view the opt-in form.
This is great, but what if I wanted to just enter the code for the opt-in form from my email service provider so that the fields show on the page instead of having to click the button to receive a pop-up? PROBLEM: You can’t add code blocks to cover pages. I want to be able to click an insert point to easily enter HTML on this page.
Here’s an example of another cover page on my site. It’s a thank you page that new subscribers are directed to upon completing the opt-in steps for my resource library:
This is great and straight to the point, but this is also a page that gets lots of eyes. Because of that, you may want to add social share links to this page so that they can share the library opt-in with their social followers (free promo for you!). Since you can attach a URL to a button, you can add “Click to Tweet” links (Click to Tweet is a free site where you can create pre-made tweets, then when someone clicks your link the tweet appears and they can post with the click of a button without having to edit anything--convenience!) to cover pages to perform this action. PROBLEM: You may want to add the social media icon as an image link for people to share your opt-in. Problem is, you can’t add images to the body of the cover page. You can only add one image (logo) to the body area and large images to fill the background, left or right of the page (like my first cover page example). If you want to add a twitter logo and turn it into a “Click to Tweet” link, you can’t. Icons will draw the attention of the reader and will give them a higher chance of clicking and sharing!
Squarespace offers so many different content types via insert points that you can add to your regular pages, but they only offer a few options for cover pages AND they limit the number of links and buttons you can add to the page. So how can you remedy these issues? With three short pieces of code.
STEP 1
Create a new, blank page (just a regular old page, not a cover page).
STEP 2
Add the following code to the Page Header Code Injection section on the Advanced tab of the page settings:
<!-- Remove navigation links and header info-->
<style>
#header { display: none }
</style>
This code will remove your page links and any header images from the header of your website.
STEP 3
If you also have footer contents, you will want to remove this as well. Enter the following code to the same code injection screen under the first set of code:
<!-- Remove footer -->
<style>
#footer { display: none }
</style>
Once you save this, you will have a blank canvas and can build the page how you want just like any other page on Squarespace using insert points and blocks, but without header and footer distractions.
Need to remove an announcement bar?
You may have an announcement bar on your website like the one below.
You definitely don’t want this to appear on your landing page because again, you don’t want to distract your visitors. You only need them to see what you want them to sign up for, purchase or learn. If you want to disable your announcement bar from a specific page, you only need a small amount of code for that, too! Just add this code to the code injection section and your announcement bar will be removed from just that page. I entered mine after the footer code in the example below.
<!-- Remove announcement bar -->
<style>
.sqs-announcement-bar { display: none !important }
</style>
These three pieces of code together are the perfect combo because they allow you to do so much by giving you a blank slate.
Here’s how one of my landing pages looks using this code. I used an HTML content block and added the code to show my opt-in form directly on the page rather than giving the extra step of clicking a button to open an opt-in window. I also added an image block for my logo at the top of the page.
Here’s another example of what you can do with a blank page in Squarespace:
This is a Thank You page that I mentioned earlier which contains share links so that your new email subscribers are encouraged to share your opt-in page with their social followers.
There are so many things that you can do with a blank page in Squarespace (webinar, survey page, appointment calendar, e-course, etc). What will you create on yours? Leave your comments below!