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.
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.
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.
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.
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.
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.
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.
The content appears on certain other areas of your site:
- Sidebar content populates in search results, even if the sidebars are hidden.
- Sidebar 1 content displays on the checkout page.
Note: Sidebar content doesn’t transfer when you switch templates. For more information, visit Switching templates.
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.
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.
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.
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.
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.
Learn about Five's Blog Pages.