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

This is a list of all Site Styles tweaks for the Five template.

We constantly evolve the Squarespace platform to give you the best possible tools for building your website. If the platform recently changed, you may see different options than the ones listed below. The best way to learn how any tweak works is to experiment with it and see what changes on your site.

Tip: For general help, see the Five template guide.

Site Wide

  • Site Background - Set the site background color. This background is visible when Canvas Setting is set to Site Width.
  • Site Background Image - Replace the site background color with a background image.
  • Site Width
  • Canvas Setting: Full Width, Site Width - Choose if the page content expands to the width of the browser or to the Site Width.
  • Canvas Offset - Choose how much of the site background displays at the top and bottom of your site.
  • Canvas Padding - Change the padding of the main content area, sidebars, and between the logo and navigation.
  • Canvas Border Size - Add a border around your main content area.
  • Lines & Decorations - Set the color for lines and other decoration elements on your site, including the Canvas Border.
  • Hide Delimiter - Remove the / lines between the page links in your navigation.

Header

  • Header Background - This color shows if Page Thumbnail as Banner is unchecked and there is no Header Background Image.
  • Header Background Image - Add a site-wide banner image.
  • Site Title - Adjust the site title font. Appears when Banner Content: Site Title Logo Tagline is selected.
  • Site Title Color  
  • Site Title Hover Color  
  • Page Title - Adjust the page title font.
  • Page Title Color  
  • Site Tagline - Style the fonts for the tag line or page description on banners.
  • Site Tagline Color - Change the color of the tag line or page description on banners.
  • Banner Area Height - Appears when Banner Content: Empty is selected. This tweak doesn’t affect the banner area height on mobile.
  • Banner Area Spacing - Appears when the Banner Content tweak is set to Site Title Logo Tagline or Page Title Description.
  • Logo Height (Banner) - Appears when Banner Content is set to Site Title Logo Tagline.
  • Banner Overlay Color - Add a filter effect over page banners by adding an overlay color with partial opacity.
  • Banner Text Width  
  • Banner Content: Site Title Logo Tagline, Page Title Description, Empty - Choose what displays on banners.
  • Banner Alignment: Left, Center, Right - Align the text on banners.
  • Page Thumbnail as Banner  
  • Stretch Page Thumbnail  

Navigation

Style the Main Navigation links.

  • Navigation Background - Change the background color behind the Main Navigation.
  • Site Name - Adjust the site title’s font style. Appears when Page Title Description or Empty is selected in the Banner Content tweak in the Header section.
  • Navigation - Style the navigation font. Also affects excerpt links.
  • Navigation Link Color  
  • Navigation Link Hover Color  
  • Navigation Active Link Color  
  • Navigation Spacing - Change the padding at the top and bottom of the Main Navigation area.
  • Logo Height (Navigation) - Change the height of the logo when it’s displaying with the navigation. Appears when Page Title Description or Empty is selected in the Banner Content tweak in the Header section.
  • Top Navigation Position: Above Banner, Below Banner, None - Change the layout of the site header.
  • Top Navigation Alignment: Left, Center, Right
  • Disable Navigation Border - Appears when Top Navigation Position: Below Banner is selected. The border's color follows the Lines & Decorations tweak in the Site Wide section.

Main Content

  • Canvas Background - Change the background color of the main content area.
  • Canvas Background Image  
  • Heading 1 - Includes event, album, and blog post titles.
  • Heading 1 Color  
  • Heading 2  
  • Heading 2 Color  
  • Heading 3 - Includes sidebar titles.
  • Heading 3 Color  
  • Body Text  
  • Body Text Color 
  • Body Link Color - Change the color of links in the body text. Also affects excerpt links. 
  • Body Link Hover Color - Change the hover color of links in the body text. Also affects excerpt links. 
  • Blockquote  
  • Page Spacing - Adjust the space at the top and bottom of pages.

Sidebar

