How to Quickly Overcome the Squarespace Learning Curve

 
Overcome Squarespace learning curve - stacy kessler
 

Building my first Squarespace website

I’ve built and managed six websites for various purposes on four different website platforms - Wordpress, Squarespace, Wix, and Strikingly. Squarespace is my favorite by a landslide and what I’ll use to build all my websites on moving forward.

There was definitely a learning curve to Squarespace though. I had used three other website platforms before and had a general idea of how things worked, yet it still took a lot of trial and error to really understand this new website tool, which works very differently. I wasted a lot of time, made mistakes, and had to redo a lot of stuff.

Once you get the hang of Squarespace though, it’s incredibly user-friendly and you really can make a beautiful, responsive website.

Whenever someone tells me they are going to switch to Squarespace, I make sure to tell them the a few of my hard-learned lessons so building their website and figuring out the tool is a breeze.

If you’ve decided to use Squarespace, keep on reading for these newbie watch-outs that make your learning curve a lot less steep.

If you’re still deciding whether or not to choose Squarespace, read these two articles, How to Choose the Best Website Platform for Your Business (when to choose an open-source platform like Wordpress and when to choose an all-in-one drag-and-drop website builder like Squarespace) along with, Squarespace vs Wix: What You Need to Know.

Things I wish I knew before starting with Squarespace

  1. Choosing a Squarespace plan

  2. The only Squarespace template I recommend

  3. Customizing design styles

  4. How pages work (Page vs Index vs Cover Page vs Folder)

  5. Adding images or colors to page backgrounds

  6. No auto-save

  7. Primary navigation vs footer navigation vs not linked pages

  8. Formatting your pages with content blocks

  9. Customize your site even further

  10. How to get 10% off Squarespace

  11. Free G Suite and Acuity

  12. When in doubt, turn to Google

Had I understood these things I would have saved a lot of time and frustration. Below I’ll dive into each one of these must-know topics giving you a high-level overview so you can get started using Squarespace without the steep learning curve.

Let’s dive in.

Choosing a Squarespace plan

The great thing about Squarespace is that you can easily adjust your plan whenever you need to directly from your account (not my experience using other tools, like Wix). You can even get started building your website before choosing your plan.

Squarespace plans start at $12/month (billed annually, more expensive to bill monthly). This Personal website plan is a great option if you just need a basic website. If you want to add in features like an announcement bar, pop-ups (for example, to build an email list with a lead magnet), or use custom code to customize your site even more, you’ll want to choose the Business plan for $18/month.

While you can sell things on the Business plan, it’ll cost you an additional 3% fee ON TOP OF your credit card processor’s fee like Stripe, Square or Paypal (I learned this the hard way!). Because of this I suggest you choose a Commerce plan if you intend to sell a lot of things. The Basic Commerce plan is $26/month or you can upgrade to the Advanced Commerce plan for $42/month to get features like abandoned cart recovery, gift cards, and subscriptions.

Squarespace plan comparison.png
 

More Info on Squarespace plans

Compare all Squarespace plans
Squarespace’s tips on choosing a plan

The only Squarespace template I recommend

With so many beautiful Squarespace templates, how do you choose?!

This is where I wasted A LOT of time. I looked at and tried out SO MANY templates. It was really hard to discern the differences between them and I quickly became overwhelmed with making the right choice. I’d choose a template only to get frustrated that it didn’t do what I needed it to do. Luckily, you can change your template whenever you want, but I was sick of the trial and error and just wanted to know which website template would do what I needed it to do.

Then I found online entrepreneur and blogger, Paige Brunton, online and boy did I wish I had found her super helpful articles sooner. She clearly laid out the differences between all the Squarespace templates in a super simple chart.

The verdict?

Choose anything in the Brine family.

Squarespace has what’s called template families. What family your template is in determines what capabilities your website can have. Paige describes it as your template’s DNA. Within a template family, the differences between templates are cosmetic, but you can adjust them in the Site Styles settings (more on this below).

As the most flexible and comprehensive template family, the Brine family of templates enables you to take advantage of nearly ALL of Squarespace’s capabilities with a few exceptions (laid out in the article at this link). Even if you don’t need them right now, you might in the future, and not having to change templates or find the right one from the beginning is going to save you a lot of time.

So, first choose a family (I recommend Brine), then choose a template within that family that is closest to the aesthetic you’re looking for so that you don’t have to make as many style or layout changes (Note: within the Brine family there is an actual template called Brine, but there are a ton of other templates in the Brine family too. Scroll to the bottom of this article to see the full list of Brine family templates).

I’ve built two websites on different Brine family templates and both were a breeze compared to the other templates I tried where I just couldn’t get them to look or function the way I envisioned my site.

More Info on Squarespace Templates

All Squarespace templates
Squarespace guide: choosing the right template
Chart comparing all Squarespace templates
Why Brine is the best template family
Squarespace Brine family details + list of Brine family templates

Customizing design styles

