Five template

Five is a flexible business template with a wide variety of options for styling your site. Five’s special features include a versatile header layout and two customizable sidebars.

This guide covers the features and design options for the Five template. Site Styles tweaks are bold, and link to the list of all Five tweaks to help you navigate the panel.

Tip: Five's Live Preview page shows real customer sites using this template.

Supported pages

Five supports these page types:

Header

You can choose where the navigation links, site title or logo ("branding"), tag line, and built-in social icons header elements display.

Set the header's background color with Navigation Background in Navigation.

Navigation

Use Top Navigation Alignment and Top Navigation Position in Navigation to move the navigation links.

Remove the lines between the page links with Hide Delimiter in Site Wide.
Use the other tweaks in Navigation to style the links.
Folders expand on hover.

If you choose Top Navigation Position: None, the links move above Sidebar 1.

Branding and tag line

Use Banner Content in the Header to choose where the branding and tag line display.

Page Title Description - Branding displays next to the navigation links. Tag line doesn't display. If the navigation is in the sidebar, the branding doesn't display.
Site Title Logo Tagline - Branding and tag line display over banners.
Empty - Branding and tag line don't display.
Separate from these settings, the site title can display in Sidebar 1. This isn't a clickable link.

Style the site title and tag line text with Site Title and Tagline tweaks in Header. If the site title is above or below the banner, use Site Name in Navigation to change the font.

Banners

You can display a full-width banner at the top of each page. Five has:

Page banners - Display on individual pages. Support video.
Site-wide banners - Display on any page that doesn't have a page banner. Don't support video.

There aren't separate banners for individual blog posts, events, or products.

If there's a page banner, the Blog, Events, or Products Page banner displays.
If there's no page banner, the site-wide banner displays.

Add banners

To add a banner:

Page banner - Add a thumbnail image or video URL to the page in Page Settings.
Site-wide banner - Click Header Background Image in the Header section of Site Styles. Style the image with the available tweaks. You can also set a solid color instead of an image.

Keep in mind:

