Advertisement
  1. Web Design
  2. Squarespace

How to Build a Website with Squarespace

Scroll to top

In 6 easy-to-follow steps, you can design a professional website with Squarespace. I’ll show you how!

You need to build a professional website and you want to do it quickly, easily, and relatively cheaply. You start looking around at the available website builder platforms and realize there are dozens of them that seem to promise the same thing.

So does that mean that any will do?

No, it doesn’t. Sometimes the best way to figure out which content management system (or any software really) is the best solution for you is to see it in action. 

In this post, I’m going to take you through the basic process of building a website with Squarespace. This will give you a good idea of how easy the builder is to use, what sort of website features you get access to, and more. 

6 Steps to Create a Website with Squarespace 

It was almost 10 years ago when Squarespace started making commercials featuring some big-name stars — like John Malkovich, Jeff Bridges, and most recently Zendaya. My favorite ad, however, was the one where Keanu Reeves communes with nature and explains the website building process:

Reeves oversimplified the process somewhat, but that’s okay. We’re going to fill in some of the gaps for him now:

Step 1: Create an Account

The process to get started with Squarespace is a simple one. Click the Get Started button on the website. 

Fill out a short questionnaire and the website builder will learn more about what type of website you intend to build. At the end of it, you’ll find all the Squarespace website templates that are available. Sort through all of them or filter the results by niche:

After you’ve chosen a template, Squarespace will ask you to create a login with email, Google, Apple, or Facebook. Complete the form and Squarespace will get to work on loading your new website.

Step 2: Name and Visually Brand Your Site

Before you step inside the builder, Squarespace will want you to name your site. It’s okay if you’re not 100% settled on a name yet as you can change it later (I’ll show you where to do that in a different step). 

After filling out Squarespace's onboarding questionnaire, users will be asked to create a Site Title After filling out Squarespace's onboarding questionnaire, users will be asked to create a Site Title After filling out Squarespace's onboarding questionnaire, users will be asked to create a Site Title

After the builder loads, locate the builder panel on the left and go to Design and Site Styles. From here, you can quickly create a global style for your website’s: 

  • Fonts
  • Colors
  • Animations
  • Spacing
  • Buttons
  • Images
Squarespace users are able to configure global design site styles for: Fonts, Colors, Animations, Spacing, Buttons, and ImagesSquarespace users are able to configure global design site styles for: Fonts, Colors, Animations, Spacing, Buttons, and ImagesSquarespace users are able to configure global design site styles for: Fonts, Colors, Animations, Spacing, Buttons, and Images

Use the presets that come with your Squarespace template, make slight tweaks to them, or program in completely custom ones. 

Regardless of which route you go, Squarespace makes light work of visually branding your website. 

While the logo is a crucial part of your website’s branding, you won’t be able to update it here. Rather than jump back and forth between the different panels, though, we’ll deal with the logo in a later step when we work on the header. 

Step 3: Build Out Your Pages

One of the benefits of starting with a Squarespace template — even if you intend on replacing most of the content— is being able to start a well-built and responsive foundation. The most important pages are there waiting for you. What’s more, the content and features that should be present on each page have most likely been accounted for.

To customize the template pages, go to the Pages panel:

Squarespace templates automatically generate the pages that users need for specific business types. This cafe template comes with pages for Menu, Our Story, Photo Gallery, Home, and ContactSquarespace templates automatically generate the pages that users need for specific business types. This cafe template comes with pages for Menu, Our Story, Photo Gallery, Home, and ContactSquarespace templates automatically generate the pages that users need for specific business types. This cafe template comes with pages for Menu, Our Story, Photo Gallery, Home, and Contact

The pages that say “DEMO” next to them are going to be bare bones in design. Most of them are filled with Lorem Ipsum filler content as well. So plan on heavily editing those pages. 

Starting out, though, turn your attention to the Home page. If you can nail down the look and messaging on this page, it’ll make customizing the rest much easier. 

Select Home from the list of pages and then click the Edit button in the top-left corner of the canvas. This will open the visual builder where you can: 

  • Add, delete, modify, or move sections.
  • Add, delete, or edit blocks. 
  • Add new imagery — your own or quickly import stock imagery from inside the builder.
  • Customize the content.
  • Edit the format of each section.
  • Configure critical elements — like call-to-action buttons and forms.
  • Do a responsive check and make mobile-specific customizations.

When you finish making your updates, click the Done button in the top-left corner to save your changes and exit out of the builder.

In addition to customizing the premade pages, you can also add new ones from the Pages panel. 

To add pages directly to the navigation, click the plus-sign next to the Main Navigation label. To add pages that are published but don’t appear in the navigation, click the plus-sign next to Not Linked.

Squarespace enables users to add new pages, new collections (like blogs, shops, and portfolios), and more from the Pages panelSquarespace enables users to add new pages, new collections (like blogs, shops, and portfolios), and more from the Pages panelSquarespace enables users to add new pages, new collections (like blogs, shops, and portfolios), and more from the Pages panel

Squarespace will allow you to create various types of pages. For example:

  • Basic pages
  • Wireframe layouts
  • Scheduling forms

It will also allow you to build out “collections”. These are areas of the site where you’ll regularly add new content. For instance:

  • Blog
  • Store
  • Portfolio
  • Events
  • Videos (courses or products)

Whatever you choose to create, Squarespace provides you with premade templates and layouts for each. 

Step 4: Do Some Light SEO Work 

There’s not a ton of control that Squarespace gives you over search engine optimization, but you should take advantage of the few tools you have. You’ll find a couple of them within the Pages panel.

