TechwithAbhijeet

How to create a website in Squarespace: The definitive Guide

What Is Square Space?

Squarespace is an all-in-one website builder, so there is no need to keep finding plugins. 

With a single subscription, you can create a website, host your content, register your custom domain name, sell products, track your site’s analytics, and almost anything else you want..

Squarespace was originally founded in a dorm room back in 2003 by Anthony Casalena. Over the past 15+ years, millions of websites have been made with Squarespace, and it has significantly grown since then.

Squarespace has been used worldwide and currently has one million+ websites, and it’s probably the easiest way to get your website up and running on the internet.

Here is a Squarespace usage statistics by builtwith.com shows that which shows that

Currently, ~3,848,950 websites are using Squarespace

Squarespace trends by Builtwith

Square space is one of the best website builders and probably the best if it’s about useful templates, blogging features, and fully responsive templates. Here is a comparison by webcreate.io, which ranks it number 2 in a detailed analysis of ten website builder tools.

 Square space is like a designer’s dream with 100+  beautifully Designed responsive templates for every style and purpose and design tools. It is relatively easy to use and follows a grid-based design pattern.

 It also takes care of other essential aspects like SEO, ECommerce, Monetization, and visitor stats and analytics, which can be confusing if someone is just starting with a website.

So if you are ready to build your first website, Squarespace is one of the best options for you to consider.

In the next section, I’ll walk you through this simple step-by-step process of creating your website with Squarespace.

9 Step Guide For Creating Your Squarespace Website

Plan Your Site And Gather Content

I know that this tutorial is about getting your website up and running online quickly, but this step is crucial. 

So before beginning with Squarespace and building stuff, make sure that you have done your preparation work beforehand and have an idea that what you are going to design.

I know that it seems counterintuitive to spend time doing the prep work like preparing your content and optimizing your images, but it will make a massive difference to the amount of time to build your site.

You can skip this step If you are just testing Squarespace and exploring the platform. 

Signup On Squarespace

So if you are going to use Squarespace, Signing up on Squarespace is kind of the first obvious step for getting started. So when you Squarespace.com, you should see a clean looking homepage like this:

Now to sing up with Squarespace, there is no direct sign-up link displayed on the page. So you need to click on the ‘LOG IN’ link on the top right corner. Next, you should see a screen like a screenshot below.

Now this page shows you form to Log In to Squarespace. Click on the ‘Create your account’ link on the top right corner and sign up with your Email.

So your account is set up? Let’s just move to step three and start the real work.

3. Select a theme

So if your account was correctly setup with Squarespace, you should see ‘Create A Site’ link in the header section on top-right corner. If you don’t, go to ‘https://account.squarespace.com/,’ and you should see it on the top right corner.

So just click on ‘Create A Site.’ and it would take you to a page asking you to choose your template. 

Now, remember, it’s an important step, though you would be able to make changes in theme still a theme that looks good for your niche might be more helpful.

Squarespace gives more than 100+ beautifully created templates, and it has categorized them into multiple sections.

You can check templates for your specific category, which will narrow your search for the perfect template.

So take some time to explore these templates, and if you find it challenging to select one, maybe shortlist a few and check their preview and demo websites. That might give you some idea of how your site might look like.

Adding Pages To Your Squarespace Website

So if you have made your mind on your template, click ‘Start With X(Your theme name).’ You should see a page asking you for details about your website.

Just fill this and hit Continue. You should see a page with ‘Edit’ options on left and preview of your website on the right side.

So your demo website looks excellent out of the box. Right? Let us add the essential pages you will need for your website.

On the left edit section, choose ‘Pages’; in the next screen, you see options for adding/ editing pages. Press the plus icon on the top right and select what pages you want to add. I have added a ‘Blog,’ ‘Store,’ and a ‘Portfolio section.’

Adding blog:

When you select ‘Add Blog,’ it opens a modal displaying multiple template styles. 

Select a style which you would like for your blog post and click next. I have selected ‘Blog 2’ for mine for this tutorial. The next screen displays a preview for the blog section on the right and Blog Add/Edit section on the left.

