Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Making style changes

Style changes are edits to the look of your site, like fonts, colors, backgrounds, and spacing. You can make and preview style changes in the Site Styles panel. 

Each template's Site Styles has different options called "tweaks." This guide covers how to use Site Styles to perfect your site's design and explains tweaks found in all of our templates. 

We recommend experimenting with Site Styles as you build your site. By testing your template's tweaks, you'll get a grasp of what's possible in your template and reach a design you'll love.

Tip: The Site Styles panel used to be called the Style Editor.

Open Site Styles

In the Home Menu, click Pages. Open a page where you want the changes to apply. This tells Site Styles to show options relevant to the page you're seeing and allows you to preview your changes. (If you're changing a site-wide feature like navigation menus or a footer, open any page.) 

Once on the right page, double-click Pages at the top of the panel to return to the Home Menu. Click Design, and then click Site Styles. The Site Styles panel will open with a list of editable style tweaks.

Tweaks are grouped into sections like General, Site Header, and Main Content. Tweaks unique to your template are usually under Options.

Click any tweak to make changes.

Note: Site editing is disabled when Site Styles is open. To add or remove content, close Site Styles and open the Pages panel.

View page-specific styles

When you preview a page type below in Site Styles, you'll see a section of tweaks specific to the page type. To view these tweaks, first open the page, and then navigate to Site Styles.

  • Cover Page (See the note below)
  • Blog Page
  • Events Page
  • Gallery Page
  • Index Page
  • Products Page

Any changes to these tweaks will apply to all pages of that type across your site. For example, if you have multiple Products Pages and make style changes specific to the Products Page, the same change will apply to all Products Pages. This creates a consistent look for your site.

Some collection items, like blog posts or events, also have item-specific Site Styles tweaks. To make changes, open Site Styles while viewing an individual collection item.

Note: When a Cover Page is open in Site Styles, you'll only see Cover Page tweaks. To learn more, visit Styling a Cover Page.

Find a style tweak

When in Site Styles, click an area of a page to display the style tweaks available for that area and hide the rest. The style highlighter box appears around the element you're clicking. This shortcut is available in most templates and for most areas on your site.

For example, to change the appearance of your navigation menu, click a navigation link in the preview. The style tweaks that control the navigation menu will display in Site Styles, as shown in the example below. The other style tweaks will be hidden.

Return to all options by clicking Show All.

Note: For a full list of your template's tweaks, see our list of "Site Styles tweaks" guides.

styles.png

For some tweaks, you can click and drag within the preview to adjust the settings:

drag-spacers.gif

Common style changes

While each template's Site Styles has dozens of tweaks, there are some common trends between them.

Typography

To change fonts and sizes, use the Typography or Font tweaks. To learn more, visit Changing fonts.

Colors

To change colors, select any tweak with a color circle next to the label. To learn more, visit Changing colors.

Sizes & values

Many style changes are related to size, like padding, spacing, width, and borders. These tweaks may be found under the Sizes & Values heading. Depending on your template, they can also be in other sections. Sizes are usually measured in pixels (px).

To make this style change, hover over a size tweak. Use the slider or enter a number in the field.

Aspect ratio

An image's aspect ratio is its width to height ratio expressed as a number, like 3:4. When you choose an aspect ratio tweak the image will crop to that shape (such as 1:1 Square), usually around the focal point.

If the aspect ratio is set to Auto, images will rearrange to create the best fit on the page. They may display in a different order than how they were uploaded.

Background image

Some templates feature a site-wide or page background image added via Site Styles. To add one, click the Background Image tweak or the corresponding image icon within Site Styles. You can upload your own image or search and add a stock image.

To learn more, visit Adding a background image.

Banner image

Some templates feature a site-wide banner image you can add from Site Styles. Click the Banner Image tweak, Header Image tweak, or the corresponding image icon within Site Styles.

For per-page images, open the page's settings, click the Media tab, and then upload an image.

To learn more, visit Adding a banner image.

Sidebar

If your template includes a sidebar, you can change its appearance in Site Styles. For example, in some templates, you can move the sidebar to the left or right. To find the sidebar style tweaks, click on the sidebar in the page preview or look for the Sidebar heading in Site Styles. 

Here's an example of how sidebar tweaks may look for your template:

Hiding and showing

In some templates, you can hide design features like page titles, social icons, borders, banners, and footers. These tweaks are usually checkmarks found in the Options section.

Undo a style change

You can undo a style change in two different ways:

  1. Click the undo icon at the top of the panel. This cancels the last style change you made. Click it multiple times to cancel more changes, sequentially. You can also click the redo icon to redo a change. 

undo_icon.jpg

  1. Click the dot next to the tweak you changed. This lets you cancel a specific style change, in any order. The dots stay visible until you save changes.

Note: If you make a style change, then undo it, you won’t see a Save option at the top of the panel. The Save option only appears if you change a tweak and keep it.

Save changes

Once you’ve made all changes and like what you see, click Save. The changes will appear on your live site.

Note: This change isn't reversible. While you can revert to the template's default styles, you can't restore previous style changes.

click_save.jpg

Reset to default styles

To start over, you can reset your site's style to the template's defaults. This allows you to revert to the original fonts, colors, and padding on the template.

  1. Scroll to the bottom of Site Styles and click Reset Styles to Defaults.
  2. Review the confirmation message, and click Reset.
  3. After saving Site Styles, your template will reset to its default styles.
Note: After saving Site Styles, this change isn't reversible.                       

Add custom CSS

Site Styles controls your site's CSS without custom code. However, if you're familiar with CSS and you can't find a change you need in Site Styles, you can add CSS in the CSS Editor.

Custom CSS may interfere with your site's functionality, and all custom code falls outside of the scope of Squarespace support.

FAQs

For more help, visit Style changes FAQ.

Explore your template's style

Each template has its own unique style options and default settings. To learn about a template's style, use the list below to visit the guides for your template. Templates are grouped by family.

  • Structure and style guides explain your template's style options and provide example images. They're a great place to go when you're getting started.
  • Site Styles tweaks guides list all available tweaks for your template. They're a good reference when you're trying to remember a tweak's name or what section of Site Styles it's in.
Adirondack Structure and style Site Styles tweaks
Avenue Structure and style Site Styles tweaks

Aviator family

Aubrey, Aviator

Structure and style Site Styles tweaks  

Bedford family

Anya, Bryant, Bedford, Hayden

Structure and style Site Styles tweaks

Brine family

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Structure and style Site Styles tweaks

Farro family

Farro, Haute

Structure and style Site Styles tweaks
Five Structure and style Site Styles tweaks
Flatiron Structure and style Site Styles tweaks
Forte Structure and style Site Styles tweaks
Galapagos Structure and style Site Styles tweaks
Ishimoto  Structure and style Site Styles tweaks
Momentum  Structure and style Site Styles tweaks

Montauk family

Julia, Kent, Montauk, Om

Structure and style Site Styles tweaks
Native  Structure and style Site Styles tweaks

Pacific family

Charlotte, Fulton, Horizon, Naomi, Pacific

Structure and style Site Styles tweaks

Skye family

Foundry, Indigo, Ready, Skye, Tudor 

Structure and style Site Styles tweaks
Supply  Structure and style Site Styles tweaks

Tremont family

Camino, Carson, Henson, Tremont

Structure and style Site Styles tweaks
Wells  Structure and style Site Styles tweaks
Wexley  Structure and style Site Styles tweaks

York family

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York 

Structure and style Site Styles tweaks
Was this article helpful?
49 out of 116 found this helpful