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

Tremont, Camino, Carson, and Henson 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 Tremont, Camino, Carson, or Henson site. If you're new to Squarespace, we recommend you start with the guide Making style changes.

Tips: In the Home Menu, click Design, then 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.

You can add these pages with template-specific features:

  • Index - A slideshow landing page that makes a great portfolio homepage
  • Gallery - A full-bleed gallery with multiple layout options

And these standard pages:

  • Regular Page - A blank page you can customize with blocks
  • Album - Add music and cover art to your site
  • Blog - Style the blog landing page as a grid or a list
  • Events - Create a calendar or list of events
  • Products (Advanced) - Sell goods and services with our integrated commerce features
  • Cover Page - A unique landing page styled separately from your template
Tip: If you're new to Squarespace, we suggest you read Understanding the Pages panel and Adding pages to your navigation for an overview of how pages and content work in Squarespace.

Page overlay

A special overlay can appear over any Album, Blog, Events, Products, or Regular Page on your site.

Note: The Gallery Page and Index Page have separate overlay settings.

The overlay can contain your page title, page description, and a customizable color.

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

Adjust where the overlay displays with the Show Page Overlay tweak. 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.
Note: The page overlay doesn't display on individual blog posts, events, or products.

Text

Adjust any page's title and description in Page Settings.

Use the tweaks in the Page Overlay Options section of the Style Editor to adjust where the overlay text displays and change the spacing.

  • Show Page Title - Display or hide the title.
  • Show Page Description - Display or hide the description.
  • Use the Max Width tweaks to set the maximum widths for different browser sizes.

Adjust the style with the Page Overlay Typography section.

Color

Experiment with the tweaks in the Page Overlay section of the Style Editor to adjust the overlay's color.

  • Adjust the transparency with the Overlay Opacity tweak. To make the color disappear, set the opacity to 0.
  • Check Use Gradient for Overlay to add a second color.
  • Use the Overlay Blend Mode tweaks to adjust the color or colors.

Blend modes

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

Note: Gallery image caption overlays support only one color.

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 to find one that enhances your image the way you like:

  • 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 don't support blend modes. In these browsers, the color will always display the Normal setting.

Header

The site title or logo, tag line, navigation links, shopping cart link, and social icons display in the header.

  • The header displays as an overlay at the top of the page.
  • The header slides up and off the page as you scroll down. When you scroll up, it reappears.
  • Use the tweaks in the Header section of the Style Editor to adjust the padding and spacing.
  • You can 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. This helps keep your header font visible over the background color.

To set the alternate colors, go to a page without a banner image, and then open the Style Editor. Scroll down to the Social Icons, Branding, and Site Navigation Typography sections, and look for the Alternate Color tweaks.

Branding

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

In the Branding section of the Style Editor:

  • Use the Site Title tweaks to adjust the font, size, and color of your site title.
  • Check Site Title Background to add a background color behind the text.
  • 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 adjust the logo height for different browser sizes.

Tag line

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

In the Branding section of the Style Editor:

  • Use the Tagline tweaks to adjust the font and size.
  • You can set the tag line's minimum and maximum size.
  • The tag line's Alternate Color displays on pages without banner images. 

To reduce crowding, the tag line disappears when there isn't enough room in the header 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 "hamburger" menu icon.

Use the Site Navigation sections to set the navigation style, including:

  • Nav Style: Icon - Menu icon displays at all times. When clicked, the links expand horizontally.
  • Nav Style: Standard - Links display in a horizontal line. On smaller browsers, they collapse to a menu icon.
  • Nav Position - Choose whether 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.
  • The navigation's Alternate Color tweaks 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 an additional navigation menu.

The navigation displays as a menu icon:

  • On all browsers and devices that aren't wide enough to display the links horizontally.
  • Always, when Nav Style: Icon is selected.

When clicked, if the links can't fit horizontally, they open in a full-screen overlay. Use the tweaks in the Navigation Overlay section of the Style Editor to style the overlay, including:

  • Set the colors of the background, site title, tagline, and X icon.
  • Use the Nav Overlay Alignment tweak to center the links or align them with the menu icon (either right or left, depending on the Nav Position).
  • Choose whether to Always Show Tagline. When the tag line can't fit in the header, it will display in the overlay instead.
