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:
How to get started / Watch the course
Access CANVA graphics
How to replace wavy section dividers
How to use custom CSS to add H4 font
How to add team members and link them to the pages
How to add a white border to your images
How to upload new team members
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 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.
2. Access CANVA graphics
2. How to replace wavy section dividers
A wavy section divider is a narrow full-width image at the top of a section. Its upper part is the same color as the previous section, and the lower part is the same color as the section it is placed in. Alternatively, one part of the wave can be transparent, in case it is placed on a photo background.
If you want to replace a wavy divider with your own, make the necessary changes to it in Canva. Then, download the image to your computer. In Squarespace admin click Edit page, scroll down to the section, find the image, click it, and click the pencil icon. In the new window, click replace the image and upload your divider image from your computer.
If you want to create a divider in a new section, you will need to add an image block and then place it at the top of your section.
4. How to use custom CSS to add H4 font
You can see that for Heading 4 we are using Inconsolata font. With a little trick, we can apply it without having to actually import it manually.
Go to Design > Fonts > Assign Styles. There is an option to assign a font for a site title here. But because we are using an image for a logo, we do not show this font anywhere on the site. Choose a font you want to have as your H4 and set it as your Site Title font.
Now go to Design > Custom CSS and find this snippet in the code:
//H4 uppercase subhead
h4 {
font-family: inconsolata; //change this to your preferred font given it's available on this website
text-transform: uppercase;
font-weight: 200;
line-height: 1.3;
letter-spacing: 0.1em;
}Change the name of the font (after font-family:) for the one you have set as your Site Title font. You can also tweak more settings here: choose your font to be uppercase or lowercase, change weight, line-height, letter-spacing. Click Save in the upper-left corner, when you are done tweaking and you like the final look.
5. How to add team members to the Homepage
The Team on the main page is displayed in a special Squarespace section called People. To upload your team members to the Home page click Edit, scroll down to the section and click Edit Content. In the content tab, click on any pre-loaded team member and you will be able to replace the image, title, and descriptions. Keep descriptions short and the same in size. You can add more members by clicking Add in the Content tab, or delete any extra list items by clicking on the red bin next to them.
To look more professional, make sure the pictures of the people are color-corrected in the same way and have the same proportions.
6. How to add a white border to your images
Some of the pictures in this template have little white borders. We achieve this look with a bit of CSS.
Firstly, you need to install this useful Chrome extension, that shows IDs of sections and blocks in Squarespace. It will come in handy in the future because many Squarespace tutorials require it. Once you install it, you will find it in your extension bar in the upper right corner of the browser – it looks like a grid. Click it once, while browsing any page on a Squarespace website, and you will see IDs of sections (blue ones), IDs of blocks (red ones), and IDs of collections (green ones). Click the extension icon once more, if you want to turn them off.
Then, go to Design > Custom CSS and find this snippet. As you can see, there are already some block IDs inserted here.
//This adds white border to some images
#block-812fd7375ebf935bf2b3, #block-yui_3_17_2_1_1660736006653_2090892, #block-eea95a59e03be6e21e3b, #block-yui_3_17_2_1_1660245911467_120287, #block-yui_3_17_2_1_1660245911467_19508 .fluid-image-container {
border: 5px solid #fff !important;
}Turn the extension on the page where the picture you want to add a border to is placed. Find the block ID next to this image and click on it once. Now the ID is copied into the buffer. Insert it next to other block IDs in the Custom CSS add a comma and a space, and click Save.
You can also change the color of the border by swapping a HEX color code. It is set to white with #fff. Find the HEX code of the color you want and place it instead of white. You can regulate the thickness of the frame by tweaking the value of the border, which is set to 5 px.
7. How to upload new team members to the Team page
The Team page in this template is basically another blog. It is a simple yet aesthetically-pleasing solution to display team members using blog functionality.
The main page has a header with the headline and an archive blog, which will help you categorize your team members for example by specialty.
Every Team member has their blog entry. To edit their photo and description on the main blog page, you need to click three dots in the left-side menu next to a team member. Click Settings > Content and replace the image and description text.
If you need to create a new team member, click on three dots next to an existing one and click Duplicate.
To change the title and information, go to a page about a person and click Edit in the upper-left corner of the page.
8. 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.