Hover over each of your pages one at a time. Click the gear widget that appears and then work your way through the General and Social settings:

Under General, pay close attention to the following:

  • Page Title is the title that appears on search results pages. 
  • Navigation Title is the short and descriptive title that appears in your website header and is important for user experience.
  • URL Slug is the part of the hyperlink that describes the page. If possible, the keyword should appear in it.

Under Social Image, upload a unique and visually descriptive image for each page on your website. It’s important to set your own featured image so that it’s not left up to social media networks (or people sharing your content) to figure out which images should be associated with your pages.

There aren’t any SEO settings to configure from this Page Settings pop-up. However, if you click on the link within the SEO tab, it will take you to the Marketing panel.

Squarespace users can configure simple SEO settings to generate page titles and descriptionsSquarespace users can configure simple SEO settings to generate page titles and descriptionsSquarespace users can configure simple SEO settings to generate page titles and descriptions

From the SEO panel, you can set the basic rules for how your home page, internal pages, and item titles appear in search results. Squarespace also allows you to write a custom description for your home page (and website as a whole).

One other thing that can be done to improve SEO is specific to local businesses. Open up the Settings panel and go to Business Information. Enter all the relevant details for your business — phone number, email, physical address, and operating hours.

Squarespace users creating websites for local businesses (like restaurants) should fill in their business information: email, phone, physical address, and operating hoursSquarespace users creating websites for local businesses (like restaurants) should fill in their business information: email, phone, physical address, and operating hoursSquarespace users creating websites for local businesses (like restaurants) should fill in their business information: email, phone, physical address, and operating hours

Depending on how your template is set up, there may be fields that source data from this page and automatically place it on the frontend of your site. 

Step 5: Customize the Header

The website header can be customized when editing any of your pages. With your pages redesigned and personalized, you can now go in and customize it.

First, go to the Pages panel. If there are any pages under Not Linked that should appear in the navigation, drag-and-drop them up above. You can also use drag-and-drop to reorder your navigation links. 

There are additional navigation settings you may need here:

  • To delete pages you don’t need, click the gear widget next to the page and click Delete Page
  • To add external links to your navigation (which isn’t ideal, but you can still do it), click the plus-sign symbol and Link (under More options).
  • To organize your navigation into different levels or categories, click the plus-sign symbol and Folder (also under More).

Once your navigation is set, work on the design of your header, starting with the logo. Whichever page you’ve selected, click the Edit button. Then hover over the header area and click the Edit Site Header button that appears. 

Within the header editor, you can do things like:

  • Edit the title of your website.
  • Upload a logo for desktop and mobile.
  • Change the header transparency style.
  • Change the layout of the elements in both the desktop and mobile headers.
  • Add a call-to-action button.
  • Add a shopping cart icon.
  • Add social media icons.
  • Make the header fixed.

When you’re done, save your changes and the header will be updated site-wide. 

Step 6: Buy a Domain Name and Publish Your Website

Squarespace is a hosted platform, which means you don’t need to worry about finding a web hosting provider to store your site on. What you do have to worry about, however, is getting yourself a domain name. 

Squarespace will allow you to use the platform for free for 14 days to build your website. However, if you want your website to go public, then you must upgrade to a paid plan. 

To do this, go to the Settings panel and click on Site Availability. There are three options available:

  1. Public is available with a paid upgrade.
  2. Password-protected is useful for sharing a work in progress with team members or a client.
  3. Private is good for working on a website without prying eyes checking in on what you’re doing.
Squarespace users have the option to set site availability to Public (only with a paid upgrade), Password Protected, or PrivateSquarespace users have the option to set site availability to Public (only with a paid upgrade), Password Protected, or PrivateSquarespace users have the option to set site availability to Public (only with a paid upgrade), Password Protected, or Private

To publish your website and get a domain name for it, click the Upgrade to Publish button. 

Squarespace users can choose from 4 paid plan options: Personal, Business, Commerce Basic, and Commerce AdvancedSquarespace users can choose from 4 paid plan options: Personal, Business, Commerce Basic, and Commerce AdvancedSquarespace users can choose from 4 paid plan options: Personal, Business, Commerce Basic, and Commerce Advanced

There are currently four plans available. You can pay monthly or annually. Regardless of which plan you choose, a free custom domain and SSL certificate (which is essential for security and SEO) come with it. 

Review the options to find the plan that best fits your needs. The size of your team, the integrations you need, as well as the features you want to add will impact your selection.

Click the Select button for the one you want and complete the checkout process. When you’re done, you’ll be able to set up your custom domain name and to turn your website from Private to Public

Learn More About Squarespace

FREE
1.5 Hours

Squarespace Tutorial for Beginners

In this course you’ll learn how to use Squarespace for creating professional looking websites without writing a single line of code. 

    Conclusion

    It’s important to do your research when selecting a content management system to build and manage your website with. There’s much more to consider than just the price tag or even the platform’s popularity. 

    You’ll be using this platform to do things like update your content, publish blog posts, add products to your store, send out email campaigns, monitor website traffic, and more. So you’ll need something that you’re comfortable using and that comes with all the features you need. 

    The best way to decide if Squarespace (or a different platform) checks off those boxes is to see it in action. While I’ve provided you with various screenshots and videos that depict the six simple steps it takes to get a professional website up and running with Squarespace, it’s a good idea to experience it first-hand too. And Squarespace gives you 14 days to do just that. 

    Advertisement
    Did you find this post useful?
    Want a weekly email summary?
    Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.