About Disha Sharma
Connect with Disha Sharma: Twitter .
Youâ€™ll be surprised with how quickly and easily you can put together a gorgeous website with nothing but a domain name and Squarespace subscription.
In this Squarespace for beginners guide, weâ€™ll look at the exact steps you need to take to create and launch your first website.
Weâ€™ll cover the following Squarespace components:
Once you understand these components, youâ€™ll be able to build any kind of a website using the platform.
FTC Disclosure: BuildThis receives referral fees from tools listed on this website. But, the opinions are based on our experience and not how muchÂ they pay. We focus on helping small businesses and individuals to build websites as a business. Please support our work and learn more in ourÂ earning disclosure.
Before you start using Squarespace to build your website, youâ€™re going to need a few things:
As one of our website setup steps, weâ€™re going to link your domain name with your Squarespace account.
So, you will need a domain name. If you havenâ€™t purchased a domain name yet, purchase one now.
You can buy it from Squarespace too, but I wonâ€™t recommend that.
Domain transfer between hosting providers or website builders or CMSes is always easier when the domain is registered with a third party domain registrar.
NameCheap is an excellent domain name registrar service that gives competitive prices and great service. Check it out to buy a domain name for your Squarespace website.
Knowing your siteâ€™s navigation structure (or its main menu items) before starting to build it makes the process faster.
So take a paper and draw how your site menu will look like. This exercise will help in finalizing the different pages youâ€™ll be adding to your site.
For example, you could add some of the following pages to your site:
The last thing youâ€™ll need before you begin creating your site is content. So write rough drafts of all the pages that youâ€™re going to add.
Also, pile up all the images (or videos) youâ€™re going to need to build your Squarespace website. If you need stock images, arrange those too. Having the right images can have a huge impact on conversions.
Having all the content and media handy will a lot of time later.
Letâ€™s now begin with building the site.
(If youâ€™ve already signed up for a Squarespace trial, jump to the first part of the guide.)
All Squarespace plans begin with a free trial.
To sign up for a free trial, visit Squarespace and choose the option to â€˜CREATE A SITEâ€™:
Next, choose a template.
To make this step easy, Squarespace groups its themes into the following categories:
Here are a number of designs you can find at Squarespace themes. Click on the following thumbnails to have a clearer view.
For the purpose of this walkthrough, I set it up using my Squarespace account.
Iâ€™m going for the business category and am choosing the template, Montauk.
Once you choose a template, Squarespace will show you a short signup form:
Upon finishing the signup, youâ€™ll be directed to a 4-step Squarespace site content personalization process.
Upon completing the site content personalization questionnaire, I see the following screen.
As you can see in the screenshot, on the left, thereâ€™s a panel with various design settings and preferences. And on the right, thereâ€™s a preview of my website.
Squarespace has 10 items under its design settings:
Letâ€™s take a detailed look at each of these elements.
Weâ€™ve already given our site a name, and so in this step, Iâ€™ll add a tagline. Letâ€™s set the tagline to â€˜A resource for Squarespace beginnersâ€™.
Once I click on the button, Iâ€™m directed to Squarespaceâ€™s logo maker tool.
This logo maker tool lets you:
Overall, Squarespace's logo maker tool is pretty intuitive. It has its various design elements or icons on the panel on the left-hand side.
When I searched for the keyword â€˜websiteâ€™, I got many great icons. I chose the one you can see on your right and made an image logo.
I tried to download a high-resolution version of the logo, but the editor prompted me to sign up for a Squarespace account to be able to do it.
But still, a low-resolution version can be downloaded at this point too. That will do for now.
Once your Squarespace trial ends and you upgrade to a premium plan, you should be able to download the high-resolution version without any problem. When you get the high-resolution file, you can upload it to your Squarespace site.
The next two options under this design item are setting the favicon and the social sharing logo. If you have these, great. Otherwise, move on to the next setting.
To save the changes youâ€™ve made so far, click on the â€˜SAVEâ€™ button on top of the panel.
Note: If youÂ want to create an awesome favicon for your website, here is a list of free favicon generator you can have a look.
The â€˜Templateâ€™ section shows all the templates that are downloaded inside a Squarespace site.
Right now, as you can see, my templates list just includes the template Montauk because this is the template I signed up with when setting my trial.
If youâ€™re happy with the template youâ€™ve chosen, go to the next step. Or, you can download more templates.
If you see a Squarespace template you like and wondering what theme it's using, here's how to find out,
The template, Montauk, I'm using is having the template id:Â 50521cf884aeb45fa5cfdb80. Try yourself.Â
After finding the template id, you can refer to theÂ Squarespace templateÂ familyÂ to take you to the official Squarespace demo site.
The Style Editor is used to customize a templateâ€™s settings such as its fonts, title color, logo position, footer contents among several others.
Each template will offer different customization options in the Style Editor.
But because all the Squarespace templates are designed to perfection, Iâ€™d recommend staying away from this section, unless of course, youâ€™re a designer!
The Checkout Page Style Editor helps in customizing the settings of the checkout page. This setting is mostly helpful to Squarespace sites that have stores or are store websites.
Squarespace allows you to lock pages with passwords. All such pages donâ€™t display the contents but show a lock screen.
If you donâ€™t customize the Lock Screen at all, hereâ€™s how it will look.
The Announcement Bar lets you add a sticky notification on the top of your site. This is an excellent feature to draw your readersâ€™ attention to some of your important content.
Once you enable the Announcement Bar, you can add your message and the link the users should click on.
As you can see in the above screenshot, you can make the link open in a new window.
As the name suggests, the Mobile Information Bar displays before mobile users and can be used to display your email, phone number, location, and business hours.
Squarespace fetches this information from its â€˜Business Informationâ€™ section, which weâ€™ll see later. Â
Squarespace adds its branding (badge) to all the websites built with it.
The Squarespace Badge settings let you enable or disable the Squarespace badge, adjust its position, and fine-tune the display settings.
If you want to customize your template beyond the font, colors, and other default customization options, you'll have to take the help of Custom CSS.
Remember that adding custom CSS can break the design of a template â€” not recommended.
The Advanced option lets you add more fonts from Typekit to your Squarespace website. The Advanced settings also have advanced template settings.
So that wraps up the design part of your Squarespace site.
Next, weâ€™ll look at Squarespace pages and how you can use them to upload content to your freshly designed site.
Once youâ€™ve chosen a template, customized it, and added your siteâ€™s title and logo, itâ€™s time to start adding content.
Letâ€™s start with the main menu.
When you access the pages settings for the first time, youâ€™ll notice that the â€˜TOP NAVIGATIONâ€™ shows the menu items from the demo.
For now, Iâ€™d like you to just forget about the pages from the demo and start adding your own pages.
For each page that a site typically needs, Squarespace has provided pre-made templates.
For example for pages like the About, Features, Store, Contact and more â€” you already have ready-to-use page layouts that you can just load to your site.
Letâ€™s see how you can add a page to a pre-made template.
As you can see in the following screenshot, there are two â€˜+â€™ signs you can click on to add a page to your site.
When you click on the first option, you donâ€™t just add a page, but you also add it to your websiteâ€™s main menu.
And when you click on the second option, you simply add a page.
Iâ€™d suggest you to start adding a page with the second option. After youâ€™re done with creating the pages, delete all the demo pages, and drag all your freshly generated pages and drop them under the TOP NAVIGATION.
Letâ€™s add an â€˜Aboutâ€™ page.Â Once you click on the item â€˜Pageâ€™, youâ€™ll see the following options on the panel on the left-hand side:
Once I click on â€˜START EDITINGâ€™, the selected about me page layout gets loaded in Squarespaceâ€™s page editor.Â To edit the page elements, hover on the pageâ€™s top (which is right under the navigation), and youâ€™ll see the following options panel open up:
Click on â€˜EDITâ€™.
At this point, you can either start editing the page content, or you can click on the â€˜+â€™ sign at the top of the page to add more design elements to it.
Once you add an element to your site, itâ€™s easy to rearrange its position with the simple drag and drop functionality.
If you customize the default layouts and add different elements including the spacer element, sometimes your mobile preview can look funny â€” more so, the spacing between the different elements can look a bit off.
(The default layouts render beautifully, though.)
Adding other pages is similar to adding the about page.
For now, itâ€™s best to use the default layouts if you want to get the site up and running super-fast.
At the end of this step, you should have all the pages of your site ready to be moved to the main menu.
But before making the move, delete the demo pages.
Next, drag and drop your newly-made pages to the â€˜TOP NAVIGATIONâ€™.
Once youâ€™ve cleaned up your navigation, itâ€™s time to work on the pages.
To add content (or to customize the design of a page), just click on the pageâ€™s name.
Once you click, the page editor will load and you can replace the templateâ€™s content with the content you wrote in the preparation steps.
High-level page settings can help with a pageâ€™s:
To make higher-level changes to a page or to delete it, click on the settings icon next to a pageâ€™s name.
Also, to set a page as the homepage, you need to open these settings for the selected page and choose the â€˜SET AS HOMEPAGEâ€™ option.
Although you can add a blog as a simple page in Squarespace, you may need to do a few additional settings for it.
To add a post, click on the â€˜+â€™ sign on the blog menu item options.
The post editor is pretty intuitive.
At the bottom, you will see settings to add a category and tags to your post.
The Options settings let you:
Hopefully, with the above section, youâ€™ll have a great looking website ready with your content and even a blog.
Letâ€™s now look at Squarespace settings.
Using Squarespaceâ€™s settings are easy. They are grouped into 3 categories:
Of these, the â€˜Generalâ€™ category allows you to add business information like your business name, address, tax id, and more.
And the â€˜Commerceâ€™ settings are relevant to someone who wants to run an online store or add a store to their site.
Of these categories, the â€˜Websiteâ€™ category is the one Iâ€™d like to talk about.
The â€˜Websiteâ€™ settings include:
If youâ€™ve been following this guideâ€™s instructions, by now your first functional (if not a perfect) Squarespace website should be ready.
Once you launch a new website, your first task is to get it indexed by Google.
To speed up the indexing process, you must submit its sitemap to Google Search Console.
A Squarespace websiteâ€™s sitemap can be found at:
So copy your websiteâ€™s sitemap URL and submit it via Search Console.
Creating a Squarespace website and tweaking and customizing it to perfection shouldn't take you more than a week. Once youâ€™re done, you donâ€™t have to worry about updates or hacking or hosting or anything else; Squarespace will manage your website for you.
I hope this guide equips you to build a rough version of your first Squarespace site in less than 10 hours (factoring in time for buying the domain and other things).
Note: If you looking for alternative platforms, here is a list of 16 platforms to build your own website.