Use Squarespace version 7.1's global style options to make large-scale style changes to your site. This creates a consistent look to help you maintain a unified brand. You can also style individual sections, and use portfolio pages to create landing pages that link to your content.
This guide covers the design and style options for version 7.1. To add content to your site, visit Page sections.
Tip: This guide is for version 7.1. For sites on version 7.0, visit Making style changes. If you're not sure what version your site is on, visit What's my site's template and version?
Watch a video
To open the Fonts panel, 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 about choosing and styling fonts, visit Changing fonts.
Highlight any text on the page and use the toolbar icons to apply formatting. You can select from these text formats:
- Heading 1
- Heading 2
- Heading 3
- Heading 4
- Paragraph 1
- Paragraph 2
- Paragraph 3
- 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 style 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 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.
To stye your site's buttons, in the Home Menu, click Design, then click Buttons.
- Set the background color in the Colors panel by clicking the pencil icon on your theme.
- You can change an individual button's colors by changing the color theme for the section it's in.
Button Blocks, and blocks with built-in buttons like Newsletter Blocks, have extra style options:
- Click Edit for that page.
- Hover over the block and click the pencil icon to change the size, alignment, and text.
To style your site's spacing, in the Home Menu, click Design, then click Spacing.
You can edit these tweaks:
- 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 effect 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 using section styles.
Product item styles
To style product items, open a product details page and click Edit design in the top-left corner.
You can also access the style options in the design panel:
- In the Home Menu, click Design.
- Click Product Items.
These settings affect the individual product details pages. Keep in mind, some of these options only apply to products with multiple images, so you may not see changes if your product only has one.
Image Block styles
To style Image Blocks:
- In the Home Menu, click Design, then click Image Blocks.
- Click the block you want to style to find tweaks that apply to that block.
To learn more about Image Block styles, visit Image Blocks.
To change the background:
- Use the Colors panel to change the site background.
- Use section styles 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.
To create a banner:
- In the top-left corner, click Edit.
- Add a block section and click its pencil icon.
- Click Background to add an image or video.
- Click Colors to style any overlaying text and add an overlay color.
- Add additional block sections below for page content.
- If you just want a banner image, 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.
Visitors use the header at the top to navigate your site. In version 7.1, the header has the site title or logo and navigation links. You can add a shopping cart icon, social icons, and a call-to-action button.
To learn more, visit Building a site header.
Style the site title
After adding a site title, use these steps to style it:
- In the Home Menu, click Design, then click Fonts.
- Click on your selected font pack.
- Click Advanced.
- Click Site Title.
- Use the Heading style to match your font pack, or select Custom style for additional styling options.
- Click Save.
Style the logo
Add a logo, then follow these steps to change the size:
- Click Edit in the top-left corner of your site preview.
- Hover over the header and click Edit Site Header.
- Click Site Title & Logo.
- Use the sliders to change the Logo Height and Mobile Logo Max Height.
- Hover over Done and click Save.
To edit your footer:
- In the top-left corner, click Edit.
- Hover over the footer and click Edit Footer.
- Add content to your footer with sections.
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.
- In the Home Menu, click Design, then click the area you want to reset.
- Scroll to the bottom of the panel and click Reset Styles to Defaults.
- Click Reset to confirm.
- Click Save.
Note: After saving, this change isn't reversible.
To style a section, edit the page, hover over the section, then click the pencil icon.
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, and they both use a masonry layout, any style changes you make, such as aligning the text, affect both sections.
Section styles override global styles.
Templates in version 7.1
All sites in version 7.1 share the same template. That means:
- They all have the same style options and features.
- They 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, to try out different looks for your site:
- Change your global styles.
- Add new pages with different pre-built page layouts.
- Create new sections to change a page's feel. For example, add a section with a background image at the top to create a page banner.
To learn more, visit Squarespace version 7.1 vs. Squarespace version 7.0.