Unlike some other website platforms, Squarespace houses all of your website design choices in one area. To get to the settings, select Design in the menu and then Site Styles. Because of this, all of your design choices like font and button styles will be consistent across your entire site. You cannot customize these things on an individual page like you can layout or background colors. This will keep your site design consistent and enable quick changes across the entire site.

Pro TipS

There are a lot of settings in the Site Styles. If you want to change a setting but aren’t sure where to find it or what it’s called, first go to a page on your website that has something you want to change the setting on, for example, a button. Then go to Design and Site Styles in the menu on the left. Once there, click on the area of the page you want to change the setting for (you cannot switch to a different page once you’re in the design settings which is why you’ll need to pull the right page up first) and it will pull up those settings in Site Styles for the area you clicked on.

In the example shown below, I clicked the button on the page on the right and the button settings popped up on the left so I can adjust them. This also allows you to see the changes in real time on the page shown so you can determine if you like what it looks like.

Squarespace site styles find setting pro tip.png

How pages work (Page vs Index vs Cover Page vs Folder)

Squarespace enables you to create different sections on a web page. Those sections can be moved around in a drag-and-drop kind of way. They can also be moved to different pages on your website.

Here’s where it gets confusing, these sections are called PAGES.

You can combine multiple pages at the same URL (ie. stacykessler.me/about) together using an INDEX.

Below is a screenshot of what I mean.

Squarespace pages vs index.png
 

Do you see how it looks like there are four distinct sections to this page? Each of those sections is really a separate page, grouped together within an Index page. Below is how this looks in the pages menu bar (Home is an Index page with no actual content on it, it simply organizes, or indexes, all the pages beneath it - which can be moved around or removed from the Index page at any time).

Squarespace+index+page+sections.jpg
 

Another option you’ll see are folders. A folder is simply a way to organize your pages behind the scenes. It does not make any changes to your website (except in the navigation which is covered below). For example, you could group together all of your booking pages in one folder to make them easy to find. Note: you cannot add Index Pages to a folder.

Finally, cover pages. Think of a cover page like a landing page. If you’re not familiar with a landing page, it’s a simplified page format where your menu bar and footer are hidden, keeping the focus on the content. Use cover pages to create a custom 404 error page or a sales page linked to an external ad, for example.

Pro Tips for Squarespace Pages vs Index

You cannot duplicate or copy an Index page, but you can copy the pages/sections within them (and even move them into a different Index page or let them stand by themselves).

If you want a different background image or color, you’ll need to start a new page/section.

For SEO purposes, a good general rule of thumb is that you should only have one main heading (using Heading 1 font setting) per page/section. If you want to add another main heading, add a new page/section.

Adding images or colors to page backgrounds

On each page or section you can leave the background your default color, or add an image or new background color. To do this, hover over the page until a toolbar pops up. Select Banner. Upload the photo you want (SEO Tip: Change the photo title, alt tex, or description to include relevant keywords).

If you’d rather have a solid color, create an image that is just that color. You can do this in Keynote or Powerpoint by changing the background color on the slide and then exporting the slide as a jpg or png image.

Pro Tip

Images left to their normal settings may make it difficult to read the text on top. You can only have one style setting for what color the text shows up as when laid on top of a banner. This can cause readability problems when you have some dark images or colors and some that are light. In one instance you may want white text. In another you may want black.

Here’s a workaround.

In the Design Site Styles menu, select a dark or light overlay text based on which you think will work with the majority of your banner images or colors. You can change this for all of your headings and your body text.

Squarespace Font overlay color.png
 

Then add an overlay color that’ll show up on top of any banners you add.

Squarespace overlay color.png
 

Think of this like adding a filter or transparent color. When you do this, any time you add a banner image, Squarespace will automatically add this overlay. If you want this overlay on the images but not on the background colors you upload (since it’ll change what the color looks like), instead add your own overlay to the photo before uploading.

If you don’t have photo editing tools, you can again use Keynote or Powerpoint. Simply add the image you want to use to a slide and add a rectangular shape over the whole image. Change the shape to be black or white and change the transparency until it’s how you want it. Then export the slide as a jpg or png image and upload into Squarespace.

No auto-save

Unfortunately, there is no auto-save feature in Squarespace. Save your changes often to avoid accidentally losing your work (I’ve done this too many times!). Once you hit save, your changes get published and anyone can view them unless you disable your page or add a password. You can do both of these by clicking on the gear icon (settings) next to the specific page or index you want to hide.

Squarespace page settings disable page add password.png
 

Primary navigation vs footer navigation vs not linked pages

One thing that confused me on Squarespace when I started, was understanding the meaning of the different sections in the Pages menu shown below.

Squarespace linked vs unlinked pages.png
 

Here’s an overview:

Primary Navigation: This is what shows up in your website header as a menu bar. Any pages you want to be shown in your navigation bar should be created here (by clicking the + button) or dragged here from the Not Linked section (described below).

Pro Tip

If you want several page options to drop down when someone hovers over a menu item, instead add a folder to your Primary Navigation. Title the folder whatever you want to show up in the main menu bar. Next add your pages underneath the folder. Since you cannot add Index pages to folders, if you have them show up in the drop down option within a folder, add a link to the Index Page instead.

