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

Version 7.1 style and design options

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: To see your site's version, log into your site and click Help in the left panel. For more help, visit What's my site's template and version?

Watch a video


Curated options help you make changes to all your site's colors at once. To change your site's colors:

  1. In the Home Menu, click Design, then click Colors.
  2. Use the Palette and Theme options to choose a set of colors and how they display.
  3. Hover over your theme and click the pencil icon to style specific elements within that theme, or select a custom color.


If global styles aren't affecting a specific part of your site, that section probably has section styles, which override global styles.

To set a section back to global styles:

  1. Click Edit, then click the pencil icon for that section.
  2. In the Colors tab, switch the Use Default Theme toggle on. The section will revert to global styles.

To change the section-specific colors:

  1. Click Edit, then click the pencil icon for that section.
  2. Switch the Use Default Theme toggle off and select a theme.
  3. Hover over Done and click Save.
  4. In the Home Menu, click Design, then click Colors.
  5. A label will display on the section showing its theme. Hover over that theme in the Colors panel and click the pencil icon to make changes.
  6. Go back to the main Colors menu and click Save.

For more help with changing colors, watch this video:


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

  1. In the top-left corner, click Edit.
  2. Add a block section and click its pencil icon.
  3. Click Background to add an image or video.
  4. Click Colors to style any overlaying text and add an overlay color.


  • If you just want a banner image, start with a Blank section.
  • The section's blocks 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 stye your site's buttons, in the Home Menu, click Design, then Buttons.

Buttons follow your site's global colors and fonts.

Button Blocks have extra style options:

  1. Click Edit for that page.
  2. Hover over the block and click the pencil icon to change the size and alignment.


To change your site's fonts:

  1. In the Home Menu click Design, then click Fonts.
  2. Choose a font pack.
  3. Set the base size. All other text scales relative to this size.
  4. Click the-gear-icon to style specific text.

Use a specific font

To use a specific Adobe or Google Font, use the Browse all fonts option to search for it.

  1. In the Home Menu, click Design, then click Fonts
  2. Click a font pack, then click its the-gear-icon.
  3. Click the text type you want to change: Headings, Paragraphs, Buttons, or Meta.
  4. Click Family.
  5. Click Browse all fonts.
  6. Scroll to see the available fonts, or enter the font name in the Search fonts field at the top of the panel.
  7. Click Save to apply your changes.  

Format text

Highlight any text and use the toolbar icons to apply formatting.

We automatically create HTML tags in your site's code for each text size:

  • <h1> - Extra large headings
  • <h2> - Large headings
  • <h3> - Medium headings
  • <h4> - Small headings
  • <p> - Large, medium, and small paragraph text


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


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 in version 7.1.


To edit your footer:

  1. In the top-left corner, click Edit.
  2. Hover over the footer and click Edit Footer.
  3. Add content to your footer with sections.

Portfolio Pages

A Portfolio Page creates a stylized landing page that links visitors to sub-pages. This is a great way to showcase multiple galleries, projects, portfolio highlights, and other content in one place.

Keep in mind:

  • Portfolio Pages have a limit of 40 sub-pages. 
  • It's not currently possible to move sub-pages between Portfolios.

To add and set up a Portfolio Page:

  1. In the Home Menu, click Pages, then click +.
  2. Click Portfolio and choose a layout. You can change this later with section styles.
  3. To create clickable images on the landing page, add images to all sub-pages in Portfolio Item Settings.
  4. Add or edit the sub-pages with sections.

Section styles

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.

Product item styles

To style product items:

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

Image Block styles

To style Image Blocks:

  1. In the Home Menu click Design, then click Image Blocks.
  2. Click the block you want to style to find tweaks that apply to that block.

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

Was this article helpful?
40 out of 187 found this helpful