How To Create A Landing Page in Squarespace: A Step By Step Tutorial for Beginners
Вставка
- Опубліковано 3 жов 2024
- Learn how to make a professional landing page in Squarespace that will skyrocket your conversion rate! 🚀
When I updated my basic landing pages using this exact layout technique, I saw a BIG increase in conversions (from 3% to 23%!!!!! 😱) so I wanted to share how I created this fancy new layout!
Before we dig in, there are two important questions I need to answer.
What’s a landing page? A page focused on users taking a single action. A sales page, a freebie sign up page, or even an event RSVP - a landing page removes all the website distractions like a header and footer so people can focus on taking one specific action.
What’s an advanced landing page? A landing page with it’s own navigation! This page has a unique header and footer specific to the page content. This makes can help you create longer landing pages without your audience getting in the sea of content. It also looks polished and professional compared to a single page with a simple form.
In the video below, I’ll show you how to create this in Squarespace using new features, anchor links, and more. When you’re ready to give this a try, follow along with the steps outlined below:
Step 1: Create a blank page in the not linked section of your site.
You don’t want this landing page to be a part of your main navigation; it’s a special page that you will send people to for sales &/or marketing campaigns.
Step 2: Add page sections with content about what you are offering
My highest converting freebie landing pages have seven parts: (1) header with a logo and text links, (2) intro section, (3) about section, (4) additional info section, (5)about me section, (6) sign up, and (7) footer. here is a link to two different examples of my own landing pages for inspiration:
📖 Five codes I use on every Squarespace website: insidethesquar...
💌 How to build your email list using Squarespace: insidethesquar...
01:50 Step 3: Create a custom header with your logo, text links, and a button
These text links in your page’s header section should be simple and easy to understand. Each one will link to an anchor label we will create next. Make sure you toggle off the “open in new tab” option.
05:09 Step 4: Create anchor links in your different sections
Add a code block to the top and center of the section you want to link to. Inside the code block, you’ll create an anchor link. Make sure that each anchor has a unique title.
06:18 Step 5: Check your layout on mobile
Squarespace will shift and change things while you edit the desktop site. Double check the layout and alignment on mobile to make sure it looks good.
07:02 Step 6: Create a custom footer
Add a blank page section to the bottom of the page and link to important pages and add anything you need to have in your site footer. For my example, I link to my privacy policy, terms & conditions, and I add disclaimer text. Double check this on mobile too!
07:59 Step 7: Remove the header and footer from the page
Save your changes so far and go back to your pages menu. Click on the gear icon for your landing page to access the page settings. Click on the navigation option and toggle on “remove header” and “remove footer”
Optional: Update your URL slug, SEO and Social Share Image
Every page in Squarespace can have a unique URL slug, customized SEO title & description, and a social share image. Make sure these settings are updated for your new landing page! You’ll find these options inside the settings for your page.
09:15 Step 8: Customize with code
Add custom code will remove the link underline and create a smooth scroll effect. These codes are optional. You can copy the code directly from my blog at insidethesquar...
- -
Related Content:
📝 Original Blog Post: insidethesquar...
🖼️ Squarespace for beginners: insidethesquar...
🆓 Learn CSS for FREE: insidethesquar...
☕️ Like this tutorial? Buy me a coffee to say thanks & support my channel: buymeacoffee.c...
- -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥ #Squarespace #Training #LandingPage #WebDesign #WebsiteDesign #Tutorial #HowTo #SquarespaceTutorial #SquarespaceTraining #SquarespaceLandingPage #SquarespaceWebsite #DesignTutorial #SquarespaceTips #SquarespaceDesign #SquarespaceTutorial2024 #SquarespaceTutorialForBeginners #SquarespaceTutorialAdvanced #SquarespaceTutorialEcommerce #SquarespaceTutorialBlog #SquarespaceTutorialSEO
Great video.
Thanks - glad you enjoyed it! :)
Thank you... this is so helpful
You’re welcome; so glad it was helpful!
I can't say how many times I review your videos. Even if I don't want the snippet at the time of recording I'm sure I will use it in the future. Thanks Becca.
Thank you so much for your comment - I'm glad you like my content!! 🥰
Thanks - this is great! I've made landing pages, but never put the mock header and footer. Thanks!
You're welcome - it made such a big difference for my conversion rate, I couldn't keep it a secret! 🙌
I really needed this! Thank you! 🙏🏾
You are so welcome - happy to help!
THANKS.... IT GIVES ME SOMETHING TO WORK WITH.
Happy to help! :)
Great work love it. One suggestion for a future tutorial would be how to go about doing the privacy policy for a square place website and any legal disclaimers needed. Thanks
Glad you enjoyed this one! I don't offer any legal advice, but I do have an affiliate who specializes in legal templates.
\Here is a link if you want to check her out: the-boutique-lawyer.myshopify.com/insidethesquare
Make sure you use my code INSIDETHESQUARE for 10% off!
I love this; thank you.
Have you ever done a video with a 'Back to Top' navigation button? It is a nice way to return to the top of the screen without mouse-wheeling back if you have a very long one-page website. :)
You're welcome 😊 and I totally agree - a super helpful option for long format content! I did a tutorial on that two weeks ago; here is a link if you want to check it out: ua-cam.com/video/POuTuPW3yZQ/v-deo.html
so great! thank you!
You are so welcome - glad you like my work! :)
Thank you so so much. That's awesome!
You're welcome! :)
This is amazing. Jussst what I was looking for. Did you use a specific template for the design?
Awesome - glad this is what you needed! I made this layout myself. I actually design in Canva and then build in Squarespace; with a little CSS any design is possible 😉
@@InsideTheSquare So cool! Do you have a video showing how you design in Canva then transfer to Squarespace?
Anyway to pin the anchor menu so you wont have to scroll back up to navigate?
Great question and yes! Add "position:sticky" to your first page section like this:
#page .page-section:nth-child(1) {position:sticky!important; top:0!important}
I have a question. Why remove your header when you're simply adding it back in? I mean maybe im just different when i go online i click links and if i want to read on the about ill click that section, if i want to buy something ill click the products, etc. Are people so ignorant to pages it has to scroll down for them? Lol
I think you missed the point of the landing page concept - the main purpose is one call to action, like download this freebie. Instead of your normal links (home, services, blog, about, contact, etc) you want to keep them focused on the content on the page. You aren't adding navigation back in - you create a new navigation specific for this page and this page only. Hope that explanation helps you think about this concept a little differently 😊
😍
Help! Great tutorial but Im not able to get the new navigation titles (FAQ and More Info in my case) to link to the corresponding coded sections in the page.
I had ONE moment when FAQ linked to its page section. I went about doing the exact same anchor link code for More Info and now, after MANY tries and variations, I cant get either title to link.
Obviously Im doing something wrong? As an example, the FAQ is #faq with the corresponding code being Does that make sense?
Any help MUCH appreciated!
The link in your browser becomes domain.comexample/page#anchor so you'll need to refresh that address to have it work multiple times in a row, or link to the whole thing (domain.comexample/page#anchor) instead of just the anchor (#anchor) Hope that info helps and best of luck with your project!