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 Using 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?

Colors

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. Click Advanced to style specific elements within that palette and theme, or select a custom color.

Background

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.

Banners

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.

Tips:

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

Buttons

To stye your site's buttons, in the Home Menu, click Design, then Buttons.

Buttons follow your site's global colors and fonts.

Fonts

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.

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, regular, and small paragraph text

Header

Visitors use the header at the top to navigate your site. In version 7.1, the header has the site title or logo, navigation links, shopping cart, and social icons. You can also add a call-to-action button.

To style your header:

  1. In the top-left corner, click Edit.
  2. Hover over the header and click Edit Site Header.
  3. Choose your header's layout, branding, icons, button, and style options.

Tips:

  • If you add a logo, add a site title too. Search engines use the title for search results and browser tabs, unless you add a separate SEO title.
  • Avoid using angle brackets in titles, like this: My <website>. Angle brackets render as code and may make parts of your title invisible or cause other issues.
  • Learn more about site titles and logos.

Footer

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.

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.
Note: It's not currently possible to move sub-pages between Portfolios.

Section styles

To style a section, edit the page, click the section, then click the pencil icon. 

pencil-icon.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, and they both use a masonry layout, any style changes you make, such as aligning the text, affect both sections.

Collection item styles

To style blog posts and product items:

  1. In the Home Menu, click Design.
  2. Click Blog Posts or 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 are built on the same template family. 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.

For a list of version 7.1 templates, visit What's my site version and template family?

Was this article helpful?
5 out of 17 found this helpful
Version 7.1 style and design options