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

Tremont template family

The Tremont template family (Camino, Carson, and Henson, and Tremont) is a great choice for restaurants and professional services. With full-bleed imagery and dynamic overlay effects, it puts the focus on your work.

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

Supported pages

Tremont supports these page types:

Page overlay

A special overlay can appear over any Album, Blog, Events, Products, or Layout Page on your site. The overlay disappears on click or when you scroll down, and reappears when you scroll back to the top of the page.

The overlay can contain:

  • Page title
  • Page description
  • Customizable color

Change where the overlay displays with Show Page Overlay in Page Overlay. Choose from these options:

  • Always - The overlay displays on all pages
  • In Index - The overlay displays only on pages within an Index
  • Not in Index - The overlay displays on all pages except those within an Index
  • Never - The overlay never displays
Tip: The page overlay doesn't display on individual blog posts, events, or products. Gallery Pages and Index Pages have separate overlay settings.

Text

Use the tweaks in Page Overlay Options to style the overlay text:

  • Show Page Title - Include the page title in the overlay
  • Show Page Description - Include the page description in the overlay
  • Max Width tweaks - set the overlay’s maximum widths for different browser sizes

Change the page title and description fonts with the tweaks in Page Overlay Typography.

Color

Change the overlay's color in the Page Overlay section:

  • Overlay Opacity - Change the transparency. Hide the color by setting the opacity to 0
  • Use Gradient for Overlay - Add a second color
  • Overlay Blend Mode tweaks - Change the color or colors using blend modes

Blend modes

The page overlay, Gallery Page overlay, and Index overlay all support up to two colors and multiple blending options.

First, choose your colors and opacity:

  • Overlay Color - Choose the main color
  • Use Gradient for Overlay - Check this to enable a second color in the bottom-right corner
  • Overlay Color 2 - Choose the secondary color
  • Overlay Opacity - Set the transparency. Not available for the Index background color

Next, experiment with the Overlay Blend Mode options:

  • Normal - No change to image
  • Multiply - Enhances dark pixels
  • Screen - Enhances light pixels
  • Overlay - Enhances light and dark pixels
Note: Internet Explorer and Microsoft Edge always display the Normal setting.

Header

The header displays as an overlay at the top of the page and includes your site title or logo, tagline, navigation links, shopping cart link, and social icons.

The header slides up and off the page as you scroll down. When you scroll up, it reappears.

Use the Header tweaks to adjust the padding and spacing, and to set the maximum and minimum sizes for any text in the header.

Alternate header colors

Most header elements have an alternate font color that displays on pages without banner images (except Index Pages). This helps keep your header font visible over the background color.

To set the alternate colors:

  1. Go to a page without a banner image, then open Site Styles.
  2. Scroll down to the Social Icons, Branding, and Site Navigation Typography sections
  3. Change the Alternate Color tweaks.

Site title or logo

The site title or logo always displays in the top-left corner of the header.

Style the title or logo in Branding:

  • Use the Site Title tweaks to change the font, size, and color of your site title.
  • Add a background color behind the text with Site Title Background.
  • You can set the site title's minimum and maximum size.
  • The site title's Alternate Color displays on pages without banner images.
  • If you replace the site title with a logo, use the Logo Height tweaks to set the logo height for different browser sizes.

Tagline

If you add a tagline, it displays next to the site title or logo.

Style the tagline in Branding:

  • Use the Tagline tweaks to adjust the font and size.
  • Set the tagline's minimum and maximum size.
  • The tagline's Alternate Color displays on pages without banner images.
  • The tagline disappears when there isn't enough room for it to display horizontally. Check Always Show Tagline to display it in the navigation overlay.

The pages and links in your Main Navigation can display as either a horizontal line of links or a navigation menu (☰).

Style the Main Navigation in Site Navigation:

  • Nav Style: Icon - The ☰ menu displays at all times. When clicked, the links expand horizontally.
  • Nav Style: Standard - Links display in a horizontal line. On browsers and devices that aren't wide enough to display the links horizontally, they collapse to a ☰ menu.
  • Nav Position - Choose if the navigation links display on the Right or Left.
  • Font and Font Min - Set the navigation links' minimum and maximum size.
  • Nav Link tweaks - Style the text of the links.
  • Alternate Color tweaks - choose the colors that display on pages without banner images.

