Prefer to watch?

Here’s the step-by-step video!

MENTioned in the video:

Rather read all about it?

Here’s everything we talked about in the video!

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

Thankfully, Squarespace has made it super simple to get started building a website, and this drag-and-drop platform is perfect for the DIY’er looking to quickly and easily tackle this to-do!

By the end of this post, you will have nailed all the basics you need to know to confidently build and launch your website to the world!

The beginners guide to Squarespace 7.1

Starting your Squarespace 7.1 Free Trial

If you haven’t already signed up for your Squarespace free trial, you’ll need to do that before you can start your site-build.

So visit Squarespace.com (Yep! That’s an affiliate link!) and click get started.

P.S. I snagged you a little discount!

Use code PAIGE10 for 10% off your first year!

How to choose a Squarespace template in version 7.1

It’s up to you whether you decide to use their little quiz to help you pick the perfect template, but just know…

Every single template can achieve the exact same thing in the new version of Squarespace.

So if you get halfway through your site-built and really wish you had picked another template, you don’t have to start over!

You can actually take your current template, and make it look and act exactly like the next using Squarespace’s built-in editing features.

The only reason you would choose one template over another here is that visually one seems like a better starting point for where your end design is headed.

I’d even courage you to browse categories that are different from what you actually offer.

Why?

Say your competition is also DIY’ing their site on Squarespace…which template do you think they will be most likely to choose?

The one created specifically for your industry or niche, right?

So branching out into different template categories is the best way to make sure your website doesn’t end up looking exactly like the competitions!

You can preview the demo pages of each template by hovering over it and clicking preview, and even preview how it will look on different devices by clicking the mobile and tablet icons on the top left of your template preview window.

Not seeing a page you need?

If the template you like doesn’t have a shop, blog, or some other page or feature, just know that it can be easily added, and Squarespace will even allow you to select from pre-built page layouts so you don’t have to feel like you are starting from scratch with each new page you add.

To select a template, click start.

You can skip over the tutorials they show you for now since they will be covered in this post!

Editing your site title & adding your custom logo in Squarespace 7.1

Ok so the first thing we need to do is name our site.

Even if you will be replacing the site title with a logo image, Squarespace will need to know what to call your website in search engine results.

To edit the site title, go to edit > edit site header > site title and logo.

If you have a logo you want to display rather than your site title, go ahead and upload there.

If you have a smaller secondary logo, you can choose to upload there as well to be used when your site is viewed in mobile.

If you want to change the little icon or logo that appears beside your site title in a browser tab (also known as your ‘Squarespace favicon’) you can upload that under design > browser icon.

Understanding the backend of your Squarespace site

Ok, now for a quick tour around the backend of your site!

The window on the right that shows your actual website content as your visitor would see it is called your editing window.

On the left is your site panel. This is where all the back-end settings of your site live, the things your site visitor cannot see, but still affect the design and functionality of your site.

Changes made on the right in your editing window are specific to that one page you have open in the window, whereas changes you make on the left in your site panel will be applied across your whole website, even pages you aren’t currently viewing.

The exception to this rule is when using the editing window to make changes to your site’s header and footer, since these will look the same no matter what page your visitor lands on.

So let’s get started with building the first page of your website.

Adding & editing your site pages in Squarespace 7.1

To view all the pages that currently live on your site, head under your pages panel.

You can choose to just edit the demo content that came with your template, or start from scratch with your design, deleting out the demo content by hovering over the page in the panel and clicking the trash can.

To add in a new page, click any of the little plus signs in your pages panel.

To keep things from looking cookie cutter, I typically recommend starting with a blank page, designing your layout around your own unique content (rather than the other way around!)

Though if you need a little help knowing where to get started and what to include on certain pages, the pre-built page layouts Squarespace offers can be helpful!

You also have the option of adding a blog, store, portfolio or event page to your site.

These are known as collection pages, and they are pre-built layouts used to display thumbnail previews of all the items in that collection.

Each individual collection item, like a single blog post, shop product, portfolio piece, or event will also have its own page, though it won’t get added in the same way a regular page does.

Instead, collection items are added by clicking on your collection page. This will open up your collection management window where you can add, edit, and manage your content related to that collection.

Getting started with your blog or online shop in Squarespace 7.1

If you plan to add a blog or shop to your Squarespace 7.1 site, you’ll want to check out my blogging and e-commerce series using the new version of Squarespace.

