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
Template CSS Tweaks
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. Access CANVA graphics
3. 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 -> Custom Code -> Custom CSS.
Below in this documentation we outline some specific changes we made, what they alter, and how they work:
Media Queries
Sets mobile, desktop, and extra-large desktop breakpoints for responsive design.
Custom Font
Adds the “Blackstone” font via
@font-facefor unique heading and display styles.
Social Media Links
Social icons in headers have rounded backgrounds and brand color styling for consistency.
Typography
Heading 4 uses Sofia Pro, uppercase letters, and generous spacing.
Strong text in small paragraphs is styled with the Blackstone font, large size, rotated effect, and block display for emphasis.
Disables automatic hyphens in all headings and paragraphs for cleaner text flow.
Testimonial Slider
Carousel arrow icons are fully opaque.
Arrow containers are vertically sized for better visibility.
Dropdown Menu
Increases line height and adjusts side margins for dropdown menu items.
Podcast Block List Numbering
Blog list items use large, numbered badges for clear, visual ordering, responsive to smaller screens.
Testimonials Carousel
Testimonial images are circular and responsive.
Titles use Sofia Pro with normal case and tight tracking.
Testimonial names use a smaller font and adapt to screen width.
Newsletter Block
Hides newsletter form header descriptions for a cleaner appearance.
Blog Header Links
Removes underlines from links in the blog header area.
Mobile Menu Text
Increases font size of mobile menu navigation items for readability.