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.
Tip: Five's Live Preview page shows real customer sites using this template.
Five supports these page types:
- Album Pages
- Blog Pages - List
- Cover Pages
- Events Pages
- Gallery Pages - Standard
- Layout Pages
- Products Pages - Classic
- Set the header's background color with Navigation Background in 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 tagline
Use Banner Content in the 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.
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.
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 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 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.
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
- 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.
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.
Tip: You can also add text over banners.
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 thumbnails can display in posts with excerpts. To hide the thumbnail, check the Hide Excerpt Thumbnail style tweak.
- Excerpts have "Read More" links. The link follows the Navigation fonts 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 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.
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
- Descriptions don't display on smartphones.
- To use different text for search results, add an SEO title and description.
Add a border around your header, main content area, and footer with Canvas Border Size in Site Wide. Set the color with Lines & Decorations.
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.
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: