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 the Style Editor.

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 Style Editor. To access tweaks specific to a page, navigate to the Style Editor 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.
  • Regular Page - A blank 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 - Style the gallery 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 the Style Editor 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 the Style Editor 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 the Style Editor.
  • If the site title is on the banner, use the Site Title tweak in the Header section of the Style Editor.
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 the Style Editor 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 the Style Editor 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

By default, icons for the social networks you’ve added in the Connected Accounts panel display in the site header with your site title and navigation.

Use the tweaks in the Social Icons section of the Style Editor 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.

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 the Style Editor. 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 in mobile.
  • Video banners don't display in mobile. Instead, set a mobile fallback image.
  • See our troubleshooting tips for mobile banner and background image cropping issues.
  • Sidebar content displays beneath page content on mobile. 

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

  • If the logo is over your banner (Banner Content: Site Title Logo Tagline), it will display.
  • If the logo is in your 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 in the Advanced panel.

Next step

Learn about Five's Blog Pages.

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