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

Watch a video

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 the-gear-icon on your selected font pack.
  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 browse 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.  

Style a specific font

To style your fonts:

  1. In the Home Menu, click Design, then click Fonts.
  2. Click the-gear-icon on your selected font pack.
  3. Click the text type you want to change: Headings, Paragraphs, Buttons, or Meta.
  4. Family will list the font, use the style and various size options to change the style.
  5. Click Save to apply your changes.

Style options include:

  • Weight makes the text thicker or thinner.
  • Line height changes the space between lines of text.
  • Letter spacing changes the space between letters. 
  • Style sets the text to normal, bold, italic, or other options, depending on the font.
  • Text transform applies capitalization to some, all, or none of the text. This tweak only applies to certain fonts.
  • Size makes the text larger or smaller. Each text type features one or more size options. For instance, Headings includes sliders for Heading 1, Heading 2, Heading 3, and Heading 4 formatting in the Size section.

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

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.

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 section's pencil icon.
  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 section's pencil icon.
  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.

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 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 size, alignment, and text.

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:

  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.

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.

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.

Background width

When a section has a background image, switch the Background Width toggle to display the image at Full Bleed or Inset

  • Full Bleed extends the image from one edge of your browser window to the other, spanning the width of your site.
  • Inset indents the image slightly and creates a border around the image.

When the image is set to Inset, you can set the border color:

  1. In the Home Menu, click Design, then click Colors.
  2. Hover over your theme and click the pencil icon.
  3. Click Inset Border in Sitewide, then choose a color. 
  4. Click the Colors arrow at the top to return to the Colors panel, then click Save to save your changes. 

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.

Style the site title

After adding a site title, use these steps to style it:

  1. In the Home Menu, click Design, then click Fonts
  2. Click the-gear-icon on your selected font pack.
  3. Click Advanced
  4. Click Site Title.
  5. Use the Heading style to match your font pack, or select Custom style for additional styling options.
  6. Click Save

Style the logo

Add a logo, then follow these steps to change the size:

  1. Click Edit in the top-left corner of your site preview. 
  2. Hover over the header and click Edit Site Header.
  3. Click Site Title & Logo.
  4. Use the sliders to change the Logo Height and Mobile Logo Max Height
  5. Hover over Done and click Save

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.

Was this article helpful?
65 out of 318 found this helpful