Prefer to watch?

Here’s the step-by-step video!

Mentioned in the video:

Rather read about it instead?

Here are those steps written down…

Feeling overwhelmed by all the tech it takes to get your business up and running online?

If you’re ready to cross the massive to-do of building a site off your list then you are in the right place!

By the end of this tutorial, you will have a solid grasp of how to get started with the latest version of Squarespace, so you can confidently build and maintain your own site without having to pay a pro designer to get the job done!

How to Build a website using Squarespace 7.1

Step 1:

Start a free trial & create your Squarespace account

To get started, we first need to make sure you are set up with a Squarespace free trial to start building your site on.

To do this head to Squarespace.com and click Get Started.

It’s going to ask you a few questions to get to know your biz and the purpose of your site, but there’s actually a better way to pick a template, which I share in this template picking video for version 7.1 here. 

So just go ahead and skip over the questions they ask and head straight to the template shop!

To get started building on your chosen template, just hover over the one you want and click Start.

If you don’t already have an account with Squarespace, you’ll be prompted to create one, so go ahead and pop in your details when they ask!

Step 2:

Navigating the backend of your site

The two most important areas you need to know to get started building your site are Pages and Design.

Let’s start with Pages

You’ll notice in your Pages panel that you have two sections:

  1. Main navigation

  2. Not Linked

Any page that you drag and drop under the Main Navigation section will appear as a link at the top of your website.

This area is known as your header or main navigation area!

So this is where pages like your blog, shop, services, about, and contact pages would live.

The order that you drag and drop them here in your pages panel is the order they will appear in across the top of your page site wide.

Think of these links as your top priority pages you want visitors to see when visiting your site.

It’s best to limit your main navigation to 3-5 links.

The rest of your whole website will live under the Not Linked section.

Any page that you drag under the Not Linked section will still be live on your site, it would just not appear in that main navigation.

So how do people find a page that’s not linked in your header?

You would need to share a direct link to them either through a button, pop-up, or text link on one your main pages, or by sharing them externally on something like social media.

To add a page, just click the Plus Sign beside either section.

You can start with a blank page, which is a great way to make sure your site winds up completely custom and looking nothing like the template, or if you need a little help getting started, you can use a pre-built page layout created by the fabulously talented designers over at Squarespace.

Step 3:

Understanding what makes up the pages of your website

Once you have your page added, click the Edit button (top left of page editing window) to open it!

You have two ways to add and manage the content on your page.

  1. Sections

  2. Blocks

Think of building a page like building a house.

Your sections are your stories, and the more stories you add, the taller your house gets!

Whereas the blocks are what you use to furnish each story of that house! Blocks can be placed one on top of the other, or dragged and dropped side-by-side.

The section height will automatically shrink or grow to fit how much content you’ve placed in it.

Step 4:

Adding & editing content on your Squarespace 7.1 site

To add a new section to the page, click the blue Plus button.

Once your section is added, you’ll have the option to Delete, Duplicate, or Reorder it on the page.

To add blocks or content within your new section, just hover over the area until you find an Insert Point. Click it, and Squarespace will show you all your options for content types that can be added to the page.

Your section should automatically come with a Text Block built in but you can choose whether you want to use or delete it once other content has been added!

Editing Text on your Squarespace 7.1 site

To edit a Text Block once it’s been added, simply click anywhere inside the block to pull up your options.

Just type as you normally, then use the Text Block Toolbar that pops up to format, style, and align your bit of of text.

Editing IMAGES, Buttons, and other blocks

Most other types of content can be edited by hovering over the block, and selecting the Pencil Icon.

Each block type will have it’s own options for editing, depending on the type of content.

Let’s take the Image Block for example!

Each image block has a:

  • Content Tab: where you actually add and name your image.

  • Design Tab: where you tell Squarespace how to display your image by selecting a layout, and whether it should link to another page when clicked.

  • Animations Tab: for adding fun movement and effects to your image


What’s the most important block?

The Spacer Block (and here’s why and how to use them.)

Spacer Block can be used to add vertical space between two blocks.

Or, you can drag them beside other blocks to create horizontal space or padding.

Spacers can also be dropped side-by-side to create multiple columns for you to drag and drop your content under.

Step 5:

Styling a Squarespace 7.1 section

Now, you may notice that there seems to be a set width for your content on the page and that nothing reaches all the way to the edge of your site.

To change the amount of built-in padding on either side of your content, you’ll need to head into your Section Settings by hovering over the section and selecting the Pencil Icon.

Think of this as your walls within each story of your house.

You can make each room taller by adjusting Section Height which will add more padding vertically around your content.

