Getting Started with Squarespace Style Editor aka Site Styles

Getting all of your content put into a new website is only half the battle (and half the fun!) of working on your own website. Styling your content by changing the fonts, colors, spacing and other design elements is what will make your site feel like yours and not like a template. The Site Styles panel can seem a little overwhelming when you first get in there but here are a few tips to help you discover all you can do.

Understand That The Site Styles Panel Is Not The Same For Every Template.

Depending on what template you’re working with, you will see different options in the Site Styles panel. Some templates have more design flexibility than others. Pros love templates in the Brine family because they have the most built-in choices. You can always add custom code to any site but it’s nice when what you want to do can be done as part of the native platform without any code. This doesn’t mean that other templates aren’t great choices and don’t have any room for modification though; if you love the look of a specific template, you would still be better off starting with it to get you close to the look you’re going for. Just know that you may have fewer built-in styling options.

You Can Jump To Specific Areas Of The Site Styles Panel By Clicking On That Element You Want To Edit.

The list of style tweaks (as Squarespace calls all the editing options) can seem like a super long list to have to scroll to but you can skip all of that and jump to just the part you’re looking for! For example, if you’re wanting to edit your H1 font style, just click on any H1 text on the page preview in the right and the site style panel will now only show the options for H1 text! When you’re ready to see all your options again, just click “Show All” at the top of the styles panel and all the options will appear again. Bonus tip! For spacing tweaks, you can click and drag directly on the

Squarespace’s style editor lets you visually make style edits in a safe preview mode before implementing them live on your website.

Squarespace’s style editor lets you visually make style edits in a safe preview mode before implementing them live on your website.

Some Tweaks Will Only Be Available After You’ve Added New Page Types Or Content.

You’ll probably notice that not all the style options are visible all the time. Don’t worry - this doesn’t mean they aren’t available! For edits on certain page types like blogs, events, galleries, indexes and products you’ll need to actually be viewing that page in order to see the available options. For other types of content, the available tweaks will only show up when you have added an element to your site that they affect. For example, you won’t see the editor options for an Image Card style until you add that type of image to your site. This is a helpful way to make sure that the options in the Site Styles panel aren’t too overwhelming but it does mean that you should make sure to come back to this panel any time you add a new element to your site since new options will have appeared that weren’t there previously.

Edits Made In Site Styles Affect Your Whole Site.

Even though you’ll only be previewing one page of your site at a time when you’re in Site Styles, the changes that you make will apply to your whole site. This helps make sure that things are consistent throughout your site so that your body text is the same style, size and color site-wide, for example. If there are any instances where you’d like to make page-specific edits as an exception to the site-wide styles, you’ll need to use custom CSS to target those pages or elements in order to edit them on a case-by-case basis. Unless you’re pretty familiar with code, hiring a pro to take care of that is probably the way to go!