Add drop-down menus to the navigation with folders. The menu links appear when you click the folder link.

Tip: Index Pages create another navigation menu.

If your navigation has a ☰ menu, clicking the menu icon expands the links horizontally. If the links can't fit horizontally, they open in a full-screen overlay.

Open the overlay, navigate to Site Styles, and use the tweaks in Navigation Overlay to style the overlay:

  • Set the colors of the background, site title, tagline, and X icon.
  • Use Nav Overlay Alignment to center the links or align them with the menu icon (either right or left, depending on the Nav Position).
  • Check Always Show Tagline to display the tagline in the navigation overlay when it can’t fit in the header.
Tip: The smartphone Device View always shows an overlay, even if the links fit vertically. For best results, open your site on a smartphone browser to see how it looks.

Social icons

Built-in social icons can display in the header. Use the tweaks in Social Icons to change their size, color, style, and shape.

Choose where social icons display in Header:

  • Display Social Icons - Hide or display the icons.
  • Social Icons on Right - When checked, icons display in the top-right corner. When unchecked, they display with the navigation links.

Shopping cart

If your site has a Store Page, use the tweaks in Shopping Cart to style your shopping cart and choose how it displays:

  • Cart Link Display - Choose if it displays with the navigation as text, on the right as an icon, or is hidden
  • Cart Icon Style - Choose between Cart or Bag

Structure and Style

Ajax loading

Ajax is a special method for site loading that makes content-heavy pages, like Blog Pages, faster and more nimble. To create a seamless browsing experience, we recommend keeping Ajax loading enabled.

Occasionally, Ajax may conflict with custom code, anchor links, and Analytics. For more help, visit Ajax loading.

Site padding

Style the padding around your site's content in Site:

  • Outer Padding - Change the padding around the entire site
  • Top/Bottom Content Padding - Change the space between the main content area and the header and footer
  • Left/Right Content Padding - Add space on either side of the main content area
  • Content Max Width - Change the width of the main content area
Tip: The header and footer have more padding tweaks.

Background

Use Site Background Color in Site to change the background color of your main content area and footer.

  • The page overlay may affect how your background color looks when a page first loads.
  • The background color displays behind the header on pages without banners. Use the alternate color tweaks to style the header elements on these pages.
  • The Index has its own background color.
Tip: The Tremont family doesn't support a site-wide background image. You can create page-specific background images with an Index slideshow, Gallery Page, or Cover Page. You can also add banner images and videos.

Banners

You can create a full-bleed banner image or video at the top of any of these page types:

  • Layout Page
  • Album
  • Blog
  • Events
  • Store

To create the banner, open that page's settings and add a thumbnail image or video. Keep in mind:

  • Banners display behind the header.
  • Your site padding must be set to 0 for images to appear full-bleed.
  • A page's thumbnail will also become its background image on the landing page of an Index slideshow.

Change where banners display with the Show Page Banner Image tweak in Page Banner Image Options. Choose from these options:

  • Always - Banners display on all pages
  • In Index - Banners display only on pages within an Index
  • Not in Index - Banners display on all pages except those within an Index
  • Never - Banners never display. Use this to add thumbnail images for the Index or social sharing without creating banner images

Set the height of all banners on your site with the Page Banner Image Height tweak.

Tip: If you have pages without banner images, set alternate colors for the header elements.

Fonts

Style the text on your main content area with the tweaks in Site-Wide Fonts and Site-Wide Font Colors.

  • Paragraph Margin - Change the space between paragraphs. This includes paragraphs in page descriptions and gallery captions
  • Excerpt and Meta tweaks - Style elements on the Blog Page
  • Label tweaks - Style the Album Page's Share button
  • Quote tweaks - Style the Quote Block

With responsive design, you can set certain text to scale up or down depending on browser width. This helps your text look good in any browser. As an example, here’s how you’d do this for Heading 1 text:

  • Open Site Styles and scroll down to Site-Wide Fonts.
  • Use the Heading 1 tweak to set the maximum font size, for example, 65px.
  • Use the Heading 1 Min tweak to set the minimum font size, for example, 15px.

It’s considered best practice to set each header’s minimum font size larger than your body text font size. To learn more, visit Scaling fonts.

Blog Pages

The Tremont template family uses a standard grid/list Blog Page. To learn more about the unique features and style options of this type of blog, visit Standard grid/list Blog Pages.

