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

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 -> Website Tools -> Custom CSS.

Here is a general overview of core things we adjust with additional CSS:

  • When you set the background opacity of any section to 50%, we override that opacity and display a color gradient overlay instead.

  • All “summary blocks” of type "grid" have a card-like layout with a white background, more padding, and all inner elements styled.

  • Same for all “summary blocks” of type "carousel” - they too have a card-like layout, except their design is a bit different from the "grid" summary block layout.

  • Lists display custom bullet points instead of the default “•“ ones. Like this list, you are reading, for example.

  • The border is added to testimonial blocks

  • There are sections is Squarespace where you don’t get a drag-and-drop editor experience, instead add “content items“ (things like images and text) and pick a “design layout” from a preset list of available designs. Such sections are referred to internally as “list sections“. And so for all such sections where the design is set to "Simple list", we add rounded corners on the card itself and to any image inside. The same goes for list sections where the design is set to “Carousel“.

  • We also round corners of email fields

  • On the blog (a collection called “News“ in this template), we also adjust the background color of content cards and add rounded corners to things. Also, tweak corners on the Events page (which is also a “collection” in Squarespace terms).

  • We make the font size on the mobile version of the menu smaller

 

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!