Social Motion 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
Uppercase subhead (h4)
Tilted handwriting ( h4 bold)
Testimonial slider with a border
Testimonial slider CSS tweaks (on the Services page)
Disabling header and footer on the sales 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 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:
BONUS: Download vector files here
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 lie 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. Tilted handwriting ( h4 bold)
One more signature feature of this template is a beautiful script font that adds a nonchalant atmosphere to the design because it looks like handwritten notes. This is a Diamond Lady font. Important note: this is a custom font and it is not included with the template. To publish a website using this font, you need to buy your own license. We have bought it on Creative Market.
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 is in charge of making the Diamond Lady font work on the website. In order to apply it 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. But we have CSS convert any bold Heading 4 to Diamond Lady 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: "Diamond Lady";
font-size: 45px;
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. Testimonial slider with a border
The testimonial slider with borders is placed on the sales page. It is a testimonial section pre-made by Squarespace. To make changes to this section in the page edit mode hover over the section to see a pop-up menu. Click Edit content. Here you can edit content and design: add images, swap text, change the number of rows, and even the whole layout.
The borders of the cards of this slider are set with CSS. Go to Design > Custom CSS and find this snippet:
// Border testimonials block
.white .user-items-list-carousel .list-item[data-is-card-enabled="true"] {
border: 0.1rem solid #000 !important;}You can change the color by replacing HEX code #000 and make the border thicker or thiner by manipulating border value which is not set to 0.1rem.
6. Testimonial slider CSS tweaks (on the Services page)
There is one more testimonial slider on a Service page, but it is styled a bit differently.
With a bit of code in Design>CSS we changed the way arrows look. Originally, there is a background around these arrows, but we get rid of it by adding opacity to it. With this snippet we also tweak the height of arrow container.
// List items carousel adjustments
.light {
.user-items-list-carousel {
//Testimonial slider block opacity
.user-items-list-carouse {
.user-items-list-carousel__arrow-icon-background-area {
opacity: 1!important;
}
}
.user-items-list-carousel {
.arrow-container {
height: 60%;
}
}
We also make the arrows of the slider black here. So if you’ll need to recolor the arrows you will need to change the HEX code of the color in this bit of code. For now it is #00000 – black – swap it with your color code and click Save in the upper left corner.
There is also a small part of the code below that is responsible for keeping the testimonial slider the same size on smaller, mobile screens.
.list-item-content__description {
@media screen and (max-width: 575px) {
max-width: 100% !important;
}
}
}
}7. Disabling the header and footer on the sales page
You may notice that the Sales page has neither header nor footer. This is the usual trick for Sales pages when you don’t want your prospects’ attention to be to drawn to anything but the purchase. You want to slightly nudge them toward the needed call-to-action and a relevant button, that’s why it is better to hide the ways to escape the page through the menus.
To turn off the header and the footer on just one page we need to access the Advanced settings of the page. In the Pages menu click on the gear icon next to the page. Click Advanced and you will see the injection, that turns them off.