Index Pages

Tremont Index Pages create a slideshow of full-bleed images. Each page in the Index becomes a slide that displays when you hover over its menu link. The header’s branding and Main Navigation links display over the slides and don’t disappear on scroll.

Add or change the slide background images by adding thumbnails to each sub-page.

When you scroll to the bottom of a sub-page, the Index landing page displays below the footer. This helps your visitors explore your content and gives your portfolio a unified feel.

  • The sub-page's thumbnail displays as the background image. If there's no thumbnail, the background color displays.
  • This version of the landing page supports the Index overlay color, but not slideshow effects.

Supported pages

You can add the following pages to an Index:

  • Album Pages
  • Blog Pages
  • Events Pages
  • Gallery Pages
  • Layout Pages
  • Products Pages

Each sub-page in the Index creates a link on the Index landing page. When you hover over a link, its background thumbnail appears. Use the Page Title field in each sub-page's settings to set the link text.

Change the font and color of these navigation links with the Menu tweaks in Index Typography.

Use the Index Menu Options tweaks to select where the links display and their spacing.

  • Position - Change where menu links appear on the landing page. This tweak also affects the position of the Index description.
  • Layout - Choose Inline or Stacked to display the links horizontally or vertically.
  • Use the Max Width tweaks to set the maximum widths for different browser sizes.
  • Spacing - Change the space between links.
  • Index Menu/Description Padding - Change the space between the menu links and the description.
  • You can set the maximum and minimum font sizes for the menu links.

Index background

You can set either a background color or image for your Index:

  • Background color - This displays by default. Use Background Color in Index Overlay/Background Colors to set the color.
  • Background image - Add a thumbnail to the main Index Page in Index Page settings. This replaces the background color. To revert back to a background color, remove the thumbnail image.
Tip: The Index landing page overlay color doesn't display over the Index background image.

How the Index background displays depends on your settings:

  • If Show Index Slide is checked, and Slideshow On is unchecked, the Index background will display at all times except when hovering over the Index navigation links.
  • If Show Index Slide is checked, and Slideshow On is checked, the Index background will display on initial page load, before moving through the rest of the slides in your slideshow.
  • If Show Index Slide is unchecked, the Index background won't appear. Visitors will see the first sub-page's slide on initial load. The Index background color will only display when hovering over the Index navigation links for sub-pages without thumbnail images.

Index overlay colors

The Index landing page’s overlay color displays over all slides with thumbnail images. Style the overlay with the tweaks in Index Overlay/Background Colors:

  • Overlay Color - Select the overlay color
  • Overlay Opacity - Change the overlay’s transparency. To make the color disappear, set the opacity to 0
  • Use Gradient for Overlay - Check to enable a second color and blend mode options

Index sub-pages have a separate page overlay.

Index description

The Index Page's description can appear as a headline on the Index landing page. Add this text in the page settings for the Index.

Style the description in Index Description Options:

  • Show Description - Uncheck to hide the description.
  • Position - Choose where the description displays (top, middle). The position of the Index navigation links also affects this.
  • Use the Max Width tweaks to set the maximum widths for different browser sizes.
  • Menu/Desc Spacing - Change the spacing between the description and the Index navigation. Available when Position: Middle is selected and the Index navigation links are set to Position: Left or Center.
  • Hide on Hover - When checked, the description will disappear when a visitor hovers over the Index navigation links.
Tip: We recommend keeping the description short, such as a key phrase or single sentence. Longer descriptions may dominate the screen in mobile view.

Index banners

You can add a banner image or video to the top of any sub-page, except Gallery Pages.

To add a banner to a sub-page:

  1. Add a thumbnail in the page settings for that sub-page.
  2. Find Show Page Banner Image in Page Banner Image Options.
  3. Choose Always to display banners on all pages, or In Index to display banners on Index sub-pages only.

If you choose Never or Not In Index, visitors won't see the banner at the top of any sub-page. The page thumbnail will still display in these areas:

  • When visitors scroll to the bottom of the sub-page, where the Index landing page displays below the footer
  • On the Index landing page itself

Gallery Pages

