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

Supported pages

Tremont supports these page types:

• Album pages
• Blog pages - Standard grid/list
• Cover pages
• Events pages
• Gallery pages - Stacked, masonry, or horizontal
• Index pages - Slideshow
• Layout pages
• Store pages

Page overlay

A special overlay can appear over any album, blog, events, store, 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 the Show page overlay tweak under 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 under 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 under Page overlay typography.

Color

Change the overlay's color with the Page overlay tweaks:

• 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: 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 with these Branding tweaks:

• 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 with the Branding tweaks:

• 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.

Navigation

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 with these Site navigation tweaks:

• 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 dropdowns. The menu links appear when you click the dropdown link.

Tip: Index pages create another navigation menu.

Navigation overlay

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 with these Header tweaks:

• 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 with these Site tweaks:

• 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 the Site background color tweak under 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 under 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 in version 7.0.

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.

• Pages without thumbnail images follow the Background color tweak in index overlay/background colors
• Gallery pages without thumbnail images display the first gallery image.
• Choose how slideshows move from one slide to another with the tweaks under Index slideshow options
• Slides on the index landing page feature a color overlay.
• Each page in the index creates a navigation link.

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
• Store pages

Index navigation links

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 under 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 the Background color tweak under 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 under 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 with these Index description options tweaks:

• 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 under 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 under 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.

Gallery header

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:

• The alternate header colors don't display.
• The gallery page doesn't support a banner.

Gallery overlay

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 with the Gallery overlay tweaks:

• 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.

Gallery captions

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 under Gallery caption typography to style the text.

Set the caption display settings in the Gallery caption options section of site styles:

• 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 with these Footer tweaks:

• 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 computer, 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.

Navigation

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 under 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 under 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 tweak under 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 computer, 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 text using the Site-wide fonts tweaks.
• Set the maximum and minimum sizes your logo using the Branding tweaks.
• 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.

Troubleshooting Tremont

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.

My announcement bar overlaps my header

If you've added an announcement bar to your site, it may overlap your header and navigation links. To fix this, adjust the Outer padding tweak in Site styles to move the header.

My banner isn't displaying

First, check where your banners are set to display. Depending on your settings, your banners may display only in an index, only outside an index, or never:

1. Open Site styles.
2. Scroll to the Page banner image options section.
3. Check Show page banner image. To show your banner on all pages, click Show page banner image: always.
4. Click Save and refresh the page.

If the banner still isn't displaying, ensure that the page has a thumbnail image:

1. Open the Pages panel.
2. Hover over the page title in the left panel.
3. Click the .
4. Check if there's a thumbnail image or video in the Media tab.

For pages in an index, be sure to add the thumbnail to the page within the index, not the index itself.

My banners or background images aren't displaying full-bleed

Check the padding around your site:

1. Open the Site styles panel.
2. Scroll to the Site section.
3. Set the Outer padding to 0.

My navigation overlay overlaps with my header

If your navigation expands into an overlay, sometimes the top links overlap with the header and can't be clicked. To fix this, change the padding or number of links to avoid opening the navigation overlay:

• In Site styles, experiment with reducing the Outer Padding tweak.
• In your Pages panel, remove some of the pages from Main navigation or create drop-downs menus in your navigation.

My page overlay isn't displaying

Page overlay colors can display on any album, blog, events, gallery, store, or layout page, and the index landing page. On every page except the index landing page, the overlay can contain the page title and description.

First, scroll to the very top of the page. The overlay disappears when you scroll down.

If the overlay doesn't reappear at the top of the page, change the overlay settings in site styles. How you adjust this depends on the page type. The index page and gallery page have different page overlay settings than the rest of your site.

For index pages:

1. Open Site styles.
2. Scroll to the Index overlay/background colors section.
3. Changes the Overlay opacity tweak.
4. Note that the overlay color won't display on initial load if Background images on hover only is unchecked in the Index slideshow options section.

For gallery pages:

1. Open Site styles.
2. Scroll to the Gallery overlay section.
3. Select Show gallery overlay: always. (You can adjust this later.)
4. Change the Overlay opacity tweak.
5. Scroll to the Gallery overlay options section.
6. Check Show gallery title and Show gallery desc.

For all other page types:

1. Open Site styles.
2. Scroll to the Page overlay section.
3. Select Show page overlay: always. (You can adjust this later.)
4. Change the Overlay opacity tweak.
5. Scroll to the Page overlay options section.
6. Check Show page title and Show page description.

When you've finished adjusting your settings, click Save and refresh the page.

How do I hide or show the shopping cart?

The shopping cart can appear on your site after you've added a store page. To change this:

1. Go to your store page and open site styles.
2. Scroll to the Shopping cart section.
3. To set the cart to permanently display, use the Cart link display tweak to choose With nav or Icon on right.
4. To permanently hide it, choose Cart link display: hide.

Use the other tweaks in this section to style the shopping cart.

How do I recreate Tremont's order now page?

The Order now page was created with a ChowNow Page.