How to Use Squarespace Site Styles
Video Overview
In this video, you’ll learn how to use Squarespace Site Styles to change the aesthetics of your website, including the look of the fonts, colors, backgrounds, and spacing. This tutorial will help you take the colors and fonts of your brand and set them up inside of your Squarespace website.
Written Directions
Different Squarespace templates have varying amounts of customization. That’s why I love recommending templates within the Brine Family.
To customize your site, you’ll want to follow these directions:
Click on “Design from the main dashboard”
Click on “Site Styles”
What you can change under Site Styles
Site padding
Adding a border
Navigation settings (spacing, color, font, positioning, social media icons)
Background color
Parallax
Index page padding
Heading, body text, button and line styles (color, font, weight, line height)
Footer layout, padding, color, heading/body text color
Showcase business information
Mobile settings
And more!
How to use Site Styles
All of the settings will be presented at once. You can either scroll down through all the settings and go through them one by one.
Or you can click on a specific section, like a banner image or paragraph of text, to bring up its settings instead of trying to scroll through and find it yourself.
When you alter any settings, they will preview on your screen to show you how the updated version will look. However, they do not go live until you click on “Save” at the top.
If you alter a setting but want to change it back, there are undo/redo buttons as well.
To see all of the settings again, you can click on “Show All.”
Things to remember about Site Styles
Whatever changes you make to one element will affect all of those same elements across the website. For example, if you change the Heading 3 size and color on one page, it will automatically update to match all of the other Heading 3 text on the site.
To change something on a different page than you are currently on, you have to exit out of Site Styles, click on the page from your navigation, and then re-enter “Site Styles.”
Site Styles can be overwhelming at first, but my advice is to take things slow. Start editing minor items first, like the navigation and font styles, before touching more advanced settings like site padding.
Have questions? Drop them below!
