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
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.