Tip: Open the overlay before opening the Style Editor to test out these tweaks.
Note: 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

Social icons for your connected accounts can display in the header.

In the Header section of the Style Editor:

  • Use the Display Social Icons tweak to hide or display the icons.
  • Check Social Icons on Right to display them in the top-right corner. When unchecked, the icons display with the navigation links.

Use the Social Icons section of the Style Editor to adjust their size, color, style, and shape.

Shopping cart

If your site has a Products Page, use the Shopping Cart section of the Style Editor to choose how your shopping cart displays, including:

  • Cart Link Display - Choose whether it displays with the navigation, on the right, or is hidden.
  • Cart Icon Style - Choose between Cart or Bag.

Site padding

Use the Site section of the Style Editor to adjust the padding around your site's content:

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

Background

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

Tip: 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.

Note: Tremont, Camino, Carson, and Henson don'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 to any of these page types:

  • Regular Page
  • Album
  • Blog
  • Events
  • Products
Tip: Your site padding must be set to 0 for images to appear full-bleed.

To create the banner, open that page's settings and add a thumbnail image or video. Banners display behind the header.

Note: The page's thumbnail will also become its background image on the landing page of an Index slideshow.

Adjust where banners display with the Show Page Banner Image tweak. 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

Adjust the text on your main content area with the Site-Wide Fonts and Site-Wide Font Colors sections of the Style Editor. Options include:

  • Paragraph Margin - Adjust the space between paragraphs. This includes paragraphs in page descriptions and gallery captions.
  • Excerpt and Meta tweaks - Adjust elements on the Blog Page.
  • Label tweaks - Style the Album Page's Share button.
  • Quote tweaks - Style the Quote Block.
Tip: Blog Pages have additional text options.

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. Here’s how you’d do this for Heading 1 text:

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

We recommend keeping each header’s minimum font size larger than your body text font size. For more information, visit Scaling fonts.

Responsive design

In addition to scaling fonts, many elements on your site let you set three maximum size options based on your visitor's browser width.

Here's how that works for the logo height:

  • Logo Height - Affects display on screens 1025 pixels and over.
  • Tablet: Logo Height - Affects display on 641-1024 pixel screens.
  • Mobile: Logo Height - Affects display on screens 640 pixels and under.

To learn more about Squarespace's responsive design, visit How will my site appear on a mobile device?

Footer

When enabled, the footer appears on all pages except Index landing pages. The footer displays at site width.

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

  • To hide the footer on all pages, uncheck the Show Footer tweak.
  • Use the Outer Padding tweak to adjust the space around the footer.
  • The footer takes the same background color as your main content area.
  • For sub-pages in an Index, the Index landing page displays below the footer.

Ajax loading

Ajax (asynchronous JavaScript and XML) is a special method for site loading, which retrieves server data for specific elements without reloading the whole page. This makes content-heavy pages like Gallery Pages much faster and more nimble.

To create a seamless browsing experience, we recommend keeping Ajax loading enabled. Occasionally, Ajax may conflict with embedded custom code. If you’re troubleshooting issues with embedded custom code, you can disable Ajax by unchecking Enable Ajax Loading in the Style Editor.  

Mobile

Because Squarespace templates are built with responsive design, your site will adjust on mobile devices to better fit the format of that device. You can use Device View to see how your site will look on different devices. For general information, visit How will my site appear on a mobile 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.

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

  • Adjust where the hamburger icon displays (top-right or top-left corner) with the Nav Position tweak.
  • Use the tweaks in the Navigation Overlay section to style the navigation overlay.
  • Check Always Show Tagline to display the tagline in the navigation overlay.

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

  • Set the maximum and minimum sizes for key text and your logo.
  • Adjust the maximum widths in different browsers for many elements on your site.
  • Choose whether your Index Page slideshow automatically moves through slides on mobile.

Gallery images always stack vertically on smartphones.

Note: Unlike some other Squarespace templates, you can’t disable mobile styles for Tremont, Camino, Carson, or Henson. This ensures your site always follows best practices and stays mobile-friendly.

Next step

Learn how to create a dramatic slideshow portfolio with the Index Page.

Was this article helpful?
1 out of 4 found this helpful
Tremont structure and style