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

This guide walks you through Five’s options for adjusting the look and feel of your site. These options are available in Site Styles.

This is a supplement to the guide Making style changes, which we suggest you read first if you're new to Squarespace.

Tip: In the Home Menu, click Design, and then click Site Styles. To access tweaks specific to a page, navigate to Site Styles when on that specific page.

Supported pages

Add pages to your site to create your site's underlying structure. Pages can appear as links in your site's navigation.

The Five template supports these page types:

  • Blog - The list-style Blog Page stacks posts vertically.
  • Layout Page - An open page you can customize with blocks.
  • Album -  Create a page with playable music tracks and cover art.
  • Events - Create a calendar or list of events.
  • Gallery (Standard) - Style it as a slideshow or grid.
  • Products (Classic) - Sell goods and services with our integrated Commerce features.
  • Cover Page - A unique landing page styled separately from your template

Site title or logo

In Five, the site title displays by default in the top-left next to the Main Navigation. 

You can replace the site title with a logo.

Select Banner Content: Site Title Logo Tagline in the Header section of Site Styles to move the site title or logo and tag line onto the banner for each page.

Use the Site Title tweaks in the Header section of Site Styles to set the site title's color and hover color. The site title's font settings depend on where the site title displays:

  • If the site title is above or below the banner, use the Site Name tweak in the Navigation section of Site Styles.
  • If the site title is on the banner, use the Site Title tweak in the Header section of Site Styles.
Note: When the site title isn't in the banner, the site title displays next to the Main Navigation. See the next section for tips on changing the Main Navigation's location.
Tip: The site title can also display above Sidebar 1.

Navigation

The Navigation section of Site Styles has tweaks for adjusting the style of the Main Navigation, including color, font, alignment, and spacing. 

  • Use the Top Navigation Alignment tweak to change the position of the navigation (right, center, or left). 
  • Top Navigation Position moves the Main Navigation below or above the banner. If you select Top Navigation Position: None, the navigation links move into the sidebar.

Hide Delimiter in the Site Wide section removes the lines between the page links. Navigation Background sets the color behind the Main Navigation. 

Background and site width

The Site Wide section of Site Styles has tweaks for adjusting the background and width of your site:

  • The Canvas Setting tweak determines whether the page content expands to the full width of the browser or to the width set in Site Width.
  • The Site Background tweaks set the color of the background or replace it with a background image. The background displays on either side of the site content. It won't display when Canvas Setting: Full Width is selected.

Banners

You can display a full-width banner at the top of each page on your Five site. Five supports: 

  • A site-wide banner image or color
  • Per-page banner images or videos

To learn more, visit Five banners.

Sidebars

Each page on your Five site can display content in up to two sidebars. You can adjust the number of sidebars on any page in page settings, and customize the sidebars with blocks

To learn more, visit Five sidebars

Tip: Sidebar content populates in search results, even if the sidebars are hidden.

Social icons

Built-in social icons can display in the site header with your site title and navigation.

Use the tweaks in the Social Icons section of Site Styles to adjust the icon style and to choose whether to display them at the top, bottom, or top and bottom of the site, or hide them altogether.

On mobile, only the bottom icons display.

Tip: The demo content also displays social icons in a Social Links Block in the footer. The Social Links Block has its own styling options. Edit the block to change how they look, or delete the block to remove them.

Page headers

In Five, you can add a customized header on each page directly above the page content. When viewing the page, hover over the header and click Edit to open the Header Content Editor for that page.

Page titles and descriptions

Use the Banner Content: Page Title Description tweak to display the page title and description on the banner for all pages except Album Pages. Descriptions don't display on smartphones.

To learn more, visit Five banners.

Tip: To use different text for search results, add an SEO title and description.

Footers

Customize the site-wide footer at the bottom of the page with blocks. Change the alignment or typography with the tweaks in the Footer section of Site Styles. Any changes you make will affect every page of your site. For more information, visit Editing footers.

In Five, you can add a customized footer on each page in addition to the site-wide footer. When viewing the page, hover over the footer and click Edit to open the Footer Content Editor for that page.

The per-page footer displays directly below the page content.

Mobile

Because Squarespace templates are built with responsive design, your site will adjust on mobile devices to better fit the format of that device. You can use Device View to see how your site looks on different devices.

  • Page descriptions don't display on mobile.
  • Video banners sometimes won't display on mobile, depending on the visitor's connection speed and browser version. Set a mobile fallback image to appear when the video banner can't load.
  • See our troubleshooting tips for mobile banner and background image cropping issues.
  • Sidebar content displays beneath page content on mobile.
  • The site title's size scales relative to the Body Text Site Styles tweak.

Whether a site logo displays on a smartphone depends on where it appears on your site:

  • If the logo is in the banner (Banner Content: Site Title Logo Tagline), it continues to display in the banner.
  • If the logo is in the header or hidden (Banner Content: Page Title Description or Empty), your site title displays instead.

desktop.png

On a smartphone, the navigation displays as a ☰ icon. When you tap the menu icon, your navigation links expand below the site title. The background color is the same as the navigation background color.

Where the menu icon displays on mobile depends on your Banner Content tweak:

  • Banner Content: Site Title Logo Tagline - Displays in the middle.
  • Banner Content: Page Title Description or Empty - Displays on the left.

Note: You can disable mobile styles.

Next step

Learn about Five's Blog Pages.

Was this article helpful?
20 out of 33 found this helpful
Five structure and style