The blog section on the left shows all essential actions for maintaining your blog on your website.

On the top right corner, we have a Plus icon for adding a new blog post.

It follows a tabbed format for displaying All posts, Drafts, reviews, and scheduled posts. Which makes It easy to navigate and maintain

If you need to make some changes on a published post or you want to delete it, just hover mouse on it, and it will show the Edit/delete option for the blog post.

Currently, you will see some dummy blogs in your blog listing as they were imported when you selected your blog post format. You can delete them and add your blogs. For this tutorial, I am not removing them and will add one more blog post.

Add plus icon in the top right section, which will open a  screen on the right for start writing your blog post.

Edit blog post has a WYSSYT kind of editor. And it allows you to start your blog post with plenty of editing options. So let’s just add content and finish the first blog. Editor

is super intuitive to use and does not have much learning curve. So From adding images to embedding video, everything is so smooth and a breeze to work.

Lets just add a favicon image with it. On your sticky header, top right corner, there is a wrench like settings symbol.

Click on settings and it will display a modal with more blog settings options. This allows you to configure your post for SEO/ Social media/Add location options, but for now we will only add a favicon image. 

So just click on Options tab and it will display the option to upload your favicon  image on the right part of the modal.

So you are done writing your blog post. So let’s just publish it. Do you see a button on the leftmost side of the sticky header?

 Move your mouse on it, and it will show your options to schedule/publish your blog

So click on publish, and your first blog post is working now.

It looks good and great. Right? If you have ever struggled with other frameworks to configure everything and set up a clean interface for your blog, you will appreciate the Squarespace for doing a great job.

Let’s add one more page to our website and since I am using a photography website for my example. So let’s just add a Portfolio page.

So go to ‘add pages’ section and add a Portfolio page(Same steps, we did for adding a blog page). 

Select your portfolio design(I have selected Portfolio 1) and you would be sent to your portfolio page. For now it shows you demo images, so let’s just replace them with your custom portfolio images. 

As I am not a real photographer and do not have a real portfolio so I have downloaded some images from Pixabay for the demo. Click on settings button in front of portfolio image listing

And on the next screen you will see a modal screen to replace image and other settings. 

So remove the image and insert your own images. I have done this and replaced 4 images with my custom images and here is how my portfolio looks like.

And this is how my portfolio page looks like.

Add Site Logo and Title

Though we have added a Blog and portfolio section on your website, still we have not added a logo and a site title. To edit your title:

  1. Click Edit in the top-left corner of your site preview.
  2. Hover over the header and click Edit Site Header.
  3. Click Site Title & Logo.
  4. In the Site Title text field, enter a site title or if you might want to use a logo image instead of a text-only title. When you upload a logo, it appears in the same position as the site title
  5. Hover over Done and click Save.

So can you see your logo on the header?If you can, you are done and Let’s move to the next step and customize your website and let’s explore options.

Lets design and customize your website

Now it’s about designing your website, Squarespace is a giant and there are a lot of options available in Squarespace. So you will need some time to explore things but the good part is that you will not need much design expertise to get started with.

You should start by going to the Design menu on the home tab and see what options Squarespace have here.

Change Fonts and Colors

To change your fonts and colors, the Design section has the first two columns where you can easily set your global colors and font values.

The Fonts section shows multiple options for fonts and in Colors you can set your color palette for your theme sections.

Editing sections in Square space

Squarespace templates use sections which are kind of grids. So you can edit them, move them, add new sections. So let’s add a new section on our home page.

Now though I like the current design of template but I would like to add a section above for adding some meta information about my website.So lets add a new section. So first click edit and then when you hover on this section, it will show a Plus icon to add more sections

When you click the add button, Squarespace a modal screen with multiple predefined templates for the section. So choose what you would like or take a blank one, and design you section.

I have taken template from ‘Headline template’ section and used it for section design.

Lets see, how our web pages look like.

Adding/editing images to your website

Adding images in Squarespace is smooth and really easy to use. So let’s start by editing a few default template images.

First, let’s change the default backend image used on the homepage and some  custom images for the website.

