How to turn any page into a landing page using CSS
Our latest guest post from Squarespace Code expert, Rebecca Harpain, provides you with each of the steps required to convert text pages to landing pages in Squarespace.
This tutorial is a total game-changer for building your email list. You need a good landing page to get those conversions, and I am here to teach you how to make a fabulous one!
With an email list that grows every day, I know a few things about getting subscribers. Any good landing page needs to have two major things:
1 - A REALLY REALLY GOOD CALL TO ACTION
Tell them what to do. It sounds simple, but so many people make this part soooo boring! It's 2019, and a generic "subscribe" ain't gunna cut it. Your call to action needs to be specific; sign up now. Download now. Get the goods. Enrol. Make it so. You need to inspire action in just a few words, and sure, you can be clever about it if that fits your style! Just make sure you specifically tell them what to do, and if you can add an action word like now or instant to see that conversion rate soar.
2 - ONLY ONE OPTION
You need a good landing page to get those conversions, and I am here to teach you how to make a fabulous one!
If you give people 3 things to do, its harder to make them do the one thing you want them to. A good landing page gives people one and only one option - convert. It's that simple! Remove your navigation, headers and footers, and people won't be too distracted by the rest of your site to convert! And that brings me to today's CSS tutorial - how to remove the header and footer of one single page on your Squarespace site.
Ready to dive into the details? Good.
Below, I have a snippet for the five major theme families. If you have no idea what I mean by that, that's fine! Check out my Getting Started with CSS guide to getting the low down on what that difference means for your code, and to see what this code looks like in action; click the button below to be directed to the landing page I created: insidethesquare.co/learncss
//Bedford Theme Templates//
<style>#header, #mobile.bar, #footer {display:none!important;}</style>
//Brine Theme Templates//
<style>.header, .mobile.bar, .footer {display:none!important;}</style>
//Five Theme Templates//
<style>#navigation-top, #page-footer {display:none!important;}</style>
//York Theme Templates//
<style>.site-header, .mobile.bar, .site-footer {display:none!important;}</style>
//Pacific Theme Templates//
<style>#header, #mobile.bar, #footer {display:none!important;}</style>
To add these codes to your single page, you can use Page Header Code Injection. Navigate to your page settings, and select the Advanced tab, the very last one. There you will see a space to enter your Page Header Code Injection. Place the whole code there, including the <Style> brackets above. Be sure to select Save when you are done!
Yup! It’s that easy. Now go forth and build that email list!