Squarespace menu primary navigation drop down.png

Secondary Navigation: This is possible on some templates and acts just like the Primary Navigation but in a slightly different area of the header.

Footer Navigation: While you can house pages in your footer like you do the Primary Navigation section, you cannot house the same pages from your Primary Navigation. Your pages cannot exist in two places, so instead of dragging them to the Footer Navigation area (which would remove them from your menu bar), you’ll want to add a link to the corresponding page by clicking the + button and selecting link.

Not Linked: This is the area that houses all of your pages except for the ones in your navigation areas described above. These pages are still public (unless you’ve disabled or password protected), but they can only be found if someone types in the direct URL, finds them on Google (you can change this setting so they can’t be found), or clicks on a link to that page from a different area of your website.

Home: To select your homepage, simply click the settings (gear icon) next to the page you want to be your home page. Scroll to the bottom of the General settings and select Set as Homepage (see image below). You can leave your homepage in the Not Linked section if you don’t want it in your navigation or drag it to the Primary Navigation to include it in your menu. I keep mine in Not Linked because most people know that by clicking on the logo you will be taken back to the homepage.

Squarespace set homepage.png
 

Formatting your pages with content blocks

When adding content to a page, hover over the page until the toolbar appears and click Edit. A new toolbar will appear and on the top right is a plus (+) sign. Click the plus sign and all the options will appear for things you can add to your page such as a text box or image. Click and hold on what you want, then drag it to the page. While you’re hovering over the page you’ll see either a black line (horizontal or vertical) or a box show up. It will move around and change as you move the item around. Simply release the item when the line or box shows up where you want it to. It might take a little trial and error but you’ll get the hang of it. If it goes where you don’t want it to go, simply delete it and start over, or click and hold on the content block (ie. text box or image) to move it around the page.

If you add a content block where a box pops up, it’ll wrap the other content around it like below.

Squarespace adding content block where box is.png
 

If you add a content block where a line pops up, it’ll shift all the other content either over to the side with a vertical line or up or down with a horizontal line (the example below was dropped where a horizontal line showed up underneath the text).

Squarespace adding content block where a line is.png
 

If you don’t want the item to take up the whole width of the area on the page, add a spacer from the content block afterwards. You can drop one of these onto the page. Before you release the spacer onto the page, make sure the line where it’ll drop is the same size as the thing you want to move over, otherwise the space will be added for the entire page height or width instead of just for the item you want to adjust.

Once the spacer is added you can adjust the width of it to change the size of the content block adjacent to it.

Customize your site even further

While Squarespace makes it simple for anyone to build a website with their drag-and-drop tool, sometimes you just want to customize it beyond what’s possible in the basic settings.

Squarespace enables you to inject custom code. Trust me, you don’t have to know anything about code to do this.

Simply do a Google search for what you want to change, add, or customize. Chances are good you’ll find someone who has published the code to do this. For example, I added a third heading using custom code since Squarespace’s default is only two headings. Once you find the code, copy and paste it in either the general website settings (custom css) or on an individual page (in either the page sessions or by adding a content block for code), depending on what you’re doing.

NOTE: Squarespace support does not help you with any custom code. If you’re using custom code to add in the capability of another company’s tool, your best bet is to go to them with any questions. I did this with Convertkit when I was having a problem with how my pop-up was showing and they were super helpful in giving me the right code and instructions to fix it.

If something gets messed up, simply delete the code you added and it will go back to the way it was.

How to get 10% off Squarespace

A few select bloggers have a discount code for Squarespace. Download Paige Brunton’s freebie which has her unique affiliate discount code inside for 10% off Squarespace, pretty sweet!

Free G Suite and Acuity

With certain Squarespace plans you get perks like free G Suite for a year or a free Acuity plan (scheduling tool). Sign up for Squarespace first and then take advantage of these perks. I didn’t realize I could get G Suite free so I purchased it before I signed up for Squarespace and missed out on this perk.

When in doubt, turn to Google

If you’re looking for a step-by-step how-to on something specific, turn to Google. Squarespace is so widely used now that you can find a tutorial for pretty much anything online. Squarespace’s own help articles are pretty extensive too and you can reach out to support if you’re having issues.

Before you build your website

Having a website is very important, but it’s not everything. If you’re still figuring things out for your business, be sure to download this free checklist that will walk you step-by-step through figuring out the five foundational essentials that will set your business up for success. Download it free below:

PIN THIS

Overcome+Squarespace+learning+curve+-+stacy+kessler.jpg
 
 

 
stacy kessler - pathfinding strategist

Hey There!

I’m Stacy Kessler, an entrepreneur, strategist, and adventurer dedicated to helping you figure out how to craft a unique, compelling, and profitable business you love around your expertise and passion.

You are meant to do important and amazing things in this world and I’m here to help you do just that.

 

You might also be interested in these articles


You don’t want to miss this.

Sign up to get these strategy articles delivered to your inbox every Wednesday.