Tremont Gallery Pages display your images and videos in a unique full-page grid format. Use the Style tweak in Gallery Layout Options to choose from three distinct layouts. If you have multiple Gallery Pages on your site, they all follow the same style.

  • Style: Horizontal - Images display two to a row. When Landscape Full-width When First is checked, landscape images display full-bleed except in rows that start with a portrait image.
  • Style: Stacked - Images stack vertically, one image per row. All images display full-bleed.
  • Style: Masonry - Images display in two columns. Mixing up images with different heights creates a staggered effect that gives it the look of a mosaic.

For any layout style, use the Spacing tweak to add or reduce space between each image.

The site-wide header's branding and links display over the top image or images in your gallery. It takes the same style on the Gallery landing page as on the rest of your site, with the following exceptions:

You can choose to add an overlay color, page title, and description to your Gallery Page. Edit the page title and description in the Gallery's page settings.

The overlay disappears on click or when you scroll down, and reappears when you scroll back to the top of the page.

Style the overlay in Gallery Overlay:

  • Show Gallery Overlay - Choose if the overlay displays on Gallery Pages in or outside an Index
  • Overlay Color - Select the overlay color
  • Use Gradient for Overlay - Check to enable a second color and blend mode options
  • Overlay Opacity - Change the overlay’s transparency. To make the color disappear, set the opacity to 0

Use the Gallery Overlay Typography and Gallery Overlay Options sections to style the title and description text, or to hide either one. You can set the maximum and minimum sizes for the title and description, and set the Max Width for different browser sizes.

Tip: The overlay on Gallery Pages is styled independently from the page overlay and Index overlay.

The image title and description text can display over each image in your gallery. In the Stacked layout, they can display below the images. Use the tweaks in Gallery Caption Typography to style the text.

Set the caption display settings in Gallery Caption Options:

  • Choose where the captions display beneath gallery images with Captions Position.
  • Add a color filter to the image behind the text with Captions Overlay Color, then use Captions Overlay Opacity to adjust the transparency. The overlay has blend mode options, but only supports one color.
  • Set the Caption Width for different browser sizes.
  • Set the captions' minimum and maximum font size.
  • Use Captions Display to select when captions show (always or only on hover).
    • If your gallery is Stacked and you’ve selected Captions Display: Always, you can check Captions Below Image to display the captions on the page below the image.
    • If you choose Captions Display: On Hover, you can select a Caption Indicator Color for the circle you hover over to display captions
Tip: Long captions crop at the top and bottom to fit over the image. If you have longer captions, we suggest setting captions to display below the image instead.

Footer

When enabled, the site-wide footer displays at site width and takes the same background color as your main content area. It appears on all pages except Index landing pages. On sub-pages in an Index, the Index landing page displays below the footer.

To customize the footer, hover over it and click Edit. Then add content using blocks. To learn more, visit Editing footers.

Style your site-wide footer in Footer:

  • To hide the footer on all pages, uncheck the Show Footer tweak.
  • Use the Outer Padding tweak to change the space around the footer.

Mobile

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

  • As on desktop, the header slides up and off the page when you scroll down. When you scroll up, it reappears.
  • Page overlays display at the top of the page.
  • Gallery images always stack vertically on smartphones.
  • You can’t disable mobile styles.

The navigation displays as a ☰ menu on all browsers and devices that aren't wide enough to display the links horizontally, or when Nav Style: Icon is selected in Site Navigation. When tapped, the navigation opens as a full-screen overlay.

  • Choose where the ☰ menu displays with the Nav Position tweak.
  • Use the tweaks in Navigation Overlay to style the navigation overlay.
  • Check Always Show Tagline to display the tagline in the navigation overlay.
  • Social icons display in the top-right, or next to the ☰ menu if it's set to display on the right.

How the shopping cart appears depends on how you styled the Cart Link Display in Shopping Cart:

  • If styled as text, it displays in the navigation overlay.
  • If styled as an icon, it displays in the top-right corner.
  • If hidden on desktop, it's also hidden on mobile.

Responsive design

There are several ways to fine-tune your site's responsive design:

  • Set the maximum and minimum sizes for key text and your logo
  • Set the maximum widths in different browsers for many elements on your site. In Site Styles, look for tweaks with tablet: (for displays 641-1024 pixels) and mobile: (for displays smaller than 640 pixels). 
  • Choose if your Index Page slideshow automatically moves through slides on mobile
Was this article helpful?
34 out of 67 found this helpful