Module 3: The Style Editor


When you first open the Style Editor in Squarespace, it can be a bit overwhelming! There are so many options for you to modify your site, so I am going to go through the basics in this tutorial.

It is important to note that if you would like to change something specific on your site, it is best to navigate to that page first, then access the style editor. The Style Editor will only show options for the current page that you are on, not for the entire site. However, if you change options, it will change them throughout your site - no need to go page to page to update an item, it will work across your entire site!

 

colors

The Style Editor offers almost every color change you would like to make on your site. Simply click on one of the colors and insert the Hexadecimal code for the color you would like (this should have been provided to you by your brand stylist). Remember to only use colors from your color palette for your brand to keep everything consistent.

 

typography

This is where you will control the font, size, and spacing for all the text on your site.  You will see options for the different types of text, explained below.

Site Titles: These are only used in place of a logo; if you have a logo, then your site titles typically will not show.

Navigation: This is the text for your navigation menu at the top of your site.

Headers: You will see that you have three header options (in most templates). Header text is extremely important for SEO - this is where Google and other search engines will scan when they are looking for keywords.

Body Text: This is the main font information for your website. When inserting text on your site, you will see this come up as "Normal".

 

sizes and values, options

These options are for the overall look of the site, such as padding (space around an object or the full site), your logo size, and the site width.

 

buttons

I love the button feature in Squarespace! They offer three customizable options (small, medium, large) and give you quite a bit of variety in terms of editing them. They can be square, rounded, pill-shaped, and be either outlined or solid. You can play with these until you get the right look for your site!

 

clearing your changes

Depending on what page you are on, you may see different options (example: if you are on a page in your shop, you will also see ecommerce design options). The Style Editor lets you see your changes as you are doing them, and a grey dot will appear next to the item that has been changed. To undo the change, simply click the grey dot.


For more help, visit the Squarespace Knowledge Base.