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

Making style changes

Use the options in the Design panel to make style changes to your site. You can edit global styles to make changes that apply to your whole site for a consistent look, or you can style individual sections.

This guide reviews how to use style options, called "tweaks," to change the look of your site. We recommend experimenting with the different design options as you build your site. By testing different fonts, colors, and page settings, you'll get a grasp of what's possible and create a design you'll love.

Watch a video

This video is for version 7.1. For a version 7.0 video, see the More help section.

Style options in version 7.1 vs. version 7.0

Style changes work differently depending on your site's version. As you use this guide, click the tab for your version to see the steps for your site.

Version 7.1

In our newest version of Squarespace, style tweaks are sorted by type in the Design panel. Changes you make in the Design panel are usually global, but you can make more fine-tuned changes by styling specific sections or text areas.

All sites in version 7.1 share the same template. That means they all have the same style options and features. They also all use sections to add content to pages.

There isn't a need to switch templates, so that option isn't available in version 7.1. Instead, use the steps in this guide to try out different looks for your site.

Version 7.0

In our previous version of Squarespace, you use the Site Styles panel to make all style changes. Each template's Site Styles has different tweaks, which are grouped into sections like Site Header and Main Content.

In version 7.0, each template has its own unique style options and default settings. To learn more, visit your template's guide.

Find a style tweak

How you find a style tweak depends on your site's version.

To make site-wide changes, use the options in the Design panel. From the Home Menu, click Design, then click the site element you'd like to change, like Fonts or Colors. Use this guide for more detailed steps on each panel. 

You can make more fine-tuned changes by editing a specific section. To style a section, edit the page, hover over the section, then click the pencil icon. Section styles override site-wide styles.

edit_a_section.png

Here, you can also choose different layouts for collection and gallery sections.

If you make style changes to a collection section, it affects all layouts of that type. For example, if you have two blog sections that both use a masonry layout, any style changes you make to one section affect both sections. 

To open Site Styles:

  1. In the Home Menu, click Pages
  2. Open the page you want to style. For site-wide features like footers, open any page. For collection items, open any collection item of that type (like a blog post or product item). 
  3. Return to the Home Menu, click Design, then click Site Styles
  4. In the Site Styles panel, click any tweak to make changes. 

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

Site Styles shows options for the page you're on. Any changes to these tweaks will apply to all pages of that type across your site. For example, if you make style changes to a Products Page, the same change will apply to all Products Pages on your site. For a full list of your template's tweaks, see your template's style tweaks guide.

Tip: Each Cover Page is styled separately.

Click an area of a page in the preview panel to display the style tweaks available for that area and hide the rest. The style highlighter box appears around the element you're clicking. Return to all options by clicking Show All. This shortcut is available in most templates and for most areas on your site. 

Here's how that might look on the Brine template: 

Clicking_an_element_on_the_page_displays_the_style_tweaks_available_for_that_area.png

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

drag-spacers.gif

You can make style changes in the Squarespace App on both versions of Squarespace. 

Tip: On version 7.1, the Squarespace App style panel is labeled Site Styles and Style Editor, but the options still match what you see in the Design panel on a computer. 

To style a page:

  1. Tap Pages, then tap the page where you want the changes to apply. This tells the app to show options relevant to the page you're seeing and display a preview of your changes. If you're changing a site-wide feature like navigation menus or a footer, open any page.
  2. Tap the preview bar to collapse the page preview.
  3. Tap Settings, then tap Site Styles
  4. The Style Editor panel will open from the bottom with a list of sub-panels and style tweaks. Tap any tweak to make changes.

Change fonts

How you change fonts depends on your site's version

To change a font, click Design, then click Fonts.

In the Fonts panel, you can choose a font pack to apply to all text on your site, or change the font of specific types of text. To learn more, visit Changing fonts

In any text area, you can also change the text format to a heading, paragraph text, monospace text, or add a link

  • Links are always underlined.
  • When visitors click a link, a dotted line appears around it, which helps make your site more accessible to all visitors.

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

Change colors

How you change your site's colors depends on your site's version.

To change your site's colors, in the Home Menu, click Design, then click Colors.

With curated color palettes, you can make changes to all your site's colors at once, or customize the colors for individual site elements. To learn more about changing site and section colors, visit Changing colors.

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

Add animations (version 7.1)

Site-wide animations are only available on version 7.1. If your site is on version 7.0, you can add animations to Image Blocks and Quote Blocks.

To add visual interest, you can use the Animations panel to subtly animate your content as visitors move through your site. To learn more, visit Site-wide animations.

Style buttons

How you style buttons depends on your site's version, and if the button appears site-wide or only on a particular page or section.  

To see detailed steps for all scenarios, visit Styling buttons.

Change spacing and padding

How you change site spacing depends on your site's version

To change your site's spacing, in the Home Menu, click Design, then click Spacing.

