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
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.
We 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:
3. Standalone vs Sales Page install (custom CSS overview)
When it is used as a sales page, it will inherit lots of styles from its parent website (fonts, color palette etc). Since we need to make sure the font hierarchy works well in such cases, we added some custom CSS code which you have access to.
Terranova as a standalone website
If you got this template as a 6-month trial, you probably won't need all that code. To disable on-page code, edit the Terranova template page, head down to the bottom of the page section and simply remove it.
You can also delete most of the CSS code. You can do so by going to Design > Custom CSS. Just make sure to keep the following code in there, as this is something that is used with both install types:
.header-display-desktop,
.header-menu {
a {
text-transform: uppercase;
letter-spacing: 1px;
}
}If you use Terranova as a standalone site, the rest of the site settings are in Squarespace design tab (colors, fonts, etc).
Some sections have image backgrounds - you can find source files in Canva graphics above. You can recolor and replace images that serve as backgrounds for those.
Terranova as a sales page template
If you got this template as a sales page template and we installed it for you on your existing website, you have two options:
1) Keep and edit the local on-page styles via custom CSS
2) Remove the CSS and use your site's font sizes and edit the layouts. To remove any styling from the page, simply delete the last section on the page that has a markdown block. Again, sine that will disable most of the custom CSS, you can also remove that by going to Design > Custom CSS from the main menu.
We suggest backing up the page - you can duplicate is multiple times.
How local styles are applied
The section at the bottom of the page hosts a single markdown block with a short code snippet. All that does is adds a "applet-studio-template-terranova" class to the page, making it easier to target its elements via custom CSS without touching any other parts of your website.
Below is the the entire custom CSS code. As you can see, it is split into separate snippets (titled like // Header 1 // Header 2 // Paragraph text, and so on) with each snippet clearly labeled. Feel free to edit those as you see fit or remove them completely. The only two thing we adjust, really, are font sizes and the accordion block dividers (that space between all the accordion items). We set color on those those dividers, forcing them to inherit section background color (of the section they are placed in) to have "transparent" dividers instead of the default black/dark ones.
Full initial template custom CSS code:
// --- Terranova by Applet.Studio ---
// Page header (applied to entire website)
.header-display-desktop,
.header-menu {
a {
text-transform: uppercase;
letter-spacing: 1px;
}
}
// Text header 1
.applet-studio-template-terranova {
h1 {
// mobile screen
font-size: 30px;
line-height: 1.2em;
letter-spacing: normal;
// tablet screen
@media screen and (min-width: 768px) {
font-size: 30px;
}
// desktop screen
@media screen and (min-width: 1200px) {
font-size: 38px;
}
}
}
// Text header 2
.applet-studio-template-terranova {
h2 {
// mobile screen
font-size: 25px;
line-height: 1.4em;
letter-spacing: normal;
}
}
// Text header 3
.applet-studio-template-terranova {
h3 {
// mobile screen
font-size: 25px;
font-weight: 500;
line-height: 1.4em;
letter-spacing: normal;
text-transform: none;
}
}
// Text header 4
.applet-studio-template-terranova {
h4 {
// mobile screen
font-size: 18px;
letter-spacing: normal;
text-transform: none;
line-height: 1.4em;
}
}
// Paragraph text
.applet-studio-template-terranova {
p {
// mobile screen
font-size: 16px;
letter-spacing: normal;
line-height: 1.8;
&.sqsrte-small {
font-size: 14px;
}
&.sqsrte-large {
font-size: 20px;
}
}
}
// Monospace text
.applet-studio-template-terranova {
pre {
font-size: 16px;
}
}
// Accodrion adjustments
.applet-studio-template-terranova {
.sqs-background-enabled.sqs-block-accordion {
.accordion-divider {
color: var(--siteBackgroundColor);
}
}
}
4. How to edit font colors on-page
Squarespace allows editing font colors on-page. We re-applied some colors on your page manually. You can edit the colors by going into the page, selecting a piece of text and changing the color in a contextual menu that appears:
