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 and the section they appear under in the Site Styles panel are bold.
Supported pages
Avenue supports these page types:
- Album pages
- Blog pages - List
- Cover pages
- Events pages
- Gallery pages - Slideshow
- Index pages - Grid
- Layout pages
- Store pages - Classic
Header
Visitors use the header at the top to navigate your site. In Avenue, the header has the site title or logo, tagline, and navigation links.
Style the header elements with these Options tweaks:
- Set the position of the site title and tagline 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 tagline 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 the Page borders tweak under Options.
- To hide the line, choose Page borders: none.
- Set the line's color with Page border color under Colors.
Background
In the Colors section of the Site Styles panel:
- 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 tweak under Options. Social icons display on the other side, or below if the content area is centered.
- Style the social icons with the Options tweaks.
- To hide social icons and expand the content area to fit the width of the site-wide footer, check Hide social icons. This tweak only appears if you've added links to the Social links panel.
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.
On the landing page:
- The date and title display above the post content. All other metadata displays below.
- Promoted image, video, and gallery blocks display above the post title for posts with excerpts.
- Excerpts have "Read more" links.
- The full content of individual posts displays under the title for posts without excerpts.
On individual posts:
- Promoted image, video, and gallery blocks display above the post title.
- Navigation for newer and older posts displays above the comments on posts.
Style the blog page with these Blog styles tweaks:
- 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.
Under Blog styles in the Site Styles panel:
- 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 with these Gallery styles tweaks:
- 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 featured 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
- Store pages
Style the index
To style the thumbnails:
- Display your index at the width of the site (full bleed) with the Full width index tweak under Index styles. The width also follows Site width and Canvas padding under 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 create padding between images in Autocolumns, set the Thumbnail padding to 1% or more.
- To display the navigation titles over the thumbnails on hover, instead of beneath the thumbnails, use the Index thumb title position: overlay tweak under Index styles.
Gallery and layout Page special formatting
Tip: The following special formatting won't display on password-protected sub-pages. Learn more in the index pages guide.
Gallery and layout pages opened from an index have special formatting:
- The URL includes a hashtag (#). The special formatting doesn't display if the URL doesn't include the #.
- Clickable thumbnails for the other pages in the index display below the page content, along with Prev / Next links.
- Page headers and footers don't display.
- For gallery pages:
- Images stack vertically.
- Use the Index item layout tweak under Index styles to choose whether page titles and descriptions display to the right, to the left, or centered above gallery images. If you set Index item layout to Auto, the gallery images follow the Layout style tweak under Options.
-
Image titles and descriptions display below images.
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 the Mobile logo size tweak under Sizes & values.
- The header has built-in mobile padding, which isn't affected by the Header padding tweak.
- The background shows the color of the Canvas color tweak under Options. If that's transparent, you'll see the site background color or image.
Troubleshooting Avenue
Here are some common issues with this template. Some of these are bugs or known issues. Although we still support Squarespace version 7.0, fixing bugs or issues is a lower priority for us while we focus on our current platform, version 7.1.
Background image isn't fixed on mobile
Many mobile browsers, including iOS, don't support fixed background images. To achieve a similar effect, experiment with the Size: cover and Size: contain background image style options. Note that background image style settings apply to your site on both mobile and computers.
For more help, visit Troubleshooting cropping issues.
Gallery in an index isn't stacked
Galleries opened from indexes display in stacked view instead of slideshow view. They won't display this special formatting if:
- A visitor goes to the direct URL for the page, rather than opening it through the index page.
- The gallery page has a password or is disabled.
- The visitor removes the # from the URL.
Gallery is stacked instead of a slideshow
Gallery pages display stacked:
- When opened from an index page.
- On browsers narrower than 800 pixels, such as mobile devices.
How do I change page titles on index pages?
To change the text that displays below index thumbnails, edit the navigation titles for those pages.
I don't like the index special formatting
When opened from an index, gallery pages display images or videos in a stacked format, and gallery and layout pages don't show page headers or footers.
To create a different effect, there are two options:
- Option 1 - Create the gallery with a layout page and gallery block, rather than a gallery page. The gallery on this page will always display in the format you've chosen, even when opened from an Index.
- Option 2 - Create an alternative to the Index landing page with a grid gallery block on a layout page. This thumbnail navigation won't open gallery or layout pages with special formatting.
I hear an index page's audio or video clip on a different page
If you add audio or video blocks in the page-specific header of an index page, they display above the thumbnail images. When a visitor plays the file, the audio continues to play even when the visitor clicks the thumbnails to visit the pages within the Index.
This is part of the template’s design. If you don't want audio to play this way, delete the block from the Index and add it to a different page.
Index page thumbnails are in the wrong order
If the Index thumb layout tweak under Index styles is set to Autocolumns, the index page thumbnail images may change position when you resize the page. This happens because the thumbnail images display at their original aspect ratio. As the page gets smaller, the images move based on the available space. To keep thumbnail images in the same order, set Index thumb layout to Basic grid instead.
Index page thumbnails aren't loading
Index thumbnails may not load if the image size is too big. Also, an index page's thumbnails load sequentially. If one thumbnail can't load, the other thumbnails after it also won't load.
If one or more of your thumbnails aren't loading, check the first blank image's size and ensure it's less than 2500 pixels along its longest edge. To change the image size, edit the image using third-party software, then re-upload it.
Index page thumbnails display the wrong color around the image edges
Depending on the image dimensions and your Index style settings, some thumbnail images might not fill the full thumbnail area. When this happens, the thumbnail background color fills the rest of the space.
To fix this:
- Adjust the Thumbnail ratio in site styles to an even number.
- Set the Index thumb background color in site styles to match the Site background color.
Logo is the wrong size on mobile
To set the size of your logo on mobile:
- In the Home menu, click Design, then click Site styles.
- Scroll to the Sizes & values section.
- Click Mobile logo size to set the size.
Page header or footer content disappeared
Page headers and footers are specific to the page. They don't display in indexes in some cases:
- Page headers and footers added to the Index landing page don't display on individual pages within the index. Instead, add page headers to those individual pages.
- Page headers and footers don't display on layout and gallery pages opened from an index. They will appear if those pages are opened from their direct URLs.
When I click an index thumbnail, the page opens but no content displays
This can happen with layout pages when the content is in a page-specific header or footer, rather than part of the main page content. Page headers and footers don't appear on layout or gallery pages when opened from an index.
To resolve this:
- In the Home menu, click Pages.
- Click and drag the page out of your Index.
- Hover over the page content below the site header or above the footer. When the Header content or Footer content annotation appears, click Edit.
- If the content you want to display is in the header or footer, recreate it in the main page area (between the page header and footer). Then delete it from the header or footer.
- In the Pages panel, move the page back into the index.
