Read Me

Five is a clean, professional-looking template that's easy to set up. It is prized by small and mid-sized businesses for its numerous customization options and professional layouts.

Five is a super-flexible template designed to provide you with many customizable settings allowing you the freedom to create lots of different styles & looks for your website layout.


Sizes & Values

Site Width - control the width of the content area for the site, including any sidebar width. 

Canvas Offset - determines the margin above and below the canvas, exposing the site background. 

Canvas Padding - adjust the padding main content area and the sidebars - if present. Also controls the space between the logo and navigation when together.

Canvas Border Size - sets the size of the border wrapping around the outside of the canvas.

Logo Height (Navigation) - limits the height of the site logo when present within the navigation area.

Logo Height (Banner) - limits the height of the site logo when present within the banner area.

Navigation Spacing - controls the amount of padding used on the top and bottom of the navigation area.

Banner Area Height - set the height of the banner area at the top of the canvas.

Page Spacing - controls the amount of spacing used at the top and bottom of pages.

Sidebar 1 Width - set the width of sidebar one (when present).

Sidebar 2 Width - set the width of sidebar two (when present).

Sidebar Text Size - a size relative to the body text, of the text used inside either of the two sidebars.

Social Icon Size - set the size of the (non-social-block) social icons.


Template Options

Canvas Setting - controls whether the site canvas stretches out to the edges of the browser window (full) or snaps to the site width instead. 

Top Navigation Position - positions the main navigation above or below the site banner area. If set to 'None,' the navigation will be shown in sidebar 1 as a simple vertical list.

Top Navigation Alignment - controls the text alignment of the navigation links.

Banner Content - determines the content that is shown within the banner area.

Sidebar Position - sets the display location of the sidebar(s) across all pages.

Footer Alignment - controls the text alignment of the footer text.

Social Icon Style - sets the template specific (non-social icon block) social icons style.

Social Icon Placement - sets the template specific (non-social icon block) social icon position.

Page Thumbnail as Banner - enables a page thumbnail to be used in the header area.

Stretch Page Thumbnail - stretches the page thumbnail out to the edge of the window when enabled.

Site Description in Sidebar - reveals the site description text and site title in sidebar 1.

Underline Sidebar H3 - adds an underline to any H3 element present in either sidebar.

Disable Navigation Border - removes the border from the bottom of the navigation area.

Disable Footer Border - removes the border from the top of the footer area.

Hide Delimiter - turns off the '/' delimiter between navigation links and meta data bits. 


Blog Styles

Article Spacing - adjust the space between posts on the blog list view.

Blog List Display - choose the type of information shown on the blog list view. 

Blog Byline - determine the position of the articles author name when showing a blog post.

Blog Dateline - determine the position of the articles date on a blog post.

Disable Pagination Border - enables a border on the top and bottom of blog pagination.

Hide Excerpt Thumbnail - will hide the excerpt thumbnail on blog list page.

Hide Icons - will hide all the small icons used in blog meta information.

Hide Tags Categories - will hide the tags and categories from view in a blog.


Gallery Styles

Gallery Navigation - determines the type of gallery image navigation is provided on the page.

Gallery Info Overlay - select the type of display used for image title and caption.

Gallery Aspect Ratio - controls the aspect ratio (width:height) for the gallery active slide.

Gallery Arrow Style - determines the style of the arrows used to cycle through the slides.

Gallery Transitions - select the transition styles used to animate between slides being viewed.

Gallery Show Arrows - choose to use arrows for cycling through slides.

Gallery Auto Crop - choose to auto crop slide images to the selected ratio.

Gallery Autoplay - choose to cycle gallery images automatically without user interaction.

Gallery Loop - enable a gallery to cycle through to the first slide after the last slide.

Gallery Autoplay Speed - specify the speed at which the gallery pauses on the active slide.

Gallery Thumbnail Size - control the height of thumbnail images when used for gallery navigation.

Gallery Arrow Background - specify the color that is used for the shape of gallery arrows.

Gallery Arrow Color - specify the color that is used for the arrow itself.

Gallery Circle Color - specify the color that is used for the circle shape gallery arrows.

Gallery Info Background - specify the color used in the background of the image title and caption. 


Product Styles

Product Background Color - sets the color behind the product image.

Product Overlay Color - sets the color of the overlay when product list titles are set to 'overlay.'

Products Per Row - determines the number of products shown per line on the product list.

Product List Titles - controls the position of the product title on the product list.

Product List Alignment - sets the text alignment of the product title on the product list.

Product Item Size - select an image ratio for the product photo on the product list.

Product Image Auto Crop - determines whether product images fill the image area or fit within.

Product Gallery Size - select an image ratio for the product gallery on the product item page.

Product Gallery Auto Crop - determines whether product images fill the gallery area or fit within.

Show Product Price - shows the price on the product list page when enabled.

Show Product Item Nav - shows the 'back to shop' link on the product item page.


Event Styles

Event Time Format - toggle between 24 hour or AM/PM for event times.

Event Icons - enable icons on the address and event time display.

Event Thumbnails - show an image thumbnail in list view.

Event Thumbnail Size - controls the size (ratio width:height) of the event thumbnail image.

Event Date Label - enable date overlay on top of event thumbnail.

Event Date Label Time - include the time of the event with the date overlay.

Event Excerpts - show optional excerpt text of events on the list view when present.

Event List Date - show the full event date (day, month, year) of the event on the list view. 

Event List Time - show the time range (start time-end time) of the event on the list view.

Event List Address - show the event location address when present.

Event iCal/gCal Links - show links to add events to Apple or Google calendars.

Event Like and Share Buttons - show Squarespace simple like and share buttons on events.

Event List Compact View - enable a simple stacked view of events in the list view.

Event Calendar Compact View - enable a simpler calendar view optimized for smaller areas.

 


In Depth Guide

Our Customer Care team has created a very useful guide on Using the Five Template if you'd like a more in-depth look.  

 
 

Banner image by Rotellini Luciano