Styling your site

Once you’ve logged into your website, four editing mode icons appear in a black banner in the top-right.

Click Style to enter Style editing mode. The Appearance Editor appears at the bottom of the page. Use the options in the Appearance Editor to customize your site’s look and feel, such as the template, fonts, colors, and banner image. 

Note: To learn how to adjust your site’s content, visit Adding and editing content.

Watch a video

Tip: For more help, visit our video archive.

Choose a template and style

Templates provide the structure and layout framework for your site. Each template has its own preset style versions, with different colors, fonts, backgrounds, and other style features.

When you first click the Templates & Styles tab, you'll see the name of your site's current template, and the different preset style versions for that template. In the example below, Keystone, Facade, and Parapet are all style versions of the Blueprint template.

Click More Templates to see a list of all templates.

Each template has multiple style versions. Browse the different options by clicking a template and then clicking a style within it.

Any template and style you select will display as a preview, so you can see how it looks with your content. This preview is only visible when you're logged into your site; visitors to your site won't see it. 

When you find a template and style combination you like, click Enable Style. The style will now be live on your site.

Create a custom style

You can customize any template with your own style options. After choosing a template, hover over a style and click Edit This Style. You'll also be prompted to create a new style if you click on any of the other tabs within the Appearance Editor, such as Banner & Navigation.

Once you've created a custom style, you can customize your site's style and then enable it to publish it to your live site. This won’t affect the default Squarespace template and styles, and you can switch back to any of them if you like.

To learn more, visit Creating a custom style.

Next steps

Once you've created a custom style, you can:

See Custom style examples for more help.

If you have coding knowledge, you can also:

Note: Custom code, including CSS, falls outside the scope of our support.
Was this article helpful?
0 out of 2 found this helpful