Designing the Row® | Squarespace Website Design & Tutorials

View Original

VIDEO: How to create a Squarespace landing page

About this Squarespace video tutorial

Learn how to create a landing page with this comprehensive Squarespace Landing Page tutorial (Archer Template 7.1). In this video, I'll guide you step-by-step through selecting the template, customizing fonts and colors, adding text, and making your page live. Perfect for beginners and those looking to get started on Squarespace. Don't forget to subscribe for more Squarespace tips and tutorials!

Timestamps

0:00 Squarespace templates & getting started
1:32 Select fonts
3:09 Set color palette
4:23 Customize text copy
5:36 Email signup form
5:54 Social media icons
6:36 Customizing use of colors across page
7:50 Upload logo
8:13 Going live with your landing page


Want 20% off your new Squarespace subscription?

Subscribe to the Designing the Row® email list and get the exclusive code sent straight to your inbox. You’ll get email updates when new Squarespace tutorials are published, but you can unsubscribe at any time.

See this content in the original post

Squarespace 7.1 Archer Template

Let's say that you know you want a website landing page and you know you want to use Squarespace to make that happen. In this guide, I'm going to show you how to start and how to make that all come to life.

First, head over to the free Squarespace templates library. I’m on the "All Templates" page, and I know which one I want to use, so I’ll search for it. It’s called Archer. This is a simple coming soon landing page. Click into it to get started.

When you click "Get Started with This Design," the first thing it will ask you for is your site title. Enter your site title, for example, "Example Site Title." Next, you’ll see a few introductory slides; feel free to close those as I’ll guide you through the setup.

You now have a basic landing page ready for customization. I like to start with colors and fonts, then add my text copy and design details to style the page…

Customizing Fonts and Colors

  1. Edit Mode: Click the paintbrush icon (Site Styles) in the top right.

  2. Fonts: Customize headings, paragraphs, buttons, and miscellaneous text. I recommend picking two or three fonts for your site. Click into "Headings," then "Family," to see the current fonts or browse all fonts. Choose your fonts, then adjust weight, style, line height, letter spacing, text transform, and size. You can see changes take place immediately on your site. [Related Post: How to Choose Brand Fonts (Website Friendly Font Pairing Menu)]

  3. Colors: Click "Edit Palette." If you already have a brand palette, enter your colors. Otherwise, use presets or upload an image to pull colors from it. A good website color palette includes a white, a light color, an accent color, a dark color, and a black. [Related Post: How to Create a Brand Color Palette]

Save your fonts and colors once you’re satisfied.

Adding and Customizing Text

  1. Text Box: Click the text box to edit. Triple-click to select the entire line of text. Type your desired text. Drag the box edges to adjust its width. Use the A with brackets icon to expand the text to fit the box.

  2. Sign-Up Box: If you want to collect email addresses, click the pencil icon in the sign-up box. Under "Storage," select where you want the emails to go (Squarespace, Mailchimp, Google Drive, etc.). Customize the fields and style as needed.

  3. Social Media Links: Click the pencil icon next to the social media links. Enter your actual URLs (Facebook, Twitter, Instagram, TikTok, etc.). Adjust the style, alignment, and size as desired.

Customizing Buttons and Background

  1. Buttons: To change the button color, go back to the paintbrush icon (Site Styles), then "Colors." Click into the section theme (e.g., Light 2) to customize the button’s background color while maintaining your color palette.

  2. Background Image: Hover over the background image area, click "Edit Section," then "Background." You can delete the current image and upload your own or browse free stock images provided by Squarespace.

Final Touches

  1. Site Header: Click "Edit Site Header" and the pencil icon to upload your logo.

  2. Save Changes: Ensure all changes are saved by exiting the edit mode and clicking "Save."

Going Live

To make your landing page live, upgrade from the trial to a paid plan by clicking the blue "Subscribe" button. If you want a discount, I will link to mine below in this video caption.

Once subscribed, connect your domain name under "Settings" > "Domain and Email" > "Domains." You can get a new domain or use an existing one. Once connected, your landing page will be live.

I hope this guide helps you create a beautiful landing page on Squarespace. If you’re planning to launch a full website, check out my other tutorials and subscribe to my channel for more tips. Happy Squarespace-ing and happy landing paging!


More Squarespace tutorials…

See this gallery in the original post

This post was originally created in 2020 but has been updated (July 2024) to reflect Squarespace platform updates.