Paige Brunton

View Original

Squarespace 7.1: A complete tutorial for beginners

Paige Brunton

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 build 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 encourage 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 competition! 👍

Watch this video for the step-by-step on choosing a Squarespace template.

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!

See this gallery in the original 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 > click on your logo & then click the edit pencil.

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.

When you click the paintbrush icon you access your site styles 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 in your editing window are specific to that one page you have open in the window, whereas changes you make in your site styles 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.

Ever struggling to find a menu option on Squarespace?

Here’s a hot tip for you! Hit the forward slash button & you’ll see a search bar pop up - start typing in what you’re looking for & voila!

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 under “website”.

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 under “website”.

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.

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 by clicking the paintbrush icon.

Remember, changes made in your site styles panel 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 fonts 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 paintbrush icon > 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.

Now if you also use Canva I highly recommend choosing a font that’s available there as well as on Squarespace to keep your branding flawlessly consistent. Luckily I made the complete list of fonts available on both Squarespace & Canva - it’s yours for free - grab it below!

See this gallery in the original post



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 paintbrush icon > 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 site styles 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 (paintbrush icon > 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 customize your buttons in Squarespace 7.1

If you aren’t digging the style or shape of your buttons, you’ll want to head to site styles panel by clicking the paintbrush icon 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.


Adding content to the Asset Library on Squarespace

You’re likely to want to upload images to use on your Squarespace site, and to do so the quick & easy way I highly recommend using the asset library where you can mass upload your images all in one go!

Top tip - make sure to compress your images & rename them before uploading to make them easy to find later on & so you can simply copy & paste your image file names to use as alt descriptions later!

Wondering what an alt description is? It’s text added to an image on your website that allows someone accessing your site using a screen reader to “see” the image (via a description of it in words). You add an alt description by clicking on the image block, edit pencil & then scrolling down to type your description in the box.

Organizing your pages & setting up your site 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 under “website” 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 under “website”.

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 under “website”.

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.



Additional page options in Squarespace 7.1

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

  • Drop down: 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 I went ahead and added one of the pre-built page layout options to use as my mock site’s homepage… But you’ll see I pretty much built the thing from scratch anyway!

But again, I 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.

See this gallery in the original post

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 under “website”.)

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 add block on the page and selecting which type of block you want to add.

You can then drag & drop your content to where you want it to be, resize it using the white handles on the corners & sides, and even select where it goes in the layers (in front or behind of any overlapping blocks)

So if I want to add a bit of content below another content block, I would just click add block and then drag & drop my new block to where I want it to sit.

To make one content block wider or narrower just drag the side of the container to resize it.

The content blocks you need to know to get started

  • 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 library 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.

    You can select from fit or fill (where the image fills the exact size of the block) or even different image shapes.

  • 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) but you do have a few settings right there inside the button block settings window like whether you want it to fit or fill.

Tips for Uploading multiple images

If you want to add multiple photos at once, make sure to add them to your asset library in one go, rather than adding and uploading each image individually.

Editing your content block settings

Each bit of content you add to your section will also have its 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.

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)

You can also choose to add an overlay that can give a different vibe to your image.

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.

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 Website tools > Lock Screen

Customizing your 404 page not found page & checkout page

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 under “website” however you like, then you would head to “System Pages” (scroll right down past all your website pages to find it under utilities & click 404 page to set which page will appear then a visitor stumbles upon a broken link on your site.

The System 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.

  • Attach 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.

Now, depending on the order that you added your content, it’s likely you’ll need to completely redo the design of how your site shows up on mobile. Luckily, by toggling to the mobile icon you can do just that!

You’ll be doing exactly the same as on desktop - dragging & dropping your blocks, resizing them, and bringing them forward or backward until your mobile design is on point!

If you’d like to also style your mobile header & navigation, you can edit the following…

  • 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 adaptive 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 its own custom styling options, and you can even select from pre-made footer layouts to make your job easier.

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

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 on 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% commission will end up costing you more than just upgrading from the start.

  • Squarespace advanced Commerce Plan

    The advanced plan offers several fierce 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 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!

See this content in the original post

You’ll Also Love...