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: 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 version and template?

Watch a video

Fonts

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

Format text

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

Links

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

Colors

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.

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.

Buttons

To stye your site's buttons, in the Home Menu, click Design, then click Buttons. In some cases, tweaks won't affect every button on your site. For example, to preserve the Newsletter Block layout, the Padding tweak won't affect Newsletter Block buttons.

Buttons follow your site's global colors and fonts.

Button Blocks, and blocks with built-in buttons like Newsletter Blocks, have extra style options:

  1. Click Edit for that page.
  2. Hover over the block and click the pencil icon to change the text and alignment. You can also adjust the size of Button Blocks.

Spacing

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:

  1. In the Home Menu, click Design.
  2. 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. To learn more, visit Styling Products Pages.

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.

To learn more about Image Block styles, visit Image Blocks

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

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.
  5. Add additional block sections below for page content.

Tips:

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

Header

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.

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.

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.

  1. In the Home Menu, click Design, then click the area you want to reset.
  2. Scroll to the bottom of the panel and click Reset Styles to Defaults.
  3. Click Reset to confirm.
  4. Click Save.
Note: After saving, this change isn't reversible.

Section styles

To style a section, edit the page, hover over 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.

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.

Learn more in a webinar

In addition to our guides and video tutorials, we offer a Getting Started with Squarespace 7.1 webinar. In this live session, we’ll walk you through the basics of setting up your site on version 7.1, including building pages and adjusting site styles. Webinars typically last one hour, and you don’t need a Squarespace site or account to sign up.

Was this article helpful?
88 out of 475 found this helpful
Version 7.1 style and design options