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

Aviator, Aubrey, and Encore share the same underlying structure and functionality. This guide applies to all these templates.

This guide walks you through the options for adjusting the look and feel of your Aviator, Aubrey, or Encore 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.

Aviator, Aubrey, and Encore support these page types with template-specific features:

  • Info - A landing page with multiple layout options that makes a great homepage
  • 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
  • Gallery - Style the gallery as a slideshow or grid
  • Products (Classic) - Sell goods and services with our integrated Commerce features
  • Cover Page - A unique landing page styled separately from your template

Info Page style

In Aviator, Aubrey, and Encore, the default homepage (landing page) is an Info Page. Info Pages are styled independently from the rest of the site. To learn more, visit Info Pages.

Main content area

The main content area of your site displays centered in the browser. Adjust the width with the Site Width tweak. For example, if you choose a Site Width of 80%, the main content area will always take up 80% of the width of the browser, leaving a 10% margin on either side.

The site's background image or color displays behind and around the main content area. Adjust the transparency on the Content Background color to set how much of the site background shows through.

Border

Use the Site Border tweak in the Options section of the Style Editor to add or hide the border around your main content area, header, and footer.

  • The Site Border tweak has four thickness options.
  • The Borders tweak in the Colors section controls the color.

You can also check Site Drop Shadow to add a shadow border.  

Layout and Main Navigation

The layout of your site is controlled by the Info Page Layout tweak in the Options section of the Style Editor.

Note: This tweak also affects the Info Page.

In Offset or Business Card layout, the Main Navigation displays as a sidebar navigation in the top-left, and stays fixed on the page as you scroll. Social icons display in the top-right.

Note: In reduced-width browsers, your site always displays in Poster layout.

In Poster layout, the Main Navigation displays above the header and moves up with the page content as you scroll. Social icons display below the footer. 

Note: To learn how to adjust what pages display in the navigation menu, visit Adding pages to your navigation.

Use the Navigation tweaks in the Colors section and Typography section of the Style Editor to adjust the font style and color of the navigation links. Changes you make to the navigation style also affect the Info Page.

Folders added to the Main Navigation display with a + symbol. The navigation menus show as an overlay. Use the Folder Dropdown tweak in the Colors section of the Style Editor to adjust the overlay’s background color and transparency.

Site header

The site title or logo displays in the header above the main content area. Using the Tagline and Contact Info tweak in the Options section of the Style Editor, you can also display:

  • Tag line - Add a tag line in the Logo & Title panel. Style it with the Tagline and Tagline Font tweaks.
  • Contact information - Set the contact information with the Contact Phone Number, Contact Email, and Physical Location areas of the Business Information panel. Style it with the Contact Info and Contact Info Font tweaks.

The Sizes & Values section of the Style Editor adjusts the logo size and the spacing of the site header. Use the Colors section to change the colors for each element. 

The Header/Footer Background color tweak adjusts the background color for both the header and footer. You may need to adjust the opacity

Background

The background image or color displays behind all content on your site. 

  • Set a background image for your site with the Background Image tweak in the Colors section of the Style Editor.
  • To display a background color instead, remove the background image and adjust the Site Background tweak.  
  • Info Pages have their own background images.
  • To display the background image on your mobile site, check Mobile Background Image in the Mobile Styles section of the Style Editor. The Info Page background image always displays on mobile.

For more information, visit Adding a background image. For troubleshooting help with cropping or distortion issues, visit Formatting background and banner images for responsive design

Note: Mobile browsers can't display fixed background images. Instead, the image will move with the page.

Social icons

Social icons link to your connected accounts.

  • If you’ve selected the Business Card or Offset layout in the Options section of the Style Editor, the social icons display in the top-right corner of the site header.
  • If you’ve selected the Poster layout, they display at the bottom below the footer.
  • Use the tweaks in the Social Icon Styles section of the Style Editor to adjust their color, style, and size, or to hide them altogether.
  • On hover, social icons display the same color as the navigation. Adjust this color with the Navigation Hover tweak in the Colors section
  • Changes you make to the social icon style also appear on the Info Page.

Footer

The footer is site-wide, meaning the same footer content displays on all pages except the Info Page. To customize the footer, hover over it and click the Edit annotation to add content using blocks. To learn more, visit Editing footers.

The Header/Footer Background color tweak adjusts the background color for both the header and footer. You may need to adjust the opacity

In Poster layout and smaller-width browsers, social icons display below the footer.

Mobile

Because Squarespace templates are built with responsive design, your site adjusts on mobile devices to better fit the format of that device. Use Device View to see how your site looks on different devices.

  • If your site is in the Offset or Business Card layout, your site will switch to the Poster layout on smaller browsers.
  • To display the background image on your mobile site, check the Mobile Background Image tweak in the Mobile Styles section of the Style Editor. For more help, visit Troubleshooting.
  • Logos remain visible on mobile. You can adjust the size with the Logo Size on Mobile tweak in the Mobile Styles section of the Site Editor. This tweak doesn't affect Info Pages.
  • For help with cropping or distortion issues for background images, visit Formatting background and banner images for responsive design
  • The color of the navigation overlay is set by the Site Background tweak in the Colors section of the Style Editor.
  • Folders display with a + symbol. Tap a folder to reveal links within that folder.
  • On mobile devices, social icons for any connected accounts appear at the bottom of the page.
  • Mobile browsers can't display fixed background images. Instead, the image will move with the page.
  • Not every mobile device can display .png files; we recommend you use .jpg images. 

Note: You can disable mobile styles in the Advanced panel.
Note: These templates don't offer a content sidebar. For a list of templates with sidebars, visit Editing sidebars.

Next step

Set up your Info landing page.

Was this article helpful?
3 out of 11 found this helpful
Aviator structure and style