Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Aviator template family

The Aviator template family (Aviator, Aubrey, Encore) creates a welcoming first impression. With a beautiful landing page and full-screen background images, these templates are well-suited to local businesses, design firms, creative professionals, and weddings.

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

Tip: The Live Preview pages for Aviator and Aubrey show real customer sites using these templates.
Note: Encore is discontinued.

Supported pages

Aviator supports these page types:

Header

The header displays above the main content area. Navigation links display above it or in a sidebar, depending on your site layout.

The header has the site title or logo. Use Tagline and Contact Info in Options to include a tag line and the Contact Phone Number, Contact Email, and Physical Location from Business Information.

  • Style the tag line with Tagline and Tagline Font.
  • Style the contact information with Contact Info and Contact Info Font.
  • Change the logo size and the header spacing with the Sizes & Values section.
  • Choose the colors in the Colors section. You may need to adjust the opacity.
  • Change the background color with Header/Footer Background in Colors.

aviator-header.png

Layout and navigation

Choose where Main Navigation links display with Info Page Layout in Options. This tweak also affects the Info Page.

  • Offset or Business Card layout - Links display in a sidebar in the top-left corner, and stay fixed on the page as you scroll. Built-in social icons display in the top-right corner.
  • Poster layout - Links display above the header and move up with the page content as you scroll. Built-in social icons display below the footer.
  • In reduced-width browsers, sites always display in Poster layout.
  • The main content area is always centered in the browser.
  • Style the links with Navigation tweaks in Colors and Typography. These tweaks also affect the Info Page.
  • Folders display with a + symbol. Change the sub-pages' background color with Folder Dropdown in Colors.

Border

Use Site Border in Options to add a border around your main content area, header, and footer.

  • Site Border has four thickness options.
  • Change the color with Borders in Colors.
  • Check Site Drop Shadow to add a shadow effect.

aviator-drop-shadow.jpg

Background

In the Colors section:

  • Set the site background color with Site Background, or add a background image with Site Background Image. Info Pages have their own background images.
  • Change the header and footer background with Header/Footer Background.
  • The site background displays behind and around the main content area. Change the transparency of the Content Background to choose how much of the background shows through.

To display background images on mobile, check Mobile Background Image in Mobile Styles. Info Page background images always display. Background images may look different on mobile.

Site width

Adjust the width of the main content area with Site Width in Sizes & Values.

For example, if you choose a width of 80%, the main content area will take up 80% of the width of the browser, leaving a 10% margin on either side.

Social icons

Aviator has built-in social icons.

  • They appear in the top-right or the footer, depending on the site layout.
  • Style or hide them with Social Icon Styles tweaks. These also affect the icons on the Info Page.
  • On hover, they follow the Navigation Hover color in Colors.

Footer

Aviator's footer displays on all pages except the Info Page.

  • Change the background color with Header/Footer Background in Colors.
  • In Poster layout and smaller-width browsers, built-in social icons display below.

Blog Pages

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

  • Dates, author names, and source links display above each post. Other metadata display below.
  • Post thumbnails don't display.
  • Individual posts have navigation for previous and next posts below the comments.
  • To hide the author name, check Hide Author in Blog Styles.
  • Change the space between posts with Blog Post Spacing in Blog Styles.

Promoted Image, Video, and Gallery Blocks display at the width of the main content area in full posts and excerpts.

  • Promoted Blocks never stretch wider than their original dimensions.
  • Excerpts include a Read More link.

Info Pages

In Aviator, the default homepage (landing page) is an Info Page. This special landing page has multiple layout options, and is styled differently from the rest of your site. It has navigation links, built-in social icons, a site description, and a content area.

For more help, visit Aviator Info Pages.

info-page.png

Mobile

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

  • Sites always display in the Poster layout on smaller browsers.
  • To display the background image, check Mobile Background Image in Mobile Styles. For more help, visit our troubleshooting tips.
  • Change the size of mobile logos with Logo Size on Mobile in Mobile Styles. This doesn't affect Info Pages.
  • The navigation overlay color follows Site Background in Colors.
  • You can disable mobile styles, but we don't recommend it.

To display background images on mobile, check Mobile Background Image in Mobile Styles.

aviator-mobile.png

Was this article helpful?
9 out of 23 found this helpful