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. Access CANVA graphics

  3. Change uppercase h4 font

  4. Vertical text CSS

  5. Add podcast episodes

  6. Buttons CSS

  7. Change flower icon

  8. Blog cards background color

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.

Save 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:

Stories Template Palette

Phone Mockups

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 h4 a different font. While h1, h2, and h3 use Ivy Presto, h4 uses Gill Sans. Let me show you how to achieve this with a bit of CSS.

Firstly, we need to add a new font, Commuters Sans in our case, to your website. Go to Site Styles > Fonts > Miscellaneous and choose the one you like in the collection of fonts.

Now go to Website > Website tools > Custom CSS and find this snippet in the code:

// Typography

h4 {
  font-family: gill-sans-nova !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.09em !important;
}

h3 {
  line-height: 1.4 !important;
}

Change the name of the font (after font-family:) for the one you have set as your Site Title font. You can also tweak a few more settings here – font size and line height. Click Save in the upper-left corner, when you are happy with the result.

As you can see, we are also tweaking the line-height of h3 font here.

 4. Vertical text CSS

You can add vertical text to any page:

  1. Install this Chrome extension – it allows you to quickly grab section and block IDs on the page in Squarespace.

  2. Add your text to the page; then turn it into italics.

  3. Enable the chrome plugin by clicking on its icon at the top of your Chrome browser.

  4. You’ll see the page with all section IDs highlighted.

  5. Grab the appropriate block ID (it will be situated next to your text block and will begin with #block-yui (etc). 

  6. Next, close the page and go Website > Website tools > Custom CSS.

  7. Scroll down the line where it says “// --- Vertical text”

  8. Paste your block ID followed by a comma, next to another block ID like this.

// --- Vertical text PASTE YOUR ID BELOW FOLLOWED BY A COMMA:
section[data-section-id="652e8de2a09a3e3744efaddd"], #block-17a4e5f0631db538895a, #block-yui_3_17_2_1_1685536850136_12190{ em {
  @media only screen and (min-width: 640px) {
    width: auto !important;
    writing-mode: vertical-rl;
    text-orientation: sideways-right;
    transform: rotate(180deg);
  }
  }}

Any text inside this block will become vertical text and you come to move it around the grid.

5. How to add featured podcast episodes

There are two pages named Podcast in this template.  The first one is the the regular page that is placed in the main navigation and has a page icon next to it. This is a custom page designed to present your podcast to your audience. The second page is placed in the not-linked section of the pages menu and has an ink pen icon next to it. This is one actually keeps your podcast episodes. It is de facto your second blog. This page basically has a storage function and is not visible to your website visitors.

 
 

Firstly, you will upload your episodes to your Podcast blog page. Every episode is a new blog post, where you can include an audio file as well as anything you need – images, description text, transcription, info about the guests. It is important that you fill out the info in the Blog post settings. In order to do this click three dots next to your blog post and then click Settings. Here, you should upload a featured image and and type in excerpt. We use excerpt to show the number of the episode. Also, pop in the Options tab and switch the toggle to make the post Featured if you consider it to be one of your favourite episodes and you want it to be singled out.

Now let’s go to the Podcast page in the main navigation to fill in the Featured episodes section. The episodes are contained here in a Summary block. To make changes to it, click the block itself and then click pencil icon. Select a page your episodes are drawn from – Podcast, and go to Filter items and switch the toggle to Featured only.

In the Design tab of the Summary block settings you will see that this is a List in which we chose to show the title, image, and excerpt (the one with the episode number). You can also tweak the number of shown episodes, size and aspect ratio of the images, and style text. Save the page when you are done.

 6. Drop shadow buttons

We are adding the drop shadow effect to the button using the code below. We are only adding this effect to the primary button type.

// Drop shadow button
.sqs-block-button {
  a.sqs-button-element--primary {
    position: relative;
    box-shadow: 10px 10px 0px 0px var(--primaryButtonBackgroundColor), 10px 10px 0px 1px var(--primaryButtonTextColor);
    transition: all .3s ease !important;

    &:hover,
    &:active {
      box-shadow: 5px 5px 0px 0px var(--primaryButtonBackgroundColor), 5px 5px 0px 1px var(--primaryButtonTextColor);
    }
  }

  &:not(.sqs-stretched) {
    a.sqs-button-element--primary {
      min-width: 150px;
    }
  }
}

 7. Change the flower icon

The flower icon used throughout the design is a shape block with a border. You can change the colors (border and fill) and the type of the shape using Squarespace controls.

 8. Blog cards background color

We’re adding a snippet to change the background of the sie-by-side blog collection cards. Change the color by replacing #514E4E; by your own color. The color of the blog headline, category and read more link is edited via Squarespace color settings.

//Blog cards background color
.blog-side-by-side .blog-item {
  background: #514E4E;
}

.blog-item-summary {
  padding: 0px 20px 40px 20px;
}