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
Uppercase subhead (h4)
Tilted handwriting (h4 bold)
Featured Podcast Episodes section list numbering
Testimonials block
Newsletter form 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
Access CANVA graphics below:
Perfectionist - Palette
Perfectionist - Collage
Perfectionist - Hero Visual
Perfectionist - Phone Mockup
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 -> Utilities / Website Tools -> Custom CSS.
Below in this documentation we outline some specific changes we made, what they alter, and how they work.
3. Uppercase subhead (h4)
All the headings on Squarespace websites use one font. It is set in Site Styles > Fonts > Headings and applies to h1, h2, h3, h4. In this template, however, we gave h1 andf h4 a different font. While h2 and h3 use IvyPresto Display, h1 and h4 use Sofia Pro. Let me show you how to achieve this with a bit of CSS.
h1 {
font-family: sofia-pro;
text-transform: uppercase;
font-weight: 600;
}
h4 {
font-family: sofia-pro;
text-transform: uppercase;
font-weight: 400;
line-height: 1.8;
letter-spacing: 0.09em;
}Change the name of the font (after font-family:) for the one you have set in Miscellaneous. You can also tweak more settings here – choose your font to be uppercase or lowercase, change weight, line height, and letter spacing. Click Save in the upper-left corner, when you are done tweaking and you like the final look.
4. Tilted handwriting
(h4 bold)
One more signature feature of this template is a beautiful script font. Important note: this is a custom font (called “Blackstone“) and it is not included with the template. To publish a website using this font, you need to buy your own license. You can purchase it from Creative Market or elsewhere.
If you have a different handwritten font in mind, follow the first three steps of this tutorial on our blog to upload it to your website before coming back to this tutorial.
The snippet below makes the Blackstone font work on the website. In order to apply it on your website, select the text, set it to Heading 4, and make it bold. Voila! The text transforms into a handwritten scribble. It is not actually bold, as can you see - we have CSS convert any bold Heading 4 to Blackstone font.
It is a bit counterintuitive, but we have to go this far because Squarespace doesn’t allow us to add any more fonts through the standard settings.
If you have uploaded another custom font to the website, swap the name of the font in this snippet. You are also free to tweak font size, font weight, line height, transform your text (e.g. make it uppercase), and even rotate it (right now it is rotated to -5 degrees).
h4 strong {
font-family: "Blackstone";
font-size: 60px;
font-weight: 300;
line-height: 1.2;
text-transform: none;
display: block;
transform: rotate(-5deg) !important;
margin: auto;
position: relative;
font-weight: normal;
letter-spacing: 0px;
}5. Featured Podcast Episodes section list numbering
The “Featured episodes“ section is a custom section with the Squarespace summary block in it. By design, summary blocks pull data from a “collection“ you specify, which can be a collection of blog posts, photo shoots, design assets, or, as in our case, podcast episodes. We use some CSS code to then target specific sections and add automatic ordered numbering to featured posts / podcast episodes. It is automatic too, so when you add a new item to your relevant collection, the numbering will reflect that.
With our additional CSS code, we target all “Summary“ blocks which have certain settings - ones that are set to display side-by-side, plus where design is set to be a “list“ with an excerpt hidden. Thus every single Summary block across the website, which shares these particular settings, will display a numbering next to items on the website. This is just something for you to consider.
// Podcast block list numbering
.summary-v2-block {
.sqs-block-content {
.summary-block-wrapper {
&.summary-block-collection-type-blog-side-by-side {
&.summary-block-setting-design-list {
&.summary-block-setting-hide-excerpt {
counter-reset: applet-counter;
.summary-item {
position: relative;
counter-increment: applet-counter;
&:before {
position: absolute;
left: -70px;
top: -.5rem;
width: 45px;
height: 45px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
border-radius: 50%;
background-color: var(--secondaryButtonBackgroundColor);
content: counter(applet-counter);
@media screen and (max-width: 575px) {
left: -50px;
top: 0;
width: 35px;
height: 35px;
}
}
}
}
}
}
}
}
}6. Testimonials block
Custom CSS for the default Squarespace Testimonials block adjusts featured images and tweaks some other sizing aspects (including font sizes). The CSS code in this template targets all Testimonial sections where design type is set as “Carousel“, max columns is set to 1 and image crop to 1:1
// Testimonials
// Section type - Testimonials
// Design type - Carousel, with:
// * Max Columns : 1
// * Image Crop : "1:1"
// * Infinite Scroll : true
// * Style & Size settings adjusted
// to make it look as close
// to final design as possible
.user-items-list-section {
.user-items-list {
.user-items-list-item-container {
ul.user-items-list-carousel__slides {
li.list-item.user-items-list-carousel__slide {
// Image container
.user-items-list-carousel__media-container {
width: 30% !important;
@media @from-mobile {
width: 10% !important;
}
.user-items-list-carousel__media-inner {
img {
border-radius: 50%;
}
}
}
// Text container
.list-item-content {
// Title (testimonial text)
.list-item-content__title {
font-family: 'sofia-pro' !important;
text-transform: none;
font-weight: 400;
letter-spacing: 0;
@media @up-to-mobile {
max-width: 90% !important;
}
}
// Content (testimonial person name)
.list-item-content__description {
font-size: 0.7em !important;
@media @up-to-mobile {
max-width: 90% !important;
}
}
}
}
}
}
}
}7. Newsletter form tweaks
The below CSS code targets all newsletter forms across the website and does three basic things - makes the block narrower by adjusting the height it occupies, adjusts font display in the email form field, and adds rounded corners.
// Newsletter forms
.sqs-block.newsletter-block.sqs-block-newsletter {
&.rendered {
max-height: 6rem;
.newsletter-form-wrapper {
form.newsletter-form {
header.newsletter-form-header {
display: none;
}
.newsletter-form-body {
padding-bottom: 0;
.newsletter-form-fields-wrapper.form-fields {
margin-top: 0;
.newsletter-form-field-wrapper {
&.form-item {
&.field {
&.email {
label {}
input {
font-family: ~"var(--primary-button-font-font-family)";
font-size: ~"calc(var(--primary-button-font-font-size-value) * 1rem)" !important;
text-transform: uppercase;
font-weight: 400 !important;
border-radius: 300px;
}
}
}
}
}
}
.newsletter-form-button-wrapper {
margin-top: 0;
.submit-wrapper {
button.newsletter-form-button {
}
}
}
}
.newsletter-form-footnote {
display: none;
}
}
}
}
}