These tweaks change the spacing on all pages of your site:

  • Page Width (Max) - Change the maximum possible width of your site's pages. Actual width depends on your browser and device. This tweak doesn't affect spacing on your site's header.
  • Site Margin - Change the margin width on either side of your site. Depending on your Page Width setting, this tweak may not have a visible effect on your page content. This tweak affects your entire site, including the header.

You can change the spacing of individual sections in the section editor.

Many style tweaks related to size — like padding, spacing, width, and borders — are under the Sizes & Values heading. Depending on your template, they can also be in other sections. 

To change a size, hover over a size tweak, then use the slider or enter a number in the field.

Change an image's 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.

  • On version 7.1, you can change image aspect ratios in section and block editors. 
  • On version 7.0, you can change image aspect ratios in Site Styles and block editors.
  • On both versions, you can use the built-in Image Editor to change the aspect ratio of an image after uploading it to your site.

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. For more help, visit Understanding aspect ratios.

Style product items

How you style product items depends on your site's version

To style product items, open the style options in the Design panel:

  1. In the Home Menu, click Design.
  2. Click Product Items.

These settings affect the individual product details pages. Note that some of these options only apply to products with multiple images, so you may not see changes if your product only has one. To learn more, visit Styling Products Pages.

The style opinions for your products depend on your site's template, and if your template uses a Classic, Advanced, or Unique Products Page.

For a detailed list of product style options, visit Styling Products Pages. You can also see all product tweaks in your template's style tweaks guide

Style Image Blocks

How you style Image Blocks depends on your site's version. Some block layouts have their own style settings for fonts, colors, and buttons in the Design panel.

To learn more about Image Block styles for both versions, visit Image Blocks

Edit the background

How you change your site background depends on your site's version

To change the background:

  • Use the Colors panel to change the site background.
  • Use the section editor to change the background color of individual sections or add background images or videos. This includes footer sections.
  • When a section has a background image set to Inset, you can set the inset border color.
  • The header has the same background color as the top section when transparent. Turn off transparency in the header editor to set a different color theme for the header.

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 site-wide background images.

Style banners

How you edit banners depends on your site's version.

You can create a banner image on any page by adding a block section with a background image to the top of the page.

  • If you only want an image in your banner, start with a Blank section.
  • Any blocks added to the section will overlay the banner.
  • To change the height, click the pencil icon and set the section height.
  • When choosing a background image, follow our image formatting tips.

To learn more, visit Adding banner images.

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 banner images.

Style the header

Visitors use the header at the top to navigate your site. How you edit the header depends on your site's version

To edit your site's header, click Edit in the top-left corner of your site preview, then hover over the header and click Edit Site Header. Use the options in the editor to customize your site title or logo and navigation links. You can also add a shopping cart icon, social icons, and a call-to-action button. 

For more detailed steps, visit Building a site header.

Your site's header style depends on your template. Learn more about your specific header settings in your template's guide

Some templates have special features in the header. To see a list of available features, visit Building a site header

Style the footer

How you style your footer depends on your site's version.

To style the footer:

  1. In the top-left corner, click Edit.
  2. Hover over the footer and click Edit Footer.
  3. Click the pencil icon to make style changes.

To learn more, visit Editing footers.

Your site's footer style depends on your template. Learn more about your specific footer settings in your template's guide.

To learn more about different footer options by template, visit Editing footers.

Edit a sidebar (version 7.0)

Version 7.1 sites don't include sidebars.

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.

Hide or show features

How you hide or show different site elements and features depends on your site's version.

You can hide certain design features like social icons, banners, and footers by deleting the block or section. Open the section editor to explore the different options for that section of the page. 

In some templates, you can hide design features like page titles, social icons, borders, banners, and footers. These tweaks are usually found in the Options section of Site Styles. To see a list of these options, visit your template's style tweaks guide

Save or undo changes

You can save style changes, undo the previous change, or reset your entire site to its default styles.

Save changes

After you’ve made all changes and like what you see, click Save in the top left corner. The changes will appear on your live site.

This change isn't reversible. While you can revert to your site's default styles, you can't restore previous style changes after saving.

Undo changes

You can undo most style changes in two different ways:

  • 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.

theme_-_undo_and_redo.png

  • In some panels, click the dot next to the tweak you changed. This cancels a specific style change, in any order. The dots stay visible until you save changes.

style_dot.png

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.

Reset to default styles

For some style options in the Design panel, you can reset the style to the site's defaults. This reverts the area to the original way it was set when you first started your site. After saving, this change isn't reversible.

For detailed steps, visit Starting over

Add custom CSS

All Squarespace sites automatically control 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.

More help

In addition to our guides, we offer other resources to help you change your site's style:

More help with version 7.0

For more help with style changes on version 7.0, watch this video.

Was this article helpful?
66 out of 197 found this helpful