The Ultimate Guide to Squarespace

Squarespace is my favorite website platform. I've written a guide about Squarespace before [read that post here] but today I wanted to go deeper and talk about customizing your website to better fit your brand and to make your site look & feel more professional. 

01. Creating a Membership Site

Most people assume you can't set up a membership site on Squarespace but you can! I researched the crap out of multiple platforms when I was setting up my site (and emailed the companies multiple times to really annoy everyone). There are two platforms I'd recommend, for starting your membership site through Squarespace: GoPaywall or Memberspace.

GoPaywall

This is the cheaper option of the two. You pay for what you get, though, their customer service is a bit slow and it can take awhile to hear a response back. However, they do a great job with their platform, it's easy to navigate and set up. Your members can sign up for their memberships with Paypal. I recorded a full setup of the GoPaywall site below:

Memberspace

This is the one I prefer. It's 6 times more expensive as GoPaywall but I'll compare the two more in the video.

02. CSS Customization

One of the great features about Squarespace is how easily you can add custom CSS codes to your site. This gives you control over your fonts, colors, forms, buttons and more that you don't normally have control over from the design menu alone.

An important note before we jump into this: Squarespace support cannot help you with custom CSS. If you add CSS and something on your site stops working, you'll have to remove the code and find another alternative. It's always better to change styles, text, and color from the design menu if you can. Minimize how much custom coding you add to your site.

SumoMe & Powr.io

There are plenty of 3rd party platforms that make it easy to add custom features. Two of my favorites are SUMO.me and POWR.IO both of these have free versions of their platforms that are pretty damn good. The pro versions of both are worth the price as well if you'll be using many of their tools. Check them out.

Adding Your Own Fonts

To add your own fonts to Squarespace go to your main menu > design > custom CSS and scroll to the bottom until you see the "manage custom files" button. When you click on it, you'll be able to upload your font file. Once you've added the font, take note of the font name and replace that in the code below:

@font-face {
    font-family: ‘font name goes here';
       src: url(‘URL GOES HERE'),}
h1 {font-family: 'font name goes here';}

Add this code in the text box above your custom file button. Next, highlight the "URL GOES HERE" text and look in your custom files for your font. When you click on it, the text you've highlighted should be replaced with the font URL. Click save and go to a test page to make sure everything is working properly.

Once you get on a text page, open up the code block and paste the following code into the text area:

<style>
h1 {
font-family: 'FONT NAME GOES HERE';
text-transform: lowercase;
font-size: 82px;
letter-spacing: 0px;}
</style>

Now, add your font name and save the code block. Add a text block to your page, change your text to the header 1 text and start typing. You should see your font instead of the default Squarespace option. To change the font code to be header 2, header 3 or just normal body text, change the "h1" to be "h2", "h3" or "body".

Header Text Size & Font

Once you've added your custom font to your website's CSS, you'll be able to add the font to specific pages using the code block we talked about above, or you can make the font appear on your entire site. For example, if you wanted all the header 1 blocks to be in your custom font, you'll need to follow the steps below.

Go to your main menu > design > custom css and paste the following in the text box:

h1 { font-family: 'FONT NAME GOES HERE';
text-transform: lowercase;
font-size: 82px;
letter-spacing: 0px; }

h2 { font-family: 'FONT NAME GOES HERE';
text-transform: lowercase;
font-size: 82px;
letter-spacing: 0px; }

h3 { font-family: 'FONT NAME GOES HERE';
text-transform: lowercase;
font-size: 82px;
letter-spacing: 0px; }

Or you can keep things simple with this code:

h1, h2, h3 {
    font-family: 'FONT NAME GOES HERE';}

If you use the simplified coding above, you'll be able to edit the size and color of the heading fonts within your design style tab. This can make it easier to edit your fonts if you're not as familiar with CSS and HTML coding.

There are so many other Squarespace users who have found awesome ways to customize their sites. Below are a few blog posts you might find helpful:

03. Creating Webinar Pages

One question I get a lot of emails about is how to host workshops, courses and live events on Squarespace. With WordPress, there's a pulgin for everything, but you can still do it on on Squarespace, you just have to get creative! 

To make a webinar page look a little fancier, I'd recommend checking out the link above to create a custom landing page. You can use a lot of those elements to design your page less like a regular website page and more like a beautiful landing page. Once you've got the basic design down, you can use the video block and YouTube live streaming to create a live event.

Missed the Workshop? Check it out below:

Nora Conrad