Template Documentation

Read this page before making any changes to the template. Also, please register for our template restyle course:

*By the way, this page is pass-protected. You can just keep it in the Not Linked section and consult it when you need to

 

What's covered in this guide:

  1. How to get started / Watch the course

  2. Template CSS Tweaks overview

  3. Selling access to content with MemberSpace

1. How to get started / Watch the course

Firstly, duplicate all the pages you plan to use before making any changes to the design. This way you will save the original design of the layouts for your future reference. Many things can go wrong when you start designing, and some of them are difficult to reverse. Duplicating the pages beforehand will safeguard your customization process. If you mess something up, you can always start fresh. You can duplicate pages within one website as many times as you need.

To duplicate a page click a small gear icon next to it. In the general settings scroll down and click Duplicate page. You can put these duplicated pages in the Not-Linked section, so no one sees them except for you. To do this, just click the name of the page and drag it down.

I also advise you to watch the course and prepare your content before tweaking the template. The course walks you through Squarespace website builder and explains how to customize your template using basic design principles. Watching it before jumping into tweaking ensures the best possible outcome.

Saving sections to favorites

Go into the page editing mode and bring up the Edit Section menu in any section you like. Click the heart icon to save to the section to favorites, and then reuse it on any other page you like. You can access the saved sections when clicking “add section“ when editing the page.

2. Template CSS Tweaks

Squarespace is an amazing platform, which allows you to create almost any website design and layout you can think of. But as with any system, it has its limitations. Which is why we have added some custom styling via CSS code, adjusting the look and feel of certain elements. All additional code we added can be accessed from the Squarespace website admin interface by navigating to Website -> Pages -> Website Tools -> Custom CSS.

In general, we used as little custom CSS (LESS) as we could - and whenever we could, used the built-in Squarespace CSS variables. That makes our custom CSS code quite adaptive to client style changes. Simply put, if you change something in the website styles panel or switch a color theme a section uses, our code is better equipped to adapt to it without the need to make any edits to it.

Typography

We adjust the styles of Heading 1, Heading 2, Heading 3 and Heading 4 to various degree.

With Headings 2 and 4 it’s just the line height.

With Heading 1 we program it to use the font, set as a miscellaneous in the Squarespace website style settings panel.

Finally, with Heading 4 we set it to be the same font as body paragraphs are, adjust its weight and letter spacing, and make all Heading 4 text uppercase.

Summary blocks

“Summary blocks” are programmed to have a “card” layout (as seen in the gif below). Same card layout is also applied to the listing of blog posts on the blog page (any collection page, really), as long the collection layout is set to “basic grid”.

Newsletter

Since we add the newsletter block to the footer, we also adjust the look and feel of the newsletter form to better fit where it is positioned. The newsletter form button is also programmed to inherit colors set for the primary button, which means that if you change the theme of the footer section, the form button will automatically adjust.

FAQ block

Default Squarespace FAQ accordion blocks are adjusted to better fit the style of the template – we also programmed them to inherit the text block background color, making every FAQ option to have a background color.

If you feel confused by CSS but want to make changes to some of the styles specified above (or want to write your own styles) - start with our free CSS Cheat Sheet!

And if you want to learn even more, join our self-paced CSS Mastery class, which focuses heavily on using CSS in Squarespace!

3. Selling access to content with MemberSpace

This template includes a “member area”, which is built for you as a page titled “Course“ in the not-linked section of your website admin. It was built with MemberSpace in mind and is ready to be used to create a paywall to sell access to any digital products including a content library, online course, community, newsletter, videos, paid podcast and more. You can even create a membership website if you want to!

Squarespace also supports member areas and paywalling content out of the box with no extensions necessary. But we made the decision not to create member areas powered by Squarespace in our templates and instead partnered with MemberSpace to provide paywall capability to our customers. We made this choice because we find MemberSpace to be more flexible and simple, yet powerful to accommodate almost any paywall needs when it comes to selling access to digital products.

To get started with MemberSpace, click this link to create an account (they offer a free trial to all new members). Then follow these instructions to enable MemberSpace-protected content on your website:


1. Create a “new site” in MemberSpace.

MemberSpace uses the URL structure of your website to determine which pages need to be put behind your paywall. This is why it is important for you to note the URL of your protected content. In this template, the “page” designed specifically to be put behind the MemberSpace paywall is called “Course“ and the template URL for it in this template is /course. Change the name of the page and the URL however you like and then specify the new URL in MemberSpace.

Note on domain names: After you make this website public, be sure to edit your MemberSpace settings accordingly so that any domain name changes are reflected in your MemberSpace dashboard.


2. Add MemberSpace code to your website

Grab the HTML code that you have been given by MemberSpace when you set your account up. In the admin interface of this website, navigate to Pages -> Website Tools -> Code Injection and paste the MemberSpace code into the HEADER section of the website.

You can also follow this official MemberSpace tutorial.

Congratulations! You have now enabled paywalled content on your website and can charge your visitors a fee for accessing it using MemberSpace. Check out these tutorials to learn more about integrating MemberSpace with your new Squarespace website.