To ensure page banners display, check Page Thumbnail As Banner in Header. If it's unchecked, only the site-wide banner displays.
The shopping cart page always displays the site banner. There is no page banner for this page.
Use the focal point to center page banner images. (Videos and site-wide banners don't have focal points.)

Overlay colors and text

Add a color filter to all banners with Banner Overlay Color in Header.

Choose what text displays on all banners with Banner Content in Header:

Site Title Logo Tagline - Displays the site title or logo and tag line.
Page Title Description - Displays the page title and description.
Empty - Displays the banner with no text.

Use the Site Title, Site Tagline, and Page Title tweaks to style the text.

Change the height

How you set banner heights depends on what content displays on the banner (Banner Content in Header):

Banner Content: Empty - Change the Banner Area Height tweak. This tweak doesn't affect mobile.
Banner Content: Page Title Description - Change the Banner Spacing tweak, or add extra spaces to the page description.
Banner Content: Site Title Logo Tagline - Change the Banner Spacing tweak.

You can hide banners in computer view by choosing Banner Content: Empty and setting the Banner Area Height tweak to 0px. However, this can cause issues on mobile.

Sidebars

Each page on your Five site can display content in up to two sidebars. You can choose the number of sidebars on any page, and customize the sidebars with blocks. The content is the same throughout the site.

To add or remove a sidebar, open Page Settings, click the Advanced tab, and use the Page Layout drop-down menu:

One Sidebar - Display one sidebar on one side of the page.
Split Sidebars - Display two sidebars, one on each side of the page.
Full Width - Hide all sidebars.
Two Sidebars - Display two sidebars on one side of the page.

Use the Sidebar section of Site Styles to style the sidebars and choose which side they display on.

Site title, description, and navigation

To add the site title and site description above Sidebar 1, check Site Description in Sidebar in Sidebar.

Adjust the font style of the site description with the Site Description tweak.
The site title takes on Heading 3 styling. Use the Heading 3 tweaks in the Main Content section to style the font and color.
If you've checked Underline Sidebar h3, the underline appears under the site title as well as any Heading 3 text in the sidebar.
To change or remove the site description, hover over the sidebar area below the site title and click Edit. (Site descriptions aren't available for sites created since November 2018.)

Navigation links can also appear above the sidebar.

More help with sidebars

Keep in mind:

Sidebar content populates in search results, even if the sidebars are hidden.
Sidebar 1 content displays on the checkout page.
Sidebar content doesn’t transfer when you switch templates.
If the browser narrower than 1152 pixels, Sidebar 2 stacks below Sidebar 1.
On mobile devices, sidebars stack below the page content.
Each sidebar starts with demo content to show how it looks with content in it.
Any new page you add displays Sidebar 1 by default.

Background

To change the background and site width:

Use Canvas Setting in Site Wide to choose if the page content expands to the full width of the browser or to the Site Width.
Set the canvas and footer background color with Canvas Color in Main Content.
Set the header's background color with Navigation Background in Navigation.
Set the site background color with Site Background, or add a background image with Site Background Image.

The site background displays on either side of the canvas area. It won't display if the canvas is set to full-width, unless the canvas is transparent.

Page headers

Page headers are a great way to customize the top of individual pages. Hover over the area directly above the main content and click Edit to add text and other content with blocks.

Tip: You can also add text over banners.

Blog Pages

Five's Blog Pages display as a list of vertically-stacked posts. Individual posts have:

Navigation for previous and next posts above the comments.
The same banner and page header as the blog landing page.

Style Blog Pages

Style Blog Pages in Blog:

Metadata displays below the post. Hide the icons for everything except likes and shares with Hide Icons.
Hide tags and categories on the landing page with Hide Tags Categories.
Choose if author names and post dates display above or below posts with Blog Byline and Blog Dateline. Choose Blog Byline: Hidden or Blog Dateline: Hidden to hide them.
To adjust the space between posts, use the Article Spacing tweak.
Use the Pagination tweaks to set the font and colors of the previous and next navigation on blog posts, and add or hide a border above them.
The Blog List Display tweak also affects the landing page's look and feel.

Excerpts

Post thumbnails can display in posts with excerpts.

To hide the thumbnails, check Hide Excerpt Thumbnail.
The Read More link follows the Navigation fonts in Navigation, and Body Link colors in Main Content.

Footers

The site-wide footer has a customizable content area.

Social Icon Placement in Social Icons to choose if built-in social icons display, and style them. The demo content also has a Social Links Block in the footer.
Set the alignment or style the text in the Footer section.
The footer is always centered on mobile.

Five also has page footers, which are unique to individual pages. They match the page width and display directly below the page content.

Page titles and descriptions

Choose Banner Content: Page Title Description in Header to display the page title and description on all banners except Album Pages.

Descriptions don't display on smartphones.
To use different text for search results, add an SEO title and description.

Border

Add a border around your header, main content area, and footer with Canvas Border Size in Site Wide. Set the color with Lines & Decorations.

Social icons

Use Social Icon Placement in Social Icons to choose if social icons display in the header, footer, or both.

Choose Social Icon Placement: Hide to hide them.
Use the other tweaks in Social Icons to style the icons.

Mobile

With Squarespace's built-in responsive design, your site adjusts to look great on any device.

Navigation collapses to a ☰ at the top. If Banner Content is set to Site Title Logo Tagline, it's centered. Otherwise, it displays on the left.
The site title's size scales relative to the Body Text Site Styles tweak.
Sidebar content displays beneath page content.
Only footer social icons display.
You can disable mobile styles, but we don't recommend it.

Banners may look different on mobile:

Page descriptions don't display on smartphones.
For banner and background image cropping issues, see our troubleshooting tips.
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.

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: