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
Custom h4 heading style
Centered buttons on mobile
How to edit font colors on-page
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:
BONUS GRAPHICS:
Access a Google Drive folder with source svg shapes, and Figma template files:
Click here to open a Google Drive folder with various assets.
3. Custom h4 heading style
Rosée is crafted to be extensively user-friendly. This means that we use very little custom code to tweak the design and layout of the template.
However, we still need a bit of CSS for the sake of design. In this template, we customize how heading 4 looks with a bit of code. See h4 on the picture below.
// Custom heading style
h4 {
font-family: "futura-pt";
font-size: 1em !important;
font-weight: 400;
letter-spacing: 0.1rem;
}To find the code reponsible for h4 looks go to Design > Custom CSS. It is the same snippet as you see here:
All of the other headings on the website are Playfair Display font but we wanted H4 to be Futura PT just like the paragraphs. So in our code, we change the h4 font to Futura PT. You can swap it for another font if you want, but note, it should be uploaded to your website, i.e. it should be already used somewhere in Design > Site Styles > Fonts. Squarespace limits the number of fonts that can be used on the website for speed upload and design reasons (too many fonts look bad).
If you still want to use one more font, you can check out this tutorial on how to upload an extra font to your Squarespace website.
Except for the font itself you can tweak values of font size, weight, and letter spacing in the snippet to make your H4 look different. Click Save in the upper left corner of the page when you are done.
4. Centered buttons on mobile
All of the buttons of the Rosée template are centered on mobile. This is applied through code in Design > Custom CSS and it overrides the website settings. If you decide to change the position of the buttons on mobile you will need to delete this part of the code.
// Center all buttons on mobile
.sqs-block-button:not(.sqs-stretched) {
.sqs-block-button-container--left,
.sqs-block-button-container--right {
@media screen and (max-width: 768px) {
justify-content: center;
}
}
}5. How to edit font colors on-page
Generally, the colors on Squarespace websites are applied site-wide. To access these settings go to Design > Site Styles > Colors. We advise you to use these settings in order for your website to be visually coherent. However, there are special cases when you need to change the color of your text in some particular places. Relatively recently, Squarespace gave us this freedom.
To change the color of your text click Edit page, and highlight your text – a settings bar will appear. When you click on a color swatch you will be able to either choose a color from your website’s palette or choose a custom font from a color picker. You can also enter a Hex color code.
