How to start building a website in Squarespace version 7.1 -Updated for 2023
Prefer to watch?
Here’s the step-by-step video!
Mentioned in the video:
💰 Squarespace discount code: Use PAIGE10 for 10% off your first year! *
🙋♀️ Squarespace helpdesk
📋 Complete list of fonts available on both Canva & Squarespace
*Yep that’s an affiliate code/link, my Margarita fund thanks you kindly!
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! 👍
But… before we get started - a quick note
Don’t know your Fluid Engine from your Classic Editor?
Here’s a quick glossary of terms to help ya!
Squarespace 7.0 - the old version of Squarespace (replaced by Squarespace 7.1 in 2020) there are still a bunch of sites built on 7.0, but new sites tend to be built on Squarespace 7.1 these days!
Squarespace 7.1 - The version of Squarespace that was launched in 2020 to replace 7.0. The biggest changes? Among others - probably the most significant was that all websites were built off the same template base (even though it you can choose different-looking templates, all sites built on 7.1 have the same possible functionalities & styling options - a big change from 7.0, in which different templates could do different things!)
Classic Editor (CE) - Classic editor was the interface you use to create/ edit and build your website in 7.1… up until Summer 2022, when it was replaced by Fluid Engine! Note - you can still opt for Classic Editor if you like, but Squarespace aren’t clear on how long this will be for, so it’s worth getting your head around the new editor, Fluid Engine stat (more on that in a mo!) Classic Editor was built on a 12 column grid system and gaps between content were managed by spacer blocks. Content blocks also can’t overlap one another in Classic Editor.
Fluid Engine (FE) - the biggest update to Squarespace’s editing interface in… forever… Fluid Engine takes a different approach to how we can manage on-page content in Squarespace. Largely site styles (things like colors & fonts) all stay the same, but rather than having content blocks that have to fit into 12 neat columns and can’t overlap, Fluid Engine is more of a drag n drop - one element doesn’t affect the others, so we have more design freedom, so that’s pretty cool!
Now to the tutorial…
Pst… this tutorial is updated for 2023 and is focussed on Squarespace 7.1 Fluid Engine… but if you’re still using the old Classic Editor - make sure to check out this video from 2022 which walks you through everything you need to know!
How to Build a website using Squarespace 7.1 in 2023
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!
Before we go any further… a quick note on trials… more specifically…
How to extend your Squarespace trial for free!
The normal Squarespace trial period is 2 weeks…
wait what, I hear you cry?! I have to learn the platform and build my website all in 14 days… Paige, you’re a great teacher but seriously… 😂
Happily, I have a lil’ hack for you! If your trial is up & your site isn’t finished, just pop the lovely folks at the Squarespace helpdesk a note and they’ll happily extend it for you… again and again and again… so no need to feel rushed or launch your site before you’re ready!!
Step 2:
Navigating the back end of your site
The two most important areas you need to know to get started building your site are Pages and Design and we’ll go into both of those in more depth in a hot minute… but there are a lot more things in the Squarespace menu that you might be interested in mater - here’s a quick overview!
Commerce
If you decide to add a store to your Squarespace site, you’re gonna wanna visit the commerce menu option to set this up. Here’s a full tutorial on adding & styling your online shop in Squarespace 7.1 to bookmark for later!
Marketing
This is where you can find everything related to marketing (on and off-site), it’s here you can find your SEO (Search Engine Optimization - AKA getting found on google) settings, you can also set up things like an announcement bar and pop up plus connecting Pinterest etc…
It’s also where you can find Squarespace email campaigns… now I have some opinions on this functionality (spoiler: I donntt love it) Wanna judge for yourself - read this where I break down why I choose not to use Squarespace for email marketing (and which software I use instead!!)
Scheduling
One of my all time fave Squarespace options is the Scheduling tool! When you set this up you enable visitors to book a meeting directly with you (saving sooo much time on emailing back n forth & making life easier for your visitors (read increasing conversions & sales - whoop!)
Interested? you’re gonna wanna save this post for later where I walk you through everything to set up your Squarespace scheduler!
ASSET LIBRARY - NEW FOR 2023!
Here’s your one stop shop for everything you’ve uploaded as an “asset” to your site - think photos, videos etc. Super handy to be able to set and manage them alll in one place!
Analytics
This is a super useful option, that once your site is live you’re gonna be in all the time lookin’ at how many visitors are coming to your site, where they’re coming from, what keywords they used to find you and what they’re doing when they’re on your site etc etc!
website settings
Here’s where to find literally every setting you could possibly have in your website - from connecting your domain, to cookie settings and pop up and even your billing tab - here’s allll of the stuff (have a good browse as it’ll be useful later!!)
Help
Finally - the help option - one of the reasons I just love Squarespace (and why for example I choose it over Showit) is because the live chat help, and tonnes of help articles are just fantastic! Here’s where you can access all that!
Step 3:
Pages & Page Types
Now you’re familiar with all that - let’s hop into Pages!
You’ll notice in your Pages panel that you have two sections:
Main navigation
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 (that’s totes my preference!), 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 4:
Understanding Collections
If you plan to add a blog, shop, portfolio, or event calendar or page to your site, these are known as Collections and they are added in the same way a normal page is. (Pages > Plus Sign > Collections)
Only these are a little different from your usual drag-and-drop pages, because they act as both:
A physical page that someone can visit (like the blog page where someone peruses your latest posts)
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!
Planning to set up a blog on your new site - you’re gonna wanna bookmark this post for later!
Dropdowns in your main navigation
If you want to add a dropdown to your site menu, you’re gonna do this by adding a folder to your Main Navigation section (just like adding a page) and then dropping pages into this folder. You’ll then see when you hover over this in your header navigation, that the pages inside of it, drop down in the menu!
Not sure what content you need on your site so that it works for you? Grab this free training to get the skinny on what makes a site that sells!
Step 5:
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.
Sections
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! You can also change the height of each section by dragging the little blue icon on the bottom right of the section, or by going into “edit section” to change the height.
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 6:
Adding & editing content on your Squarespace 7.1 site using Fluid Engine
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, go to the top left of your section to the “add block” button.
Click it, and Squarespace will show you all your options for content types that can be added to the page.
Once you’ve added a block you can drag n drop it anywhere in the section, and resize it by pulling on the corners or sides!
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 text - you’ll have options like the type of text (header or paragraph), bold, italic, different colors, underline effects etc.
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 - you can choose whether to add from stock images available on Squarespace, or upload your own images.
Design Tab: where you tell Squarespace how to display your image by selecting a shape for example!
Another important block is the button block - these are used for “Call to Actions” ie asking people to do a thing by clicking on a button.
To add a button you go once again to the “add block” button, select button from the block options. Inside you’ll find
Content tab: where you add the text you want to see on your button, and the link to where you’d like your button to take you (this can be a page on your website, an external page - even to dial a phone number or download a document!
Design tab: where you choose which type of button you’d like (these are set in your Site Styles section - more on this later!!)
Step 7:
Styling a Squarespace 7.1 section with Fluid Engine
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 toggle on and off the fill screen button depending on if you’d like to have automatically added padding on the top and bottom of your sections so they fill the screen size.
You can make each room taller by adjusting Height which will add more padding vertically around your content.
You also have options for moving your content around the room using the Content Alignment.
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.
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… talking of colors, let’s hop into the design panel which is where you can set these for your website!
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!
Step 8:
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.
Step 9:
Changing your browser icon or favicon
One sure giveaway that your site is a DIY Squarespace site? Your browser icon, or favicon which is the little icon that shows up in the tab on your browser is a grey square… so how to change it!
I’m a big fan of using Canva to create a simple browser icon - make sure to watch this for the step by step!
step 10:
Styling the mobile version
One super important step in the Fluid Engine version of Squarespace is to double check your mobile design… why? Well as you add blocks to your desktop, Squarespace adds them to mobile in the same order, and sometimes this isn’t the order you’d like, or the way they’re laid out doesn’t look great…
So to do this, toggle onto the mobile icon on the top right of your page. Here you can resize and reorder your content by dragging and dropping. You can also layer your content ontop of one another (super trendy RK!) by clicking on the block in question, and then on the dashed square over the solid line square icon to move it forward and backward.
Step 11:
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:
Global
Desktop
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, adding a multi-lingual switcher (note you’ll need to have added the multi-language option for this!) 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 12:
And now… drum roll purlease… we’re ready to launch! So how do we do that?!
We’re gonna head to settings, billing and website options, and choose a plan.
Here’s a quick overview of how to choose which plan works… oh, before I get to that - don’t forget you can use code PAIGE10 for 10% off your first year on Squarespace when you choose an annual plan (that’s an affiliate code btw - my margarita fund thanks you in advance!)
So… in most cases, the Business plan is gonna be a good fit - 99% of my students & past clients use this option- I do too!! - except if your site is predominantly an online store (e-commerce) site, in which case you may find the Commerce basic, or even advanced plans make more sense as they don’t have Squarespace commission on sales, and gives you more options for your store - you can see exactly what is included and not in the ticklists below each option. Don’t forget you can always upgrade your subscription later on if you decide you need more functionality!!
Getting a free domain from Squarespace
One of the cool things, is that with every annual plan you can get a free domain for your first year - a custom domain name is essentially yourwebsitename.com ( ! And means you don’t have .squarespace.com in your web address.
If you already have your domain name bought elsewhere you can connect it to your website - Squarespace have a ton of help articles on this, depending where your domain is currently.
After the free first year, domains purchased via Squarespace are usually about $20 a year.
So once all that’s sorted - you just need to go into site availability and click public! Anddd… crack open the champers - your site is out in the wild and you can finally celebrate!! 🍾🍾🍾
Proud of ya friend!!
%2b2274f.jpg)
