How to Find the Squarespace Style Editor - dummies

How to Find the Squarespace Style Editor

By Kris Black

You use Style Editor in Squarespace any time you need to modify the design of your site or specific elements in your site. Style Editor is a part of Style mode, which you access in the Preview area. Follow these steps to load Style Editor in your browser:

  1. Log in to your website.

    You are taken to Site Manager.

  2. Click the Preview (eye) icon, at the upper left of the screen.

    Preview Editor appears on the screen.


  3. Click the paintbrush icon in the Preview Editor toolbar, at the lower right of the screen.

    Style Editor slides into view on the left side of your browser window, pushing your site over to the right. The Preview Editor toolbar is replaced by the Style Mode button, indicating that you are in Style mode.


When you have finished customizing your site with Style Editor and want to exit Style mode, follow these steps:

  1. Click the Save button, at the bottom of Style Editor.

    Any changes you’ve made in Style Editor are saved.

  2. Click the x in the Style Mode button.

  3. Style Editor slides out of view, and the Style Mode button changes back to the Preview Editor toolbar.

Style Editor is divided into five main sections:

  • Colors: Choose new colors for text, links, borders, and the site background. You can also add background images in this section.

  • Typography: Adjust the text on your site by changing the font family, the font size, and the line height; add bold or italics; and more.

  • Sizes and Values: Adjust the width and spacing of elements on your site.

  • Options: Configure template-specific settings, such as page header heights or sidebar position on your blog page.

  • Custom CSS: Add custom CSS code to apply advanced styling. Click the CSS button at the bottom of the Style Editor to open the CSS dialog box and add your custom code.

To see all the sections just mentioned, you need to scroll through the Style Editor list. Style Editor doesn’t display a scrollbar in some browsers, but it does scroll if you use your mouse’s scrolling mechanism or your touchpad device.

Next, you look at how to select site elements that you want to modify.