Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Avenue structure and style

This guide will walk you through Avenue’s options for adjusting the look and feel of your site. These options are available in Site Styles.

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 Site Styles. To access tweaks specific to a page, navigate to Site Styles 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 Avenue template supports these page types:

  • Grid Index - Create a grid of thumbnail images that link to pages on your site.
  • Gallery - Style the gallery as a slideshow or grid.
  • 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.
  • Products (Classic) - Sell goods and services with our integrated Commerce features.
  • Cover Page - A unique landing page styled separately from your template.

Site header

In Avenue, the site title or logo, navigation, and tag line display at the top of the page.

In the Options section of Site Styles, choose Layout Style to adjust the site title from left to right or center.

  • If you center the site title, the navigation displays below it.
  • The tag line always displays below the site title.

Other tweaks adjust the style of the header elements: 

  • Site Title tweaks adjust the title's font, color, and hover color.
  • Navigation tweaks adjust the navigation's font, color, hover color, active color, and spacing.
  • Site Subtitle tweaks adjust the tag line's font and color.

Page border

In Avenue, you can separate page content from the header and footer with a line.

In the Options section of Site Styles, click Page Borders to set the border as Thin, Thick, or Dotted. You can also choose None if you don’t want the line to appear.

To set the color of the line, click Page Border Color in the Colors section.

Background

Set the background color for your site in Site Styles by clicking Site Background.

You can also set an image as the background with Site Background Image. Within this setting, you can control the position, size, and repeat settings for the image. For more information about site background images, visit Adding a background image.

To make the color of the main content area of your site different from the background color, choose the Canvas Background tweak in Site Styles. Adjust the transparency and select the color.

Page headers

In Avenue, you can have a customized header on each page in addition to the site-wide header. This is useful for adding extra content, like a Newsletter Block or an introductory statement.

  • Page headers don't appear on Regular and Gallery Pages opened from an Index Page.
  • If you add Audio or Video Blocks to an Index's page header, the audio continues to play as you navigate through its pages.

avenue-page-header.jpg

Footers

A customizable site-wide footer displays on every page and includes social icons. Avenue also supports separate page footers, so you can add unique content to the footer area on any page.

To change the content in any footer, hover over it and click Edit. For more help, visit Editing footers.

Page footers don't appear on Regular and Gallery Pages opened from an Index Page.

The site-wide footer supports one column of blocks. Use the Layout Style tweak to change how it looks:

  • Layout Style: Left or Right - The site footer is split on left and right side for all pages. The left side supports blocks. The right side supports social icons only.
  • Layout Style: Center - The site footer matches the page width. Social icons display below.

The page footer always matches the page width. It supports multiple columns of blocks.

avenue-footers.jpg

Page title and description

In Avenue, some text from Page Settings appears on your site:

Tip: To use different text for search results, add an SEO title and description.

Social icons

Your social icons appear in the footer. They align either right or left depending on which Layout Style you selected in the Options section of Site Styles.

You can change the style of the icons, or hide them, in the Options section of Site Styles. The Social Icon Color tweak in the Colors section changes their color. Social Icon Size in the Sizes & Values section resizes them.

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 will look on different devices.

  • Logos remain visible on mobile. Use the Mobile Logo Size tweak in the Sizes & Values section of Site Styles to set the mobile size.
  • The header has built-in mobile padding, which isn't affected by the Header Padding tweak. 
  • You can adjust how the navigation is justified with the Layout Style tweak in the Options section of Site Styles.
  • If you've set a Canvas Color in the Colors section of Site Styles, this will be the background color of your mobile site.
  • Sidebar content displays below page content on mobile.

On a smartphone, navigation appears at the top of the page in a drop-down menu.

Next step

Create a thumbnail navigation grid with the Index Page.

Was this article helpful?
34 out of 72 found this helpful
Avenue structure and style