Edit your site's fonts, colors, and page layout.
Use the options in site styles 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.
Tip: In addition to our guides and video tutorials, we offer two Getting Started with Squarespace webinars. In these sessions, we’ll walk you through template building with Squarespace Blueprint AI, navigating your site, domain and email options, preparing site content, building a homepage, and styling colors and fonts. Webinars typically last one hour, and you don’t need a Squarespace site or account to sign up.
Watch a video
Style options in version 7.1 vs. version 7.0
Style changes work differently depending on your site's version. In the sections below, click the tab for your version to review the steps for your site.
Version 7.1
In our newest version of Squarespace, you use site styles to make the most of your style changes, including font, color, and spacing changes. Changes you make in site styles are usually site-wide, 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 version 7.0, the previous version of Squarespace, each template has its own unique style options and default settings. Each template's site styles has different tweaks, which are grouped into sections like Site header and Main content. To learn more, visit your template's guide.
Find a style tweak
How you find a style tweak depends on your site's version and if you're editing your site on a computer or in the Squarespace app.
To open the Site styles panel, click the paintbrush icon in the top-right corner while editing any page.
From there, you can click Themes to browse preset packs, such as Professional, Bold, and Playful. Selecting one of the packs will change your font, color, and buttons to those in the pack. After selecting a preset pack, you can still edit individual styles by clicking the site element you'd like to change, like Fonts or Colors. Use this guide for more detailed steps on each panel.
To close site styles, double-click the page preview, click the paintbrush icon, or click Close at the top of the panel. Your style changes will remain intact until you save or undo them.
With site styles closed, you can make more fine-tuned changes by editing a specific section. To style a section, hover over the section, then click Edit Section, or the pencil icon. Section styles override site-wide styles.
Here, you can also choose different layouts for auto-layout, 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:
- Open the Pages panel.
- Click 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).
- Click Website in the top-left of the Pages panel, click Design, then click Site styles.
- 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 store page, the same change will apply to all store pages on your site.
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:
For some tweaks, you can click and drag within the preview to adjust the settings:
Style changes are only supported on version 7.1 sites in the app. If your site is on version 7.0, use a computer to make style changes.
Version 7.1 styles in the app
Using site styles, you can apply large-scale style changes to your site with one tap, including font, color, and spacing changes. Changes you make in site styles are usually site-wide, but you can make more fine-tuned changes by styling specific sections or text areas.
To make style changes:
- Tap any page of your site, then tap Preview.
- Tap Edit in the top-left corner.
- Tap the paintbrush icon to open site styles.
- Tap the site area you want to style, such as Fonts or Colors.
- Use the options in the panel to customize that area.
- In Fonts, tap Sans-serif, Serif, or Mixed to review font packs for each type. Tap a font name to change the base size.
- In Colors, choose an Accent, Light, and Dark color for each color theme.
Tip: You can also open site styles from the Settings tab.
To style a section:
- Tap the page you want to edit, then tap Preview.
- Tap Edit, then tap a section you want to style.
- Tap the pencil icon in the section toolbar.
- Tap Format, Background, or Colors, then choose a new style.
- Tap Done, then tap Save Changes.
Fonts and colors
Use the sections below to learn about changing your site's fonts and colors.
Fonts
How you change fonts depends on your site's version.
To change a font, open site styles, then click ＞ next to 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, or 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.
Colors
How you change your site's colors depends on your site's version.
To change your site's colors, open site styles, then click ＞ next to Colors.
With curated color palettes, you can make changes to all your site's colors at the same time, or customize the colors for individual site elements. To learn more about changing site and section colors, visit Changing colors. To review best practices regarding accessibility, visit Creating accessible site content.
To change colors, select any site styles tweak with a color circle next to the label. To learn more, visit Changing colors. To review best practices regarding accessibility, visit Creating accessible site content.
Layout
Use the sections below to learn how to change your site's page layout and spacing.
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. For a list of available features, visit Building a site header.
Footer
How you style your footer depends on your site's version.
To style the footer:
- In the top-left corner, click Edit.
- Hover over the footer and click Edit footer.
- Click the Edit Section or 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.
Spacing and padding
How you change site spacing depends on your site's version.
To change your site's spacing, open the Spacing panel.
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. In gallery sections, the top and bottom padding will also change in relation to the margin width.
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.
Sidebars (version 7.0)
Version 7.1 sites don't include sidebars.
If your template has 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 the sidebar in the page preview, or look for the Sidebar heading in site styles.
Images and animations
Use the sections below to learn how to style image blocks and banners, change image aspect ratios, and apply animations.
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 site styles.
To learn more about image block styles for both versions, visit image blocks.
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 Edit Section or 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.
Most templates support pages banners, which you can add in your page's settings.
- To review all banner options by template family, visit Adding banner images.
- To learn more about your site's specific banner settings, visit your template's guide.
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.
Animations
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.
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.
You can set the background color of your main content area in site styles. Some templates also have options to add a background color to the header, footer, and other space around your content. To learn more, visit Changing colors.
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 in version 7.0.
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.
For detailed steps for all scenarios, visit Styling buttons.
Products
How you style products depends on your site's version.
To style your main store page, open your store section's styles. You can review options to change the section format, background, and colors.
To style products, open your product detail page's site styles. These settings affect the individual product details pages. Note that some of these options only apply to products with multiple images, so some changes might not appear if your product only has one.
To learn more, visit Styling store pages.
The style options for your products depend on your site's template, and if your template uses a classic, advanced, or unique store page.
For a detailed list of product style options, visit Styling store pages.
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, or hiding the header and footer. 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.
Save or undo changes
You can save style changes, undo the previous change, or reset areas of your site to their default styles.
Save changes
After you’ve made any style and content changes, click Save in the top-left corner of the page editor. This change isn't reversible. While you can revert to 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 arrow 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 arrow to redo a change.
Tip: If you're editing site styles on version 7.1, you can close the Site styles panel to edit your page content and still undo or redo your last style change.
- In some panels, click the dot next to the tweak you changed. This reverts the tweak to the last saved change. The dots stay visible until you save changes.
Tip: If you make a style change, then undo it, the Save option won't appear. The Save option only appears if you change a tweak and keep it.
Reset to default styles
You can reset some style options 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 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:
- Visit Style changes FAQ to review answers to common questions.
- Attend a one hour Getting started with Squarespace webinar to learn the basics of setting up your site, including building pages and adjusting site styles.
- Join Squarespace's partner program for professional web designers, Circle, for access to a private Q&A forum where you can ask questions about using custom code.
- Hire an independent designer through Squarespace Marketplace to customize your site's design.
More help with version 7.0
For more help with style changes on version 7.0, watch this video.