ELECTRA Template Documentation

Read this page before making any changes to the template. Also, please register for our template restyle course:

What’s covered in this guide

  1. How to get started / Watch the course

  2. Access CANVA graphics

  3. Uppercase subhead (h4)

  4. Border around testimonials and the Summary block font

*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

1. How to get started / Watch the course

Firstly, duplicate the template page 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.

2. Access CANVA graphics

Access CANVA graphics below:

Colors and logo

Hero image

Services section background

Section dividers

3. Uppercase subhead (h4)

All the headings on Squarespace websites use one font. It is set in Design > 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 New Spirit Condensed, h4 uses Commuters Sans.

3.1 If you would like to use the default heading font for all headings, go to Design > Custom CSS, find in it the code snippet below and simply remove it.

3.2 If you would lie to use a completely different font, first you will need to add it to your website by going to Design > Fonts > Miscellaneous and choosing it in the collection of fonts. Then again navigate to Design > Custom CSS and find the below snippet in the code. 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. 

// Typography

h4 {
  font-family: commuters-sans;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.09em;
}

Click Save in the upper-left corner, when you are done tweaking and you like the final look.

4. Border around testimonials and the Summary block font

We also added a bit of CSS code to tweak now testimonial cards are displayed and changed the summary block font.

In case of Summary block, we tell Squarespace to use PT Serif, which is the same font we use for headings (except for h4, see above) in this template. Again, if you would like to get rid of this adjustment, navigate to Design > Custom CSS, find the code snippet below and delete it. If you want to use a different font, you can follow instructions in #3 of this readme to add and use it.

//Summary block - changes font
.sqs-block-summary-v2 {
  .summary-block-setting-text-size-medium {
    .summary-title {
      font-size: 1.8rem;
      font-family: Pt Serif !important;
      font-weight: 400;
    }
  }
}

With this code we add border to individual cards in the testimonials block. One thing to note here is the use of var(--list-section-carousel-button-background-color) - basically it is telling SquareSpace to use the same color for the card border it would use for the background of any buttons added to that same block. This means that if you were to change the color theme of the testimonials section, the border color would change accordingly and automatically.

// Testimonials block - adds border
.white-bold {
  .user-items-list-carousel {
    .list-item[data-is-card-enabled="true"] {
      border: 0.2rem solid var(--list-section-carousel-button-background-color) !important;
    }
  }
}