The style and features of the Aviator template.

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 and the section they appear under in the Site Styles panel are bold.

Note: Encore is discontinued.

Supported pages

Aviator supports these page types:

• Album pages
• Blog pages - List
• Cover pages
• Events pages
• Gallery pages - Standard
• Info pages
• Layout pages
• Store pages - Classic

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 the Tagline and contact info style tweak under Options to include a tagline and the Contact phone number, Contact email, and Physical location from Business information.

• Style the tagline 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 style tweaks under Sizes & values.
• Choose the colors in the Colors section of site styles. You may need to adjust the opacity.
• Change the background color with the Header/footer background tweak under Colors.

Layout and navigation

Choose where main navigation links display with the Info page layout tweak under 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 the Navigation tweaks under Colors and Typography. These tweaks also affect the info page.
• Dropdowns display with a + symbol. Change the sub-pages' background color with the Folder dropdown tweak under Colors.

Border

Use the Site border style tweak under Options to add a border around your main content area, header, and footer.

• Site border has four thickness options.
• Change the color with the Borders tweak under Colors.
• Check Site drop shadow to add a shadow effect.

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. 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 the Mobile background image tweak under 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 the Site width tweak under 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 color of the Navigation hover tweak under Colors.

Footer

Aviator's footer displays on all pages except the info page.

• Change the background color with the Header/footer background tweak under 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.

On the landing page:

• Dates, author names, and source links display above each post.
• Promoted image, video, and gallery blocks display above the post title for posts with excerpts.
• Excerpts display a "Read more" link.
• The full content of individual posts displays under the title for posts without excerpts.
• Change the space between posts with the Blog post spacing tweak under Blog styles.

On individual posts:

• Navigation for previous and next posts display below the comments.
• Publish date, author name, and source links display below the post title. Other metadata displays below the post's content. To hide the author name, check the Hide author site styles tweak under Blog styles.
• Promoted image, video, and gallery blocks display at the width of the main content area. Promoted blocks never stretch wider than their original dimensions.

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.

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 the Mobile styles section of site styles. For more help, see our troubleshooting tips.
• Change the size of mobile logos with the Logo size on mobile tweak under Mobile styles. This doesn't affect info pages.
• The navigation overlay color follows Site background in the Colors section.
• You can disable mobile styles, but we don't recommend it.

To display background images on mobile, check Mobile background image in the Mobile styles section of site styles.

• Info page background images always display on mobile.
• For help with cropping or distortion issues, visit Troubleshooting cropping issues.

Troubleshooting Aviator

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. You can move your version 7.0 site to version 7.1 using our update tool.

Background image isn't displaying on mobile

Check Mobile background image in the Mobile styles section of site styles. Your background image will now display on mobile devices.

On mobile, the header, content background, and footer colors cover the background image on all pages except the info page. Set any of their tweaks to transparent in the Colors section to reveal the image background behind the content.

Tip: This also affects your site on computers.

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.

How to I recreate the registry page?

The registry links in the Aubrey demo content use a layout page and a grid gallery block, which has images with clickthrough URLs.

How to I recreate the RSVP page?

The RSVP form in the Aubrey demo content uses a layout page and a form block.

How do I recreate the tour page?

The tour page in the Encore demo content uses a layout page and a Bandsintown block.

Info page content is pushed down on the page

If the content area is taller than the browser window, it automatically shifts to a lower relative position so that the info page is able to scroll. On smaller screens and browser windows, there may be a space before the content area.

To resolve this, try decreasing the height of the main content box. This helps it fit in any size browser window, to avoid scrolling and keep your full design "above the fold."

There are several ways to shorten the content area:

• Use Info page content width in the Info page styles section of site styles to widen the content area.
• Use the tweaks in that section to decrease the size of the displayed content, such as font size or logo size.
• Shorten the text in the content area.