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: insidethesquare.co/five
💌 How to build your email list using Squarespace: insidethesquare.co/emaillist
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 insidethesquare.co/squarespac...
- - -
Related Content:
📝 Original Blog Post: insidethesquare.co/tiny/landi...
🖼️ Squarespace for beginners: insidethesquare.co/start
🆓 Learn CSS for FREE: insidethesquare.co/learn
☕️ Like this tutorial? Buy me a coffee to say thanks & support my channel: buymeacoffee.com/insidethesquare
- - -
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
15 апр 2024
