Avenue's adaptive grid-based Index is a great way to organize multiple galleries or projects, and is particularly well-suited for photography and design portfolios. Use its customizable headers and footers to add page-specific content to every page.

This guide covers the features and design options for the Avenue template. Site Styles tweaks are bold, and link to the list of all Avenue tweaks to help you navigate the panel.

Tip: Avenue's Live Preview page shows real customer sites using this template.

Supported pages

Avenue supports these page types:

• Album Pages
• Blog Pages - List
• Cover Pages
• Events Pages
• Gallery Pages - Slideshow
• Index Pages - Grid
• Layout Pages
• Products Pages - Classic

Header

Visitors use the header at the top to navigate your site. In Avenue, the header has the site title or logo, tag line, and navigation links.

Style the header elements in Options:

• Set the position of the site title and tag line with Layout Style. If centered, the navigation displays below it. If set to left or right, the navigation displays on the other side.
• Style the tag line with Site Subtitle tweaks.

Page headers

Page headers are a great way to customize the top of individual pages. Hover over the area directly above the main content and click Edit to add content with blocks.

• Page headers don't appear on Layout and Gallery Pages opened from an Index.
• Collection items (like blog posts) and Cover Pages don't have page headers.

Border

Style the line separating the page content from the header and footer with Page Borders in Options.

• To hide the line, choose Page Borders: None.
• Set the line's color with Page Border Color in Colors.

Background

In the Colors section:

• Set the site background color with Site Background, or add a background image with Site Background Image.
• Give the the main content area a different background color with Canvas Background. You may want to change the transparency.

Footers

The site-wide footer has a customizable content area and built-in social icons.

• Site-wide footers support one column of blocks.
• The content area follows the Layout Style in Options. Social icons display on the other side, or below if the content area is centered.
• Style the social icons in Options. To hide them, check Hide Social Icons.

Avenue also has page footers, which are unique to individual pages.

• Page footers don't appear on Layout and Gallery Pages opened from an Index.
• They match the page width.
• They support multiple columns of blocks.

In footers and page footers, text links are underlined.

Blog Pages

Avenue Blog Pages display as a list of vertically-stacked posts.

• The date and title display above the post content. All other metadata displays below.
• Author names don't display.
• Promoted Image, Video, and Gallery Blocks display above the post title for full posts and excerpts.
• Excerpts have Read More links.
• Navigation for newer and older posts displays above the comments on posts.

Style the Blog Page in Blog Styles:

• Change the space between posts with Blog Post Spacing.
• Set the color of the metadata with Blog Meta Color.

Sidebar

A sidebar displays on blog landing pages and posts. Customize it with blocks. If you have multiple blogs on your site, the same sidebar displays on all of them.

In Blog Styles:

• Set the position with Blog Sidebar.
• To hide it, choose Blog Sidebar: Hidden.
• Set its size with Sidebar Width.

Gallery Pages

Avenue Gallery Pages display images and videos in a slideshow format. Navigation thumbnails, text, or bullets can display below.

Style the slideshow in Gallery Styles:

• Style the navigation as arrows or icons with Gallery Page Controls. Choose Gallery Page Controls: Hidden to hide them.
• Set the gallery to automatically scroll horizontally with Gallery Play Speed.

Keep in mind:

• Customize deeplink URLs to send visitors directly to any image in a gallery.
• Galleries don't support clickthrough URLs or a lightbox.
• Galleries look different when opened from an Index.
• Image titles and descriptions only display on galleries that are opened from an Index.
• Images stack in browsers 800 pixels or narrower.
• To create a different layout, use a Layout Page with a Gallery Block.

Index Pages

Avenue Index Pages create thumbnail grids that visitors can use to explore different pages.

• The navigation grid displays page thumbnail images.
• Navigation titles display below the thumbnails.
• On mobile, Index Pages display two thumbnails per row.

Supported pages

You can add the following pages to an Index:

• Album Pages
• Blog Pages
• Event Pages
• Gallery Pages
• Layout Pages
• Products Pages

Style the Index

To style the thumbnails:

• Display your Index at the width of the site (full bleed) with Full Width Index in Index Styles. The width also follows Site Width and Canvas Padding in Sizes & Values.
• Reduce the Thumbnail Padding to 0% to have the thumbnails touch.
• For Canvas Padding, type 0px in the field to remove the side padding altogether.
• Choose Index Thumb Layout: Autocolumns to create a mosaic effect based on the thumbnails' original aspect ratios.
• To display the navigation titles over the thumbnails on hover, instead of beneath the thumbnails, use Index Thumb Title Position: Overlay in Index Styles.
• See a full list of style options.

Gallery and Layout Pages in Indexes

Gallery and Layout Pages opened from an Index have special formatting:

• Clickable thumbnails for the other pages in the Index display below the page content, along with navigation elements.
• Page headers and footers don't display.
• The URL includes a hashtag (#). The special formatting doesn't display if the URL doesn't include the #.

For Gallery Pages:

• Images stack vertically.
• Page titles and descriptions display on the left.
• Image titles and descriptions display below images.

More help with Indexes

• See our troubleshooting tips for more help.

Page titles and descriptions

Some text from Page Settings appears on your site.

• The Gallery Page's page title and description display on the page when it's opened from an Index.
• Navigation titles appear below the thumbnails on Index landing pages.

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

Sidebar

Avenue has a sidebar on Blog Pages and posts.

Social icons

The footer has built-in social icons.

Mobile

With Squarespace's built-in responsive design, your site adjusts to look great on any device.

• Navigation collapses to a Menu link at the top.
• Set the size of your logo on mobile with Mobile Logo Size in Sizes & Values.
• The header has built-in mobile padding, which isn't affected by the Header Padding tweak.
• The background shows the Canvas Color in Options. If that's transparent, you'll see the site background color or image.