3 Easy Steps to Start a Squarespace Website the Right Way
Before we dive into my Squarespace Website starter recommendations, I just wanted to clarify something – a key concept that you need to understand.
It’s really important that you recognize the distinction between these best practices + patterns that I’m teaching and a cookie-cutter or templated approach.
I recently wrapped a client project that went amazingly. It was with Jenny Karlsson of Financials for Creatives.
And, aside from getting a lot of praise for how great her new site looked, the majority of feedback was, “It looks beautiful and oh-so-Jenny!”
Even though I used the same principles of my Homepage Blueprint and patterns for laying out a user-friendly website, it still looks uniquely like Jenny.
And that’s obviously what you want from your website. It should portray your personal brand and be uniquely you.
I see so many websites that all look basically the SAME ––not necessarily the same layout–– but the same style.
You know what I’m talking about?
Those sites with the muted pastel colors, feminine fonts that are a bit hard-to-read, and flat lay images of golden paper clips.
Now, I’m not trying to discredit that style BUT it shouldn’t be used on your website unless that’s YOUR style.
So, while I teach you website “formulas”, homepage “blueprints”, and “pattern libraries” (which is something I’ll cover more in an upcoming lesson), it’s important that you understand the distinction between these patterns + best practices that you DO need to follow and creating a website that mimics your favorite influencer’s.
Because we want to create a user-friendly website that’s easy + enjoyable for our visitors to navigate AND we want to create a standout brand.
Does that make sense?
Now let's move into the 3 crucial steps that I take with every single Squarespace website that I develop.
First: Select the template + Setup the workspace
When it comes to selecting your base template for your Squarespace site, it’s crucial that you choose one based on function NOT form.
What I mean is, we want to choose a template that allows us to create the kind of pages that we want to create and gives us the most extensibility. It has a base architecture that is easy to extend and make changes without needing to inject custom code.
For that reason, I recommend you start with a template in the Brine family (which has over 45 templates, including Clay, Juke, Mercer, Pedro, Rally, and Sofia – to name a few).
But, because all 45 of those templates have the exact SAME structure and functionality of Brine, it doesn’t matter AT ALL which one you choose because we don’t give a shit about what the template looks like. What we care about is that core extensibility.
So, to keep things easy, I always just start with Brine.
Now, once I’ve chosen my template, I make a quick switch in the Settings menu to adjust how the home menu is displayed (because Brine is an e-commerce template, it comes cluttered with a bunch of e-commerce menu options that we really don’t need as service-based creatives).
Finally, to set up my workspace: I create a new blank index page, name it “Styles”, and set it to be the site’s homepage. This allows me to delete all of the pages that come with the template. Because I want to start with a totally clean workspace uncluttered by those templated pages.
To summarize the 3 parts for the Select + Setup step:
Select a template in the Brine family (*cough* Brine *cough*).
Adjust the home menu settings to remove the e-commerce options.
Create a style page, set it as the homepage, and delete ALL template pages.
Second: Create a Styles page + Customize the Style Editor
The way that the Style Editor works in Squarespace is that it ONLY gives you the ability to customize the elements that are available to you on any given page.
For example, if I’m on the homepage of a website and I navigate into the Style Editor, the options it displays will be based on the types of content existing on that page. So, if I’m not using a form on the homepage, then I won’t have the ability to customize the form block. If I’m not using an h3 (heading 3) on that page, then the Style Editor won't allow me to customize that element.
Instead, I would have to leave the Style Editor and navigate to a page on my site that did use those blocks and then go back into the Style Editor.
It’s a waste of time and allows for the opportunity that we’d overlook something.
For that reason, I always create a “Styles” page at the start of any Squarespace project. This is where I put every single content type into one long index page so that I can go into the Style Editor from there and customize everything at once.
So, for the Create + Customize step, you should:
Create a “Styles” index page with ALL of the content types you’ll use throughout your site.
From there, go into the Style Editor, and customize how you want your site to look.
Third: Paste in Custom CSS to Personalize your site
Once you’ve styled everything to your liking from within the Style Editor, you’ll notice that there are STILL parts of your Styles page that you cannot personalize because Squarespace doesn’t make them available to us.
In order to differentiate your site from every other Squarespace template, you want to customize nearly every element.
For that reason, there are 3 bits of Custom CSS that I always use for every single Squarespace website I develop:
Of course, there are additional customizations I like to use (like this underline hover effect) or based on the individual project requirements. But these three are the bare minimum that I recommend everyone use on their Squarespace websites.
And I offer those in my Code Shop for $10-$15 each or within a bundle that’s $47 😘
Now for part II, where I share my screen and walk you through these steps…