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

Avenue supports these page types with template-specific features:

  • 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

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

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

In the Options section of the Style Editor, 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 the Style Editor, 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 the Style Editor 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 the Style Editor. Adjust the transparency and select the color.

Headers and footers

In Avenue, you can have a customized header and footer on each page in addition to the site-wide footer. This can be useful for adding extra content.

When viewing the page, hover over the header or footer and click Edit to open the Header Content or Footer Content Editor. For more information, visit Editing footers.

The site footer supports one column of blocks. How it displays depends on the Layout Style tweak:

  • 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 links only.
  • Layout Style: Center - The site footer matches content width for all pages. Social links display below.

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

Notes: Per-page headers and footers won't appear on Regular and Gallery Pages viewed within an Index Page.
Note: If you add Audio Blocks or Video Blocks to the header on an Index Page, the audio will continue to play when you navigate through the pages in the Index. 

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 the Style Editor.

You can change the style of the icons, or hide them, in the Options section of the Style Editor. 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. 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 the Style Editor.
  • If you've set a Canvas Color in the Colors section of the Style Editor, 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?
26 out of 52 found this helpful
Avenue structure and style