Five template

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

Five template

Last updated April 04, 2023 00:38

The style and features of the 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 and the section they appear under in the Site Styles panel are bold.

Supported pages

Five supports these page types:

Header

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

Set the header's background color with the Navigation background tweak under Navigation.

Navigation

Use the Top navigation alignment and Top navigation position tweaks under Navigation to move the navigation links.

Remove the lines between the page links with the Hide delimiter tweak under Site wide.
Use the other Navigation tweaks to style the links.
Folders expand on hover.

If you choose Top navigation position: none, the links move above sidebar 1.

Branding and tagline

Use Banner content tweak under Header to choose where the branding and tagline display.

Page title description - Branding displays next to the navigation links. Tagline doesn't display. If the navigation is in the sidebar, the branding doesn't display.
Site title logo tagline - Branding and tagline display over banners.
Empty - Branding and tagline 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 tagline text with the Site title and Tagline tweaks under Header. If the site title is above or below the banner, use the Site name tweak under 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 store page banner displays.
If there's no page banner, the site-wide banner displays.

Add banners

To add a banner:

Page banner - Add a featured 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 under Header in site styles. 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 the Banner overlay color tweak under Header.

Choose what text displays on all banners with the Banner content tweak under Header:

Site title logo tagline - Displays the site title or logo and tagline.
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 the Header section of site styles):

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 the Site description in sidebar tweak under 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 the Canvas setting tweak under 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 under Main content.
Set the header's background color with Navigation background under 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.

On the landing page:

You can add a page banner in page settings.
Post featured images can display in posts with excerpts. To hide the featured images, check the Hide excerpt thumbnail style tweak.
Excerpts have "Read more" links. The link follows the Navigation font tweak in Navigation, and Body link colors in Main content.
The full content of individual posts displays under the title for posts without excerpts.

On individual posts:

Navigation for previous and next posts appears above the comments.
The same page banner from the blog landing page displays on each post.

Style blog pages

Style blog pages with these Blog tweaks:

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 and individual posts 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 on the landing page, 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.

Footers

The site-wide footer has a customizable content area.

Use the Social icon placement tweak under 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 of site styles.
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 the Header section of site styles 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 the Canvas border size tweak under Site wide. Set the color with Lines & decorations.

Social icons

Use the Social icon placement tweak under 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:

Troubleshooting Five

Here are some common issues with this template. Some of these are bugs or known issues. Although we still support Squarespace version 7.0, fixing bugs or issues is a lower priority for us while we focus on our current platform, version 7.1.

To display a solid color instead of an image for your site-wide banner:

Ensure the Header background image tweak doesn't have an image loaded. (To remove one, click the tweak and then click Remove.)
Set the color with the Header background tweak.

This banner color will display on pages without page banners.

Background image isn't fixed on mobile

Many mobile browsers, including iOS, don't support fixed background images. To achieve a similar effect, experiment with the Size: cover and Size: contain background image style options. Note that background image style settings apply to your site on both mobile and computers.

For more help, visit our troubleshooting cropping tips.

Blog list display options

As well as Five's general style options for blog pages, you can use Blog list display in the Blog section of site styles to choose how much text displays on the landing page:

Full - Full posts display. Featured images display in excerpts.
Header and footer only - Only the title and metadata (comments, likes, shares, etc) display. The date and author display if you've enabled them.
Header only - Only the post title displays. The date and author display if you've enabled them.

Can't add lowercase letters to image block captions

Captions added to image blocks on the Five template will always be capitalized. As Five captions are fairly small by default, this helps make the captions more visible.

Can't change newsletter block header color

In the Five template's site styles, the Heading color tweak in the newsletter block section isn't active. Instead:

In site styles, scroll up to the Main content section.
Use the Heading 2 color tweak to set the color. This affects all Heading 2 text on your site.

Extra content appears on checkout page

Sidebar 1 content appears on your checkout page, even if you've hidden sidebars on your site.

To remove or edit this content, temporarily enable sidebar 1 on any page on your site:

Go to the Pages panel.
Hover over any page and click the to open page settings.
In the Page layout drop-down menu, choose One sidebar.
Click Save.
Hover over the content until the Sidebar one content annotation appears.
Click Edit.
Delete or edit the blocks.

After you've finished, you can go back to page settings and choose Page layout: full width to remove the sidebar.

How do I change the size of the site title on mobile?

On mobile, the site title's size scales relative to your site's body text. To change this:

In the Home menu, click Design, then Site styles.
In the Main content section, change the Body text tweak. This affects all the normal (body) text on your site.

Remove the sidebar or sidebars

Open page settings in the Pages panel by clicking for that page. In the Page layout drop-down menu, choose Full width to hide all sidebars.

To remove the sidebar across your site, make this change for every page on your site.

Sidebar content shows up in search results

Content in your sidebars appears in search results, even if the sidebars are hidden. To remove the content from your site, temporarily enable your sidebars.

To do this without affecting your live site:

Go to the Pages panel.
In the Not linked section, use the + icon to create a new, blank layout page.
Open the page's settings by clicking the .
Use the Page layout drop-down to select Two sidebars.
Click Save.
Use the page editor to delete the content from the sidebars. This affects all sidebars on your site.
Click Save.
Click the to re-open the page settings and delete the page.

Styling site-wide banners

When you add a site-wide banner image in site styles, options for styling it appear. You can style the banner image to repeat, display at the banner height or width, or fill the banner container completely.

We recommend changing the settings in this order:

Size	Choose how your banner fits within the banner area. Options are: Auto - The image retains its original width and height. This is good for smaller images you want to repeat. Cover - Scales the image as large as needed to completely cover its container (full-bleed). As a result, the banner may look different between pages, depending on the length of the page content. Contain - Scales the image so its longest edge fits inside the banner area.
Repeat	Repeat your banner image. This works with the Size: auto and Size: contain settings. Repeating is most effective for patterns and less effective for photographs. No-repeat - Display the image only once. Repeat - Repeat the image in all directions. Repeat-x - Repeat in a row across horizontal axis. Repeat-y - Repeat in a row down the vertical axis.
Position	Set the position of the banner image.
Fix position	When checked, the image's position remains stationary behind scrolling content. When unchecked, it scrolls up and down with the page. This effect won't appear on some mobile devices, including iOS.

Tip: Site-wide banner images have the same style options as background images.

There’s a big blank space above the page content on mobile

This can happen if you remove page banners by setting the Banner area height tweak to 0px in the Header section of site styles. In the mobile view for Five, the banner displays by default. If no banner image is set for the page, it displays as a blank space.

If you want to remove the banner space on mobile as much as possible without using custom code, here’s one method:

Go to the Header section of site styles.
Select Banner content: page title description.
Uncheck Page thumbnail as banner.
Open the Page title and Site tagline tweaks and set the font size to 8px.
Set the Page title color and Site tagline color to transparent.
Set the Header background and Banner overlay color to transparent.
Reduce Banner area spacing to 0px.

Page banner videos

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.

Was this article helpful?

61 out of 115 found this helpful