I walk you through step-by-step how to start adding and managing the individual products or posts on your site, as well as further customizing the look and layout of your shop and blog pages.

Squarespace 7.1 E-Commerce Tutorials for Beginners

Squarespace 7.1 Blogging Tutorials for Beginners

Additional page options in Squarespace 7.1

Okie dokes! Heading back to our pages panel, let’s look at those last few options we have when adding a page:

  • Folder: when you want to have several pages appear in a drop-down under a certain link in your header.

(ie. Say you’re a photographer and you want to have a link in your header that says “portfolio” but then when someone clicks that link they can select “family, wedding, engagement, or newborn” from the drop-down menu that appears.)

  • Link: this is useful when trying to link to an external URL (a page that doesn’t live on your website), and want that link appearing in your main navigation.

In this tutorial (full video tutorial above, if you get stuck anywhere!) I went ahead and added one of the pre-built page layout option to use as my mock site’s homepage…

But again, I highly highly suggest starting with that blank page option to make sure your site winds up a perfect reflection of your business, not a perfect reflection of your chosen template!

Wondering which content to include on your homepage?

This is actually a home-page content planner I share with students inside my Square Secrets™️ course (the one that teaches you how to use Squarespace to build a completely custom, nothing like the template website that attracts and converts your ideal clients & customers 24/7.)

It’s the perfect tool for planning out that first impression visitors will have when they visit your site, and today I’m sharing it with you for free!

So be sure to grab your copy before you sit down to start building.


Adding & editing the content on your pages in Squarespace 7.1

So I’ve got my new mock home page open…

(To open a specific page in your page editing window, just click on that page in your pages panel.)

Now I’m going to click edit in the top left of the editing window.

Before you can actually add content like your images or text to a page, you first have to add a section.

Building your page in sections makes it easier to manage, rearrange, duplicate, or delete whole sections of content as needed, and makes it so that you can style one section differently to the next, say, choosing a different background color.

(To duplicate, rearrange, or delete a section, just hover over the section and you’ll see a section toolbar appear.)

Inside each section, you’ll be able to add your content blocks, A.K.A the actual images, text, buttons, and so on that make your site.

Content blocks are added by clicking any insert point on the page and selecting which type of block you want to add.

The little guide lines that appear when you hover over an insert point are what let you know where your content will be added in relation to the other content already in that section.

So if I want to add a bit of content below another content block, I would just select the insert point below it.

Content can also be dragged side by side to create 2 or more columns.

To make one content block wider or narrower in relation to the other content blocks on that row, just drag the side of the container to resize it.

Heads up! It’s not always possible to find an insert point exactly where you want your content block to live on the page, so just add it anywhere, then drag and drop it to where you want it, using the blue lines that appear to guide you.

How to add more space or make content blocks bigger or smaller in Squarespace 7.1

If you want your content to reach closer to the edge of the page in a particular section, just click the pencil or style icon for that section, and use the sizing and alignment tools that pop up to tell Squarespace how to arrange your content.

You can use the built-in size standards, or click the three little dots to pull up a custom size slider.

The content blocks you need to know to get started

  • Spacer block: if you need more white space above, below, or beside any type of content (and adjusting your section sliders like we talked about above doesn’t do the trick) you can also add spacer blocks to create more blank space around your other blocks, or to make your other blocks appear smaller on the page.

  • Text block: to add the written content or copy to your site.

  • Image block: you can upload your own image, or select an image from the free stock images that come with your Squarespace subscription, or pay to use a premium photo.

    If you need to find a photo that you’ve already uploaded somewhere else on your site, look under the imported tab.

    Once an image is uploaded, drag the little circle icon that appears around to tell Squarespace where you want the focal point of that image to be. That way, if Squarespace needs to crop an image in order to fit it into a certain block, you will be able to decide which part of the photo to prioritize displaying.

    No matter which type of image block you originally added, you have the option to tweak the layout under the design tab, so be sure to play around with layout to see what best fits your unique content.

    You also have the option of adding fun little animations or movement to your images.

  • Button block: your button style and color will be set over on the left in your design panel (A.K.A your site styles editor, which I will go over in just a minute!) but you do have a few settings right there inside the button block settings window like what size to make the button, and whether it should left, center, or right align.

Tips for Uploading multiple images

If you want to add multiple photos at once, try adding a gallery section, rather than adding and uploading each image individually.

To tweak the look and layout of your gallery section, just click that section settings icon where you can test out multiple options for displaying your photos grid-style or slideshow style.

Editing your content block settings

Each bit of content you add to your section will also have it’s own style settings or pencil icon, helping you to further customize how that particular block appears like its layout, or any design or animation options, as well as any special functions it will have like linking to another page.

The exception to this is the text block. Rather than a pencil or style icon, you’ll have a pretty standard little text toolbar to help you format the text inside your block.

So you can bold, italicize, align, and link bits of your text as usual, as well as tell Squarespace which size or format from your template’s font pack you want to use.

But what if you want to use a different font or color than what your chosen template came with?

Using the site styles editor to customize your Squarespace site

In order to make changes to the default style settings that came with our chosen template, we have to visit the site styles editor.

You’ll find that over on the left under your site’s design panel.

Just a heads up!

Squarespace will only show you styling options for things that already exist on your site.

So if you are trying to style a particular type of content (say changing the color of your Heading 1 font), you’ll need to make sure it has been added to your site somewhere first.

Remember, changes made in your site panel on the left are site-wide, meaning if you tweak a button color here, buttons everywhere on your site will follow.

But you will still want to have a page open in the editor window that contains an example of the content you are trying to style, so that you can watch those updates happen in real-time!

How to customize your font in Squarespace 7.1

The template you chose came with what’s known as a font pack (a special font pairing Squarespace designers came up with that will be used consistently across your whole site.)

If you want to change your template’s default font pack, you’ll head under design > fonts.

You can choose to use a pre-made font pack by clicking switch and selecting from a list of other Squarespace suggested pairings, or you can customize your heading fonts, paragraph fonts, and button fonts individually by scrolling below your font pack.

The tweaks you make up here will be applied to all fonts within that group (say for example, for your headings 1-4).

So while it’s not possible to select a different font-family for every one of your heading formats, you can use the size sliders below to differentiate between the different headings.

Once your template’s font pack has been set in the backend of your site, you can come back over to your page editor on the right and decide where to assign each of your different font formats locally on the page.

How to customize your website colors in Squarespace 7.1

If you want different colors than what came with your Squarespace template, you first have to set them within your design panel by going to design > colors.

First, you will pick the 5 colors that will make up your site’s overall color scheme.

Do that by clicking edit on your color palette, and then using the little drop-down to select your method for creating your palette.

You can use a:

  • Designer Palette: pre-built palettes by the designer pros at Squarespace

  • From Image: a palette using suggested colors pulled from a favorite image you upload

  • From Color: a complementary palette Squarespace will automatically generate based on the main accent color you set

  • Custom: a completely custom palette where each color is individually hand-selected by you, using the built-in sliders, or by pasting in your exact color codes, if you happen to know them.

Squarespace section themes (A.K.A color themes & background colors)

Squarespace will take those 5 colors from your palette above and create what are known as your section themes.

These section themes can then be applied to individual sections to help one look different from the next, but still cohesive with your overall palette.

So if you have one section where you want to have a light background, but the next you want to use a contrasting background to help break up your content on the page, then these themes are how you achieve that.

To change the theme applied to a section, click on its style icon and head under the colors tab.

If you want more control over how your colors are used within a theme, or want to introduce additional colors to certain details within a section theme, just open that specific theme in your design panel and tweak the appropriate design element.

If you’re not sure what a certain design element is called, just make sure to have your colors panel open (design panel > colors), then just click on the element on the page, and it will show you which options apply to that bit of content.

When making tweaks to a section theme in your design panel, make sure that the section theme has already been applied somewhere on the page so that you can watch those changes update in real-time as well.

How to add images or videos as your section background

It’s also possible to add images or videos as your background, rather than just colors.

To do this, open up your section settings on the page, and head under the background tab.

Upload your media there, then decide whether you want your background to be:

  • Full bleed: where it spans the entire width of the section with no white space around it

  • Inset: where there is a margin of white space (or whatever color your section theme background color is for that section)

And in order to make sure you don’t lose your hard work, always be sure to press save in both your backend panel, and when working on the page builder.

How to customize your buttons in Squarespace 7.1

If you aren’t digging the style or shape of your buttons, you’ll want to head back under the design panel to the buttons tab.

This is where you set the actual design of the buttons, like whether it will be square or round, filled in or just an outline…

Then, if you remember from earlier, you use the local button block style settings on the page to tell Squarespace whether you want to use a small, medium or large button.

