Squarespace is one of the most popular website builders in the market today and if you’re looking to quickly build a website, this is one of the best site builders you’ll find. It’s easy to use, affordable, and offers powerful features (and it’s not complicated like WordPress).
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.
Ease of use
Site Building & Flexibility
Site Design & Customization
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.
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.
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 going to look like with some demo content.
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 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:
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.
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 guide 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.
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:
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 pages that you need.
We’ve chosen a restaurant theme which 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 on the 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.
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’.
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 who is designing their first site, Squarespace is probably the best site builder you could use. And, the process of editing your pages is proof of that.
Here we’re editing our homepage. Squarespace editor allows you to modify different elements, blocks, sections, header, footer, change the background images, font, and the 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, elements, changing font sizes, and much more.
Video [ Squarespace Edit Pages]
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, 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.
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.
Video [ Squarespace Design]
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 makes 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.
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.
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.
First things first, a browser icon, also known as 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:
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 site logo, title color, and more.
For this Squarespace tutorial, we’ve chosen to keep our checkout page design settings as follows:
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.
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 flatlay of some Thai food.
If you’re still here, it’s reasonably 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 money and if you should go for it.
Spoiler Alert: Squarespace is quite affordable – another reason why it’s so popular. But it has different pricing plans and you should know exactly which one will work best for you.
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.
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).
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. In this site, we’re only mentioning Yelp, Instagram, and Facebook, but you can always add more social links if you want.
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:
Here’s a little video snippet that’ll help you in this process:
Video [ Squarespace Mobile preview]
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.
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 a paid member.
There are four Squarespace pricing plans:
Each of the plans differ 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.
Squarespace is one of the best site builders and there’s no doubt that it’s one of the easiest to use and 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.
If you want to give Squarespace a try, you can start a free trial of the website builder by clicking on the button below.
We hope you found this Squarespace guide 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.