Or you can make the room wider or narrower by editing the Content Width which changes the horizontal padding.

You also have options for moving your content around the room using the Content Alignment arrows.

Adding a background color or image to your section

Wondering how to add wallpaper to each room (A.K.A section)?

With your Section Settings open, head under the Background Tab and upload an image to be used as your background image!

(Or hit Search Image to select from the free stock images that come with your Squarespace subscription.)

Once an image is added, you can use the little Background Image Focal Point slider to tell Squarespace what part of the image to prioritize if the whole image won’t fit in the space it’s in.

Use the Inset or Full Bleed buttons to decide whether your background image will go wall-to-wall, or whether you will have white space around the edges.

You can also choose to add an Image Overlay by adjusting the image overlay opacity slider. (The color of this overlay is something you decide in the Design panel, btw!)

Which brings me to colors!

Think of your website colors like painting your house.

The general color palette for your whole home gets decided before you ever start painting.

But the Colors Tab in your Section Settings is where you come to tell Squarespace which color from that main palette to paint this one room or section.

Step 6:

Styling your Header & Footer Content

Okay, so now we’ve chatted about the parts that make up each individual page and section, let’s look at the parts that will appear site wide!

Your Header & Footer!

We already know that the links for the header are decided in your Pages Panel, by adding pages to the Main Navigation section and reordering how you want them to appear.

But let’s look at what else you can change!

Click Edit from any page on your site, then hover over the header and click Edit Site Header.

You’ll notice we have three tabs:

  1. Global

  2. Desktop

  3. Mobile

Any changes you make under the Global Tab will happen site-wide.

So this means when you use the Site Header Settings to add your site title or logo, or add in a main navigation button, social icons, a cart icon, or decide on a color and position for your header, these will remain the same no matter which page a visitor lands on.

To change the actual layout and spacing of your header depending on the type of screen your site is being viewed on, just head under the Desktop, or Mobile tab.

Styling your footer in Squarespace 7.1

Your footer acts just like any other section on the page, where you can drag and drop whichever content blocks you like, and apply section settings.

The only difference is that the content you put here will appear in your footer site-wide!

So you can edit it from any page, and those changes will automatically apply to every page on your site.

Step 7:

Understanding Collection Pages

If you plan to add a blog, shop, portfolio, or event calendar or page to your site, these are known as Collection Pages and they are added in the same way a normal page is. (Pages > Plus Sign > Collection Pages)

Only these are a little different from your usual drag-and-drop pages, because they act as both:

  1. A physical page that someone can visit (like the blog page where someone peruses your latest posts)

  2. A behind the scenes storage area where you add, and manage all the items in that collection, like writing your blog posts.

Each collection page comes with a special built in Collection Section to help Squarespace automatically display your most recent content from that collection.

It’s not possible to add or remove blocks from this section like you normally would, but regular sections can be added above and below your collection section for you to add whatever else you want to your page design!

Okie dokes! So now we understand the basics of adding content to our site.

But before we get started building, we need to make a few design decisions over in the Design Panel.

An Introduction to the Design Panel

(A.K.A Site Styles)

The Design Panel is also known as your site styles, because the changes that happen here are purely stylistic or aesthetic.

They don’t add or remove anything from your site, they just style what’s already there.

If you don’t consider yourself a designer, and don’t have any sort of pre-built branding package created by a branding pro, Squarespace 7.1 makes it super simple to jump in and get started styling!

Styling your colors & fonts in Squarespace 7.1

Let’s start with fonts. (Design Panel > Fonts)

Squarespace gives you a huge list of pre-paired fonts packages that they know play nicely together.

Just choose a font pairing and watch as it instantly updates your entire site!

You can even adjust the overall size of the font package by clicking the little Font Base Size +’ or ‘-’ buttons under your selected font pack.

If you want a little more control over each font used on your site, just scroll below your font pack to see your options for customization.

The same goes for your colors. (Design Panel > Colors)

Whether you choose a pre-built color palette, or custom create one of your own using one of the options in the Color Palette Dropdown Squarespace will instantly create 10 custom color themes from the colors in your palette.

If you remember from earlier in this tutorial, those color themes then get applied to each individual section however you see fit using your Section Settings!

If you aren’t loving the 10 color themes Squarespace automatically builds you using your color palette, you can open up each theme within your Colors Panel and handpick where colors will be assigned to every last detail of your site, wherever that color theme has been applied to a section.

Looking for Squarespace inspiration?

Check out:


/


/


You’ll Also Love…

How to start building a website in Squarespace version 7.1