The fonts of your button were decided earlier when you set your template’s font pack and the color of your button is decided by which of your 10 color themes you applied to that section.

Now you know the basics of adding content to a page, we should quickly talk about how to organize and connect all these pages so that your visitor can actually find them when they visit your site!

Organizing your pages & setting up your sites navigation

Each page you create will have its own unique link, also known as its URL.

To find and edit a page’s URL, just head back under your pages panel and hover over the page you want to view.

Click the little gear or page settings icon that appears, and then head under the general tab.

Look for the URL slug.

Your page’s complete URL is going to be your domain name followed by the URL slug. (ie. paigebrunton.com/url-slug-goes-here)

It’s best to keep URL slugs short and using only super relevant keywords so that it will be easier for people to remember it.

How to set up your site navigation & header links

There are a few different ways to link to your pages from within your own site.

So obviously you have your main navigation, the main pages you want visitors to be able to see and access the moment they land on your site.

To make sure a page is appearing linked in your site header, you’ll want to drag it up into the main navigation section of your pages panel.

The order they appear from left to right in your site header is the order you drag and drop them here in the main navigation section.

But you can’t go sticking every last page you ever create in the header!

It’s best to limit your main navigation links to 3-5 top priority links to make sure that visitors don’t get distracted and are actually taking the actions you are hoping they will on your site.

So what do you do with all the other pages you will build?

You let them live in the unlinked section of your pages panel.

These are the pages you link to either from a button, graphic, or text link on one of your main pages, your website footer, or shared externally on something like social media.

Squarespace page settings to know when building your site:

Disabling & password protecting pages in Squarespace

If you ever need to delete a page, you can do so by hovering over the page and clicking the trash can.

But what about if you just want to disable a page so that you can keep it for later, but nobody would be able to visit or search for it in the meantime.

Open up your page settings again using the little gear icon, and toggle off the enable page button.

If you want to leave the page live, but want to password protect it instead, simply add a password in this same settings window.

To edit your lock screen page (the one where visitors would have to type in their password), you just head to Design > Lock Screen

Customizing your 404 page not found page & checkout page

If you head under your design panel you’ll notice you have several options for customizing the default pages that come built-in with your template.

Say for instance you want to design your own custom 404 (or page not found) page.

You can actually build out a regular blank page in your pages panel however you like, then you would come under 404 page to set which page will appear then a visitor stumbles upon a broken link on your site.

The pages panel is also where you’d make any changes to your checkout page if you have an online shop.

Duplicating a page in Squarespace 7.1

Going back to our page settings, it’s also possible to duplicate an entire page!

Say, if you liked your design for a registration page, and you wanted to tweak it to use for another event, you could instantly create a copy of the page by clicking duplicate.

Setting which page will be your home page

You also have the option to set different pages as your home page in your page settings.

This is useful if you have a temporary homepage you want to direct people to during a special sale or event when they try to visit your domain, but then later want visitors to be taken to your normal homepage.

How to link to the pages in your unlinked section of your pages panel

Things would start to get pretty chaotic if you included a link to every last page on your website in your main site navigation!

So let’s talk about the different options you have for linking to your pages from your content, instead of from your main navigation section or header.

Many types of content blocks have an option for linking right inside their content block settings, but I’ll use the button block to give you an example.

To link a button, just add your button block, click the style icon and add the URL you wish to link in the clickthrough URL field.

How to link a phone number, file, or email address in Squarespace 7.1

No matter which type of content block you are using to set up a link (ie. a button, text block, image) you have a few other options for linking if you click the link gear icon! You can:

  • Link an internal or external URL: deciding whether it will open a new browser window when clicked, or just redirect them using their current window, leaving the page they were on.

  • Link internal page: searching a specific page on your own site without having to go manually track down its unique URL slug.

  • Link email: when someone clicks it, their default emailing app will open a blank draft with your email in the TO: field.

  • Link a phone number: which will make it possible for mobile users to call you without having to copy and paste your phone number.

  • Attached a file: upload a file that will automatically download when the link is clicked.

Managing responsive design & site-wide headers and footers in Squarespace

Designing for desktop view vs. mobile view in Squarespace

So now you’ve got a pretty good start on getting content added and styled for the desktop version of your site, let’s quickly pop into mobile view (by clicking the mobile icon top right in your page editor) and talk about what’s possible there.

