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.

Templates and styles

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.

A prompt appears asking you to Name Your New Style. You'll also see this prompt if you click on any of the other tabs within the Appearance Editor, such as Banner & Navigation.

Enter a name and click Create Style. This creates a custom style from that template’s defaults, which you can now customize. Any changes you make to this custom style won’t affect the default Squarespace template and styles, or any other styles you've created. Learn more at Creating custom styles.

The new style appears to the right of the existing styles within that template. 

Layout and banner image

Use the Banner & Navigation tab to organize the layout and structure of your site.

  • Column Layout - Choose whether to display a sidebar or sidebars, and where the sidebars display.
  • Change Widths - Adjust the width of the page content, sidebars, and site padding.
  • Horizontal Navigation - Display navigation above or below the header, or hide it.

Learn more at Changing your site layout.

Use the Banner Image field to add a banner image to the top of your site. Learn more at Adding a banner image.

Fonts, colors, and sizes

Use the Fonts, Colors & Sizes tab to adjust the typography and other style options for your site.

Click elements on the page to see its style options. A blue box appears around each element that will be affected. For example, if you click on one navigation link, blue boxes appear around all your navigation links. Any style change you make will affect all the selected elements.

Alternatively, select an element from the drop-down menu to see style options for all adjustable elements.

Tip: If changing a style option isn't affecting your site, ensure you don't have any conflicting custom CSS.

Example: Set the site width

To set the width of your site:

  1. Click Fonts, Colors & Sizes.
  2. Click the drop-down menu and scroll down to the Widths section.
  3. Click Content Width.
  4. Use the slider or Current Value field to set the width.
  5. Click Save Changes.


Custom CSS

If you have coding knowledge and want to customize your site beyond the adjustments you can make in the Appearance Editor, use the Custom CSS tab to add CSS code.

We highly recommend that you have coding knowledge to use the CSS Editor. Adding code to your site is an advanced modification, and we can't help you troubleshoot or use custom code. To learn more, visit Using the CSS editor


Use the Settings tab to change the settings for any styles you've created. 

First, enable the style you want to edit in the Template & Styles tab. Then go to the Settings tab to adjust the style name, author, adjust the icons, and change any advanced options.

To learn more, visit Customizing template settings.

Was this article helpful?
0 out of 0 found this helpful