Adjust the site-wide style of your sidebars. You must be on a page with at least one sidebar to see most of these tweaks.

  • Sidebar 1 Width  
  • Sidebar 2 Width  
  • Sidebar Text Size - Affects the Heading 3 sidebar title font.
  • Sidebar Position: Right, Left - Set the display location of the sidebar or sidebars across all pages.
  • Underline Sidebar h3 - Add an underline to the sidebar's site title and Heading 3 text.
  • Site Description in Sidebar 
  • Site Description - Style the font of the site description. Appears when Site Description in Sidebar is checked.
  • Site Description Color - Appears when Site Description in Sidebar is checked.

Footer

Style the site-wide footer.

  • Footer Text  
  • Footer Alignment: Left, Center, Right
  • Disable Footer Border  

Social Icons

Style and move the social icons in the header and/or footer.

  • Social Icon Size  
  • Social Icon Color  
  • Social Icon Style: Normal, Square, Round
  • Social Icon Placement: Top Bottom, Top Only, Bottom Only, Hide

The Social Links Block in the footer has its own styling options.

Blog

Change the settings for Five Blog Pages

Pagination tweaks affect the navigation below each blog post. Meta Text tweaks affect metadata such as date and author.

  • Meta Text  
  • Meta Text Color  
  • Article Spacing  
  • Blog List Display: Full, Header and Footer Only, Header Only
  • Blog Byline: Top, Bottom, Hidden - Move or hide author names.
  • Blog Dateline: Above Title, Top, Bottom, Hidden - Move or hide the post date.
  • Blog Pagination - Adjust the font style of the navigation below each blog post.
  • Pagination Link Color  
  • Pagination Link Hover Color  
  • Pagination Active Link Color  
  • Disable Pagination Border  
  • Hide Excerpt Thumbnail  
  • Hide Icons  
  • Hide Tags Categories  

Products

These tweaks appear on Classic Products Pages.

Products

  • Show Category Navigation
  • Product Background Color
  • Product Overlay Color
  • Products Per Row
  • Product List Titles: Under, Overlay
  • Product List Alignment: Center, Left
  • Product Item Size
  • Product Image Auto Crop
  • Product Gallery Size
  • Product Gallery Auto Crop
  • Show Product Price
  • Show Product Item Nav
  • Product Social Sharing

Products: Related Products

  • Items Per Row
  • Item Spacing
  • Image Aspect Ratio
  • Details Alignment
  • Item Title Spacing

Gallery Styles

These tweaks appear on standard Gallery Pages.

  • Gallery Design - Set the layout.
  • Aspect Ratio
  • Grid Spacing
  • Min Column Width
  • Lightbox Style: Dark, Light
  • Gallery Navigation: Thumbnails, Bullets, Numbers, Circles, Simple, None
  • Gallery Info Overlay: Always Show, Show on Hover, Hide
  • Gallery Aspect Ratio
  • Gallery Arrow Style: Round Corners, Rectangular, Circular, No Background
  • Gallery Transitions: Fade, Scroll
  • Gallery Show Arrows
  • Gallery Auto Crop
  • Gallery Autoplay
  • Gallery Loop
  • Gallery Autoplay Speed (sec)
  • Gallery Thumbnail Size
  • Gallery Arrow Background
  • Gallery Arrow Color
  • Gallery Circle Color
  • Gallery Info Background

Events

These tweaks appear on Events Pages.

  • Disable Item Pages
  • Show past Events  
  • Show Thumbnails
  • Thumbnail Size
  • Show Date Tag
  • Show Date Tag w/ Time  
  • Show Categories  
  • Show Date  
  • Show Time  
  • Show Location  
  • Show Export Links
  • Show Social Buttons  
  • Show Excerpt
  • Show Button  
  • Show Back Link
  • 24-Hour Time  
  • Stacked View

Album Options

These tweaks appear on Album Pages.

  • Album Text Color  
  • Hide Album Share Link  

Cover Pages

Cover Pages are styled independently of a site’s template. Visit Styling a Cover Page to learn more.

Block tweaks

Tweaks for certain blocks also display in Site Styles. To learn about the style options, visit About blocks and click the name of the block you want to learn more about.

Was this article helpful?
6 out of 12 found this helpful
Five Site Styles tweaks