Squarespace is one of the most popular website builders in the market today and if you’re looking for a simple step-by-step Squarespace guide to quickly build a website, this article is for you. Squarespace is easy to use, affordable, and offers powerful features (and it’s not complicated like WordPress).
Table of Contents
The best part about Squarespace is that anybody can use it, so it’s a safe bet for those who don’t know how to build a website. What’s most appealing about the site builder is that it has pre-designed modern templates for almost everything – site themes, elements, blocks, etc.
Whether you want to create a simple blog or run an online store, you can easily build a website using Squarespace.
In this Squarespace tutorial, we will show you how to use Squarespace to create a website, with plenty of videos and screenshots to help you along the way.
Get Started For Free
Creating a website with Squarespace is pretty straightforward. The first thing you need to do is head over to Squarespace and click on the ‘Get Started’ button. Simple!
Squarespace’s pricing plans range from $12-$40/month, and if you’re paying on a monthly basis, you might have to pay a bit more. But you don’t have to worry about this right now. Squarespace offers a 14-day free trial where you can check out the website builder and its features and decide if it fits your requirements.
Start Building Your Website
Once you click on the ‘Get Started’ button, you’ll be prompted to answer some questions about your business or website. Although these answers don’t really affect your site-building experience, they’ll help Squarespace offer more personalized recommendations based on your business, interests, and goals.
If you don’t want to answer these questions and skip right to the site templates you can simply click on the ‘Skip’ button.
Choose a Template
Squarespace has some really modern and beautiful website templates that you can choose from. You don’t have to pay additionally for any template – everything is included in your subscription.
Squarespace has its template library neatly organized based on the niche/purpose of the website.
You can browse templates by industry (from ‘Photography’ to ‘Online Stores to ‘Restaurants’ to ‘Blogs & Podcasts’), or by popular designs.
Hover over a template and select ‘preview’ to see what the website will look like with demo content. If you want to change Squarespace template in easy steps, our guide might be helpful to you.
Looking through the popular designs is a good starting point, but we’d recommend that if your niche/industry is available in the browsing section, make sure you preview those designs as well.
All the templates are neat, modern, and beautiful. While that’s a good thing, it might be confusing to pick one because let’s face it – we all love a well-designed site template, and if we’re given so many choices, we might feel overwhelmed, take a lot of time deciding on a template, and then get frustrated at the beginning itself.
Here are a couple of things you should keep in mind while choosing a template:
- Stick to your niche – each template is designed to cater to a particular industry and it is optimized in that way. So if you pick a ‘Restaurants’ theme, you’ll see elements like reservation, book a table, gallery, and location already built into the template.
- Use the ‘Favorite’ option to bookmark the templates you like most – this is a simple way to narrow down your choices, and also make it easier for you to compare your top choices.
- Don’t overthink it! – the good thing about Squarespace is that it lets you switch templates easily. So even if you want to change it later on, you can do it in a few simple clicks. So, don’t overthink it and pick one at this stage.
Once you have found the perfect website template, hover on it and click on the ‘Start with [template name]’. In this Squarespace tutorial, we’re going to go with the ‘Auburn’ template from the ‘Restaurants’ category.
Sign Up
After you have chosen your template, you’ll need to log in with your Google account or sign up with an email address.
At this point, you can either give your site a name, or you can edit it later on in the Squarespace editor.
Squarespace will then show you certain steps to get you started with the design of your website. You can easily skip through these because, in this Squarespace tutorial, we’re going to take you on a virtual tour showing you the EXACT steps you’ll need to take to build your website.
This is what our template looks like in the editor. Here, we’ll play around with the different design and customization options, and tell you how to quickly get your site up and running within a few simple steps.
Get Your Custom Domain Name
A domain name is the address of your website that people will type in the browser URL to visit your website. There are many ways you can get your own domain name:
- Purchase from a domain registrar and transfer it to your Squarespace account. Click on Settings > Domains > Use a Domain I Own, and Squarespace will show you the exact steps to follow to use your domain name.
- Get a domain through Squarespace. You can go to Settings > Domains > Get a domain and buy a domain for $20/year. While this is a bit expensive compared to getting domains from a registrar, it’s the easiest and simple way to get a domain.
Add/Remove Pages
A website is simply a collection of different web pages tied together seamlessly, so the first thing, even before you get to the designing part of your website, is to create the pages that you need.
Adding pages
We’ve chosen a restaurant theme that by default has the following pages: Home, Menu, Reservations, News, and Locations. Now that’s pretty good and convenient because you already have the essential pages right there, well-designed and optimized for your business.
See how choosing the right template based on your niche makes it easier to further design and customize your website?
Now, let’s suppose you need to add a Blog section to your website where you’ll feature the best dishes, talk about food inspirations, or even share new ideas and events.
Here’s how to add a Blog to the website:
Go to ‘Pages’, where you’ll see all the existing pages on your website:
Click on the ‘+’ button to add a new page to your website.
Once you click on a page, you’ll get different layout options. In this case, we’re adding a Blog, so we get 4 different layouts that we can choose from.
Next, select a layout, and it’ll be added to your website – easy peasy! You can then click on the ‘Blog’ page and further customize each blog according to your style and content needs.
Removing pages
Deleting pages from your website is as simple as adding them. Just hover over the page you want to remove from your site, click on the settings icon, and you’ll find the option ‘Delete Page’. Click this icon, then ‘Delete’.
Edit Pages
So far you have added the necessary pages to your website, and it’s time to dive into the design and editing part.
What we like most about Squarespace is that it has no learning curve involved, so if you’re a beginner designing your first site, Squarespace is probably the best site builder you can use. And, the process of editing your pages is proof of that.
Here we’re editing our homepage. The Squarespace editor allows you to modify different elements, blocks, sections, header, and footer, and change the background images, font, and overall design of your page.
To give you a better idea of how to edit your pages, we’ve created this video where we experiment with adding sections, and elements, changing font sizes, and much more.
To edit a particular section, you simply need to hover over it and click on the pen icon. The editor will then show you different options based on the element you’ve chosen. For example, if you hover over text, you’ll get options to change the size, add bullet points, and quotations, use bold, italics, etc.
Similarly, if you click on an image, you’ll get options to change the formatting of the section, content width, alignment, background image, and even the theme’s colors (like White Minimal, Light Minimal, Dark Bold, etc)
To add a new section, hover between two sections and click on the ‘+’ icon. Here’s a quick list of the different types of sections you can add to your website.
While many website builders offer pre-designed sections and templates, the good thing about ‘Sections’ in Squarespace is that the templates are very modern and professional-looking. So you don’t have to fidget a lot with the colors or the placement of the font.
We really like the designs as is, but if you’d like to customize them to suit your needs, you can easily do it by editing the sections.
For instance, we added a Contact Form on our homepage that’s minimalistic and offers a strong CTA. If you want, you can easily modify the design, background, layout, and a lot of different elements.
Don’t like the order of the sections on your page? All you have to do is click on the section you want to move and then drag it higher or lower on the page.
When you’re done adding, editing, moving, and removing sections, make sure you click on ‘Done’ and Save your progress.
Adjust Design And Add Branding
Now the basic structure of your website is in place with all the main pages added/edited. So we’re going to tweak the design of the website and add some branding to make it more personalized.
Here’s a quick video that shows how to adjust design and add branding to your Squarespace site.
Change fonts and colors
Click on the ‘Fonts’ section and choose a ‘font pack’ that you want to apply to your site. Also, change the base size of your font which is basically the overall font size of your website. So let’s suppose you want to reduce or increase the font size of the entire website, you can do it from here.
You can apply global styles that will appear across your site and change individual fonts for the headings, paragraphs, buttons, and miscellaneous (like tags, product prices, etc). There are multiple things that you can modify in your global font including the weight, style, line height, letter spacing, uppercase, lowercase, and base size.
You can see all the changes in real-time which make it easier for you to choose the right design and see your site exactly how it will look to your audience.
To edit the color theme of your site, you can choose a pre-built color palette that suits your brand style. Alternatively, you can choose a custom color, use an image to pull out the colors you want for your site or edit a specific color palette.
In addition, you can set color themes to individual sections like White Minimal, White Bold, Light Bold, Dark Minimal, etc depending on your style and the feel you want to give to your site.
Animations and styling
To add ‘Animations’ to your site, you can select a style to make your content ‘fade’, ‘slide’, or even ‘flex’. Plus, you can set the speed of the transition – do you want a particular section to fade in slowly? Do you want to slide in your contact form at medium speed? All of this can be easily done under Animations.
Pro Tip: Adding animations to your site can be visually appealing, but make sure you have smooth transitions that flow seamlessly as a reader scrolls through your site. Sudden movements or transitions might feel intimidating to the end-user.
Under ‘Spacing’ and ‘Buttons’ you can make minor changes such as line width, button outline, button shape, padding, etc. And, under ‘Image Blocks’ you can tweak your image settings such as the text alignment, title separation, image width, and more.
The important things
At this point, you’ve got your content covered. The font is in place. The design looks nice. The theme is flawless. The images are all ready! We’d say you’re almost there.
What’s missing? The important things that might go unnoticed at first. And these elements play a big role in defining your brand identity, establishing consistency across all touchpoints, and giving a complete end-user experience.
Design > Browser Icon
First things first, a browser icon, also known as a favicon is the browser URL icon you will use for your site. Squarespace allows you to upload a favicon from your system. The default Squarespace favicon is this:
Design > Checkout Page
If you’re selling your products/services you need to add a checkout page on your site. While we’ve already shown you how to add a new page to your Squarespace site, let’s quickly take a look at what you can change design-wise in your checkout page. You can modify the background color, add a site logo, title color, and more.
For this Squarespace tutorial, we’ve chosen to keep our checkout page design settings as follows:
Design> 404 page
When someone tries to access a page within your site which currently doesn’t exist, a 404 page is displayed to the user. This might happen due to a dead link or an incorrect URL. Squarespace offers a default page with a copy, but we recommend you modify the content so that it aligns with your brand and the rest of the site.
Additionally, you could also redirect someone to one of your live pages on the site. So when a user clicks on a broken link, they’re instantly redirected to another page that’s live on your site. For instance, we set our homepage instead of having a 404 page.
Design > Social Logo
A social logo is an image that represents your content when you share it on social media. Squarespace offers you the ability to add custom social logos for sharing, which is great. Since our demo template is for a Thai Restaurant, we put up a beautiful flat-lay of some Thai food.
Add Site Information And Configure Key Settings
If you’re still here, it’s reasonable because you’re now seeing how easy to use Squarespace really is, and more importantly, if it fits your budget, you won’t mind giving it a try. So we’ll get to the pricing in the next chapter to help you decide whether Squarespace is value for your money and if you should go for it.
So before we hop on to the Squarespace pricing plan or publish your site, there’s some admin work that you need to complete first. Under ‘Settings’ you’ll find different things that you need to modify in your website.
In this section, we’ll cover all the essentials that you need to take care of, but you might find other options relevant to your site depending on your industry, business goals, and competitors.
Language and Business Information
Click on Settings > Language & Region to select a language, location, and time zone.
Go to Settings > Business Information to fill in your contact details, address, and business hours (if applicable).
Social Media
If you’re on social media, you wouldn’t want to skip this point. You can easily connect your social media accounts to your site from Settings > Social Links. On this site, we’re only mentioning Yelp, Instagram, and Facebook, but you can always add more social links if you want.
Preview Your Site
It’s important that you preview your site to get the look and feel of how it would look to your visitors, before publishing your changes.
To preview your website:
- In the Squarespace editor, you’ll see two icons of different devices above the website’s preview.
- Click on the Mobile and Desktop icons to see how your website will appear on each.
- Next, a New Window Preview will appear where you’ll see what the website looks like on mobile and desktop without the editor.
Here’s a little video snippet that’ll help you in this process:
Here’s what the Thai Kitchen website will look like on the desktop.
Also, here’s the Mobile Preview for the site. There’s also an edit option right in the preview, so if you want to modify some elements, you can do it right there in the window itself.
Choose a Pricing Plan
Squarespace offers a 14-day free trial so that users can see exactly what features they should expect from the site builder before they officially commit and become paid members.
There are four Squarespace pricing plans:
- Personal: It costs $12/mo (when billed annually) and $16/mo (when billed monthly)
- Business: It costs $18/mo (when billed annually) and $26/mo (when billed monthly)
- Basic E-commerce: It costs $26/mo (when billed annually) and $30/mo (when billed monthly)
- Advanced E-commerce: It costs $40/mo (when billed annually) and $46/mo (when billed monthly)
Each of the plans differs in terms of the features they’ll offer and it ultimately depends on your needs. But we’ll make it simple for you to pick the right plan for you.
- Who should buy the Personal Plan? If you’re a beginner who simply wants to create a portfolio or host a blog, then the Personal Plan should be good for you. It allows up to 2 contributors and offers templates that fit every need from Blogs to Portfolios (as mentioned in the above image) and Squarespace extensions.
- Who should buy the Business Plan? This is the most popular Squarespace plan that gives you good features that’ll work not just for beginners but also cater to the needs of advanced users. With this plan, you’ll get premium Squarespace extensions, professional email from Gmail, complete customization with CSS, fully integrated eCommerce, and advanced website analytics.
- Who should buy the Basic Commerce Plan? If you’re looking for eCommerce features such as point of sale, customer accounts, powerful e-comm analytics, and more then you should consider this plan. You can also connect your Instagram to your site and sell products on Instagram via this plan.
- Who should buy the Advanced Commerce Plan? This plan is most suited for small businesses that want to access advanced eCommerce features such as the ability to offer subscriptions, advanced shipping, discounts, commerce APIs, and more.
Squarespace Tutorial: Conclusion
Squarespace is one of the best site builders and there’s no doubt that it’s one of the easiest to use and most intuitive. In this Squarespace guide, we took you through a complete walkthrough of all the steps you need to take in order to build your website on Squarespace.
We tried to keep it simple and to the point so that you can go ahead and keep this Squarespace tutorial handy whenever you create your website.
To recap, here are the topics we covered in this Squarespace tutorial.
- Get started for free
- Start building your website
- Choose a template
- Sign up on Squarespace
- Get your custom domain name
- How to add/remove pages
- How to edit pages
- Adjust design and add branding
- Add site information and configure the site
- Preview your site
- Choose a pricing plan
If you want to give Squarespace a try, you can start a free trial of the website builder by clicking on the button below. Sign Up For Squarespace Today
We hope you found this Squarespace tutorial useful. If you have any questions about the platform or feedback, please leave a comment below, and we’ll get back to you as soon as possible.