Squarespace is automatically responsive which means that no matter what device or screen size a visitor is using to view your site, Squarespace does a pretty great job of making sure:

a) Your site is still usable on a smaller screen.

b) The layout and design still looks on point!

They will even automatically create a collapsible mobile menu for you using the links appearing in your main navigation.

That being said, it’s not possible to build a completely different layout for desktop and mobile, so you’ll want to pop into mobile view from time to time to make sure your design seems to be working for both.

There’s a few things that you can edit separately for mobile, and that is:

  • The layout of your mobile header

  • The color theme applied to your mobile drop-down navigation menu

  • The style of your mobile menu drop-down icon

These can be found by clicking edit on any page, then clicking edit site header and clicking on the mobile icon.

Clicking the desktop icon will give you a few options that are specific to desktop sized screens, but you’ll find your header button, cart & social media icons and color settings under that universal tab.

How to customize your site-wide header & footer in Squarespace 7.1

Besides tweaking the settings mentioned above for your mobile header vs. your desktop header, there are a few other things to note about headers and footers!

When it comes to colors, your site header acts just like a normal section, where you assign one of your 10 section themes.

But if you want your header to seamlessly blend in with whatever background color or background image it’s closest to, you’ll want to click the edit site header button and toggle on the little transparent button under the colors tab.

Since we talked about headers, we should probably skip down to the bottom of the page and touch on footers as well!

Footers are also site-wide, meaning if you tweak your footer on one page, all pages across your site will follow.

You can add multiple sections to your footer, each section having it’s own custom styling options, and you can even select from pre-made footer layouts to make your job easier.

Connecting a domain and launching your Squarespace site

If you want to show your website to the world, you’re going to have to pay to play!

So it’s time to bite the bullet and upgrade to a paid Squarespace subscription for your new site.

To do this, head under settings > site availability and click upgrade to publish.

It will take you to the current Squarespace pricing plans where you can look over their comparison chart and decide which features you really need in order for your site to serve your business well.

Which Squarespace plan should I choose?

Which plan to choose is 100% dependent on what you plan to use your site for, but here’s a quick little rule of thumb to go by for each:

  • Squarespace Personal Plan

    If you don’t have plans to make money off your site, and you don’t need any of the premium features Squarespace offers like custom coding and e-commerce to name a few, then you are probably just fine going with the personal plan.

  • Squarespace Business Plan

    If you plan to somehow monetize your new site, most businesses are going to go with a business plan or higher, so that they can have access to e-commerce, but also to things like promotional pop-ups and announcement bars.

  • Squarespace basic Commerce Plan

    Planning to add an online shop? You can technically do this on a business plan, but upgrading to an e-commerce plan does save you those 3% transaction fees. So it’s worth your time to sit down and do a bit of business projection math and figure out if based on your expected sales, that 3% will end up costing you more than just upgrading from the start.

  • Squarespace advanced Commerce Plan

    The advanced plan offers several face e-commerce options not available in the business or e-commerce plans like abandoned cart recovery, and the ability to sell subscriptions and gift cards.

For a complete guide to Squarespace plans and premium features, check out this post.

There’s definitely a savings to be had by paying annually over monthly, and I snagged you an additional 10% off your first year when you use the code PAIGE10.

So now you’ve paid your dues and set your site availability to public for all the world to see, there’s just one last step.

And that is to link up your custom site domain name!

How to connect a custom domain name to your Squarespace site

This last step isn’t quite so straightforward, as there are about a million different places you could have purchased your custom domain name, each one having a completely different means of connecting to your Squarespace site.

But if you check out my post on connecting your domain and launching your site, and scroll down in the post a bit, you’ll see I have links the exact step-by-step help articles you would need for all the most popular domain purchasing sites!

So there you have it!

Hopefully this post/video has you feeling equipped and ready to finally check off that giant to-do of building a website off your list!

Remember, there are a few important resources I mentioned (linked below the video) that you’re going to want to get your hands on before you sit down to get started…

But the most important one is going to be that home page content planner!

Your home page can make or break a visitor’s impression of your whole business.

You have literal seconds from the time someone lands on your site to win them over, so you want to make sure your home page strategy is on point, and that it is set up to convert all those clicks into actual paying clients and customers!

So don’t forget to grab your free copy of my Home Page content planner below!

/


/


You’ll Also Love…

Squarespace 7.1: A complete tutorial for beginners