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

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.

Troubleshooting

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, click the chosen theme to de-select it. 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. In the Colors tab, note which color theme you've chosen.
  3. In the Home Menu, click Design, then click Colors.
  4. Take note of which color theme your main site is currently using.
  5. Click the color theme for the section you want to edit. The rest of your site will temporarily switch to this theme, but it won't be visible on your live site.
  6. Click Advanced to make any edits.
  7. Go back to the main Colors menu and reselect the theme for your site.
  8. Click Save.

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 and add an overlay color.

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.

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.

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.

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.

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.

The background color depends on how the header's Color is set:

  • Transparent - The header matches the style of the first section on the page. This may change from page to page depending on whether the first section has section styles. 
  • Not transparent - Choose a color theme in the header editor, or de-select all themes to follow the global color styles.
  • Folder drop-down menus match the header's background color.
  • For more help, see our color troubleshooting tips.

Keep in mind:

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

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

Section styles override global styles.

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. Instead, to try out different looks for your site:

  • Update your global styles.
  • Change the layouts in your sections.
  • Add 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.
Was this article helpful?
18 out of 82 found this helpful
Version 7.1 style and design options