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.

Tips: 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.

Five supports these page types with template-specific features:

  • Blog - The list-style Blog Page stacks posts vertically

And these standard pages:

  • Regular Page - A blank page you can customize with blocks
  • Album - Add music and cover art to your site
  • 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
Tip: If you're new to Squarespace, we suggest you read Understanding the Pages panel and Adding pages to your navigation for an overview of how pages and content work in Squarespace.

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.

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. Any new page you add displays Sidebar 1 by default.

The content for each of the two sidebars will be the same throughout the site. However, on each page, you can customize how many sidebars display and where they’re located.

To add a sidebar or sidebars to a page, open the page settings in the Pages panel by hovering over the page title and clicking the . In the Page Layout drop-down menu, choose the sidebar layout for that page.

  • 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. If the browser width is more than 1152 pixels wide, the sidebars will display next to each other. If the browser width is narrower than 1152 pixels, Sidebar 2 will stack below Sidebar 1. 

Customize each sidebar by hovering over it and clicking Edit. You can then add content using blocks. For detailed instructions, visit Editing sidebars.

Tip: The Sidebar 1 demo content contains a Twitter Block, Summary Block and Form Block. Sidebar 2 contains a Search Block and Summary Block. You can modify or remove any of these blocks.

Use the tweaks in the Sidebar section of the Style Editor to adjust the style, including changing the width of each sidebar, moving them from right to left, and adding your site description to Sidebar 1.

Content in sidebars will populate in search results, even if the sidebars are hidden.

Note: Sidebar content doesn’t transfer when you switch templates. For more information, visit Switching templates.

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.

Note: 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.

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.

  • 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. 

On a smartphone, the navigation displays as a menu ("hamburger") icon in the top left.

  • 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.
Note: You can disable mobile styles in the Advanced panel.

Next step

Learn about Five's Blog Pages.

Was this article helpful?
18 out of 27 found this helpful
Five structure and style