To edit the default template’s images, hover the cursor in the top left corner, then over an image, then click ‘Edit’. Easy.’

It opens a small popup with a replace background image option. From here, you can replace the image by clicking the garbage can.

Also it allows you to search for a stock photo from Getty images.Click on replace and upload your custom image.

Now let’s add one more section and add images to it.So add one blank section and click on it. You will see an Insert point to the left of the section. It should look something like the image shown below.

Click an insert point and select an image block for adding an image.

When your upload is complete. Its popup window on the side shows an option for editing images.If you want to edit uploaded image, click on Edit image and it will open a new screen to edit your uploaded image.

Editing text

Design of the website looks good to me and we are almost done with the design. Let’s just change default text and learn about adding/editing text in Squarespace. 

We have not changed the default text yet. So let’s change the default text.

Click to the page area or section  you’d like to edit the text on the right side preview page. When you click on text it would allow you to edit text by just typing directly and would show formatting options for text just above text. 

You can select the text for which you need formatting and then select your formatting options from the floating bar which shows formatting options.

If you want to add more text in a block/section. Edit it, and click on the section. On click, you should click on the insert point and select the text block.

When you click on select text block. It creates a text block, so you can write directly and format it as you did previously.

Connect and Update Domains

So since your website is almost done it’s time to publish your website online. Currently if you see auto-assigned name by Squarespace, it will not make much sense. 

URL for this demo website is https://bulldog-fish-jmkb.squarespace.com/, and it’s bad. Right? Who is gonna remember it? 

So let’s personalise our domain name so people can remember it and they do visit our website.

So if you don’t have a domain name yet. You can create a subdomain for trial. So if you auto-assigned domain name is like https://bulldog-fish-jmkb.squarespace.com/, we can get rid of ‘bulldog-fish-jmkb’ part but the ‘.squarespace.com’ part will remain appended.

To change it go Homepage > Settings > domain

So if you already have a domain name. You can select ‘USE A DOMAIN NAME’ and if you don’t have a domain name, you can use a personalized domain with ‘.Squarespace.com’ appended to it. 

Since I don’t have a domain to attach, so I have changed the Build-in domain.

Integrate marketing tools

Now if you want to integrate some marketing tools with your website, you should have atleast business plan activated. 

For adding marketing tools, On the home page click ‘Marketing’ on the main menu, you’ll see everything you need for promoting your Squarespace site. 

But since we are just beginning and our motive is to get your website up and running quick. We will skip this step for now as you will not need most of these marketing integrations in the beginning. We will cover it in detail in some other blog post in future,

Launch Your Site

We are almost done with our website.So lets just launch your website. You have already set up your domain in step 7 right? So if you are satisfied with your work, let’s just launch your website.

Now remember there is no ‘Publish’ button like other website builders here but your trial website is already up and running actually. But as it’s on trial, No search engine can crawl your website, so basically nobody can find your website, until you share a direct url.

To get it online available for everyone and search engines, you need to upgrade your plan now.

Do you see a bar in the bottom asking you to subscribe for a plan? So click on it and it will take you to the pricing page.

So check all the plans in detail and select one which is suitable for your website and upgrade to a plan and your website will be live for everyone. So  have you upgraded your plan successfully? If yes, your website is online and it’s available for everyone.

Pros and Cons of Square space

Pros 

  • Uncluttered and easy to navigate interface  modern interface
  • Easy to use and minimal learning curve
  • Great for blogs, portfolio’s and simple stores.
  • Great for visual content with less text
  • Beautifully designed mobile responsive templates
  • Better blogging tool and better support than most competitors
  • Excellent support for multiple contributors
  • Great analytics system.
  •  Better inventory management than other platforms like Wix and Weebly

Cons

  • Does not have a free option and trial period of 14 days is not enough
  • Grid based approach restricts free drag and drop approach Eg, A simple option like drag and dropping image to other section is missing
  • Lesser integrations options than other platforms
  • Comparatively less customization options.
  • Limited SEO configuration options.
  • Limited payment gateways support
  • Templates are not fully optimized as they perform poorly in Google page insights.

Exit mobile version