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

Tremont, Camino, Carson, and Henson share the same underlying structure and functionality. This guide applies to all these templates.

This guide is a reference for all Style Editor tweaks in the Tremont, Camino, Carson, and Henson templates.

To learn how to use the Style Editor, visit Making style changes.

Note: The Squarespace platform is constantly evolving to give you the best possible tools for building your website. We update these guides frequently, but if the platform has recently changed you may see slightly different options than the ones listed below. The best way to learn the functionality of any tweak is to experiment with it and see what changes on your site.

Before you begin

  • Scaling fonts - Control how your site looks in different browsers by setting the maximum and minimum font sizes. Set the maximum font size with the main font tweak (such as Title Font), and then set the minimum size (Title Font Min). For more information, visit Scaling fonts.
  • Maximum sizes - Many elements let you set three maximum size options based on your visitor's browser width. Look for Tablet and Mobile tweaks to set the sizes for smaller browser windows.

Social Icons

Style the social icons that display in the header. Use the Social Icons on Right tweak in the Header section to choose where they display.

  • Size
  • Color
  • Style: Regular, Border, Knockout, Solid
  • Shape: Square, Rounded, Circle
  • Alternate Color - Displays on pages without banner images.

Site

  • Enable Ajax Loading - Leave this enabled for optimal loading speeds.
  • Site Background Color - Adjust your site's background color.
  • Outer Padding - Adjust the padding around the entire site (header, footer, and main content area).
  • 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.

Header

Adjust the site-wide header.

  • Outer Padding - Adjust the space around the header.
  • Element Spacing
  • Display Social Icons
  • Social Icons on Right - Choose whether they display with the navigation links or in the top-right.

Shopping Cart

  • Cart Link Display: With Nav, Icon on Right, Hide
  • Cart Icon Style: Cart, Bag
  • Cart Icon Color
  • Quantity Background Color
  • Quantity Text Color
  • Quantity Font
  • Cart Icon Weight: Hairline, Light, Medium, Heavy
  • Cart Icon Size: Extra Small, Small, Medium, Large, Extra Large

Footer

Adjust your site's footer. The footer doesn't display on Index landing pages.

  • Show Footer - Uncheck to hide the footer on all pages.
  • Outer Padding - Adjust the space around the footer.

Branding

Adjust your site title, logo, and tag line.

  • Site Title Font
  • Site Title Font Min - Learn more about scaling fonts.
  • Site Title Color
  • Site Title Alternate Color - Displays on pages without banner images.
  • Site Title Background - Add a background color behind your site title.
  • Site Title Background Color
  • Tagline Font
  • Tagline Font Min - Learn more about scaling fonts.
  • Tagline Color
  • Tagline Alternate Color - Displays on pages without banner images.
  • Logo Height
  • Tablet: Logo Height
  • Mobile: Logo Height

Site Navigation

Adjust the fonts and display settings of your Main Navigation.

Site Navigation Options

  • Nav Style: Icon, Standard
  • Nav Link Spacing
  • Nav Position: Left, Right
  • Menu Icon Weight: Hairline, Light, Medium, Heavy
  • Menu Icon Size: Extra Small, Small, Medium, Large, Extra Large

Site Navigation Typography

Alternate Color tweaks display on pages without banner images.

  • Font
  • Font Min - Learn more about scaling fonts.
  • Link Color
  • Link Alternate Color
  • Nav Link Style: Background, Underline on Hover, Strikethrough on Hover, None
  • Nav Link Background Color
  • Nav Link Underline Weight
  • Active Link Color
  • Active Link Alternate Color 
  • Menu Icon Color
  • Menu Icon Alternate Color

Navigation Overlay

Adjust the navigation menu that displays when you click the navigation menu icon.

  • Background Color
  • Site Title Color
  • Tagline Color
  • Icon Color
  • Link Color
  • Active Link Color
  • Social Icons Color
  • Nav Overlay Alignment: With Icon, Center
  • Font Min - Learn more about scaling fonts.
  • Element Spacing
  • Link Spacing
  • Always Show Tagline
  • Nav Overlay Tagline Font Size

Page Overlay

Adjust the page overlay, which can display an overlay color, the page title, and the page description. Gallery Pages and Index Pages have separate overlays.

Page Overlay

  • Show Page Overlay: Always, In Index, Not In Index, Never - Choose which pages your overlay displays on.
  • Overlay Color
  • Use Gradient for Overlay - Check to enable a second color and blend mode options.
  • Overlay Color 2
  • Overlay Blend Mode: Normal, Multiply, Screen, Overlay
  • Overlay Opacity - Adjust the transparency. Set to 0 to hide the overlay color.

Page Overlay Options

Adjust the page title and page description options. 

  • Page Title/Desc Position: Top Left, Top Center, Left, Center, Bottom Left, Bottom Center
  • Show Page Title - Uncheck to hide the page title.
  • Page Title/Desc Padding
  • Page Title Max Width
  • Tablet: Page Title Max Width
  • Mobile: Page Title Max Width
  • Show Page Description - Uncheck to hide the page description.
  • Page Desc Max Width
  • Tablet: Desc Max Width
  • Mobile: Desc Max Width
  • Page Title/Desc Spacing - Adjust the space between the page title and description.

Page Overlay Typography

Adjust the page title and description fonts. 

  • Title Font
  • Title Font Min - Learn more about scaling fonts.
  • Title Color
  • Page Title Background
  • Page Title Background Color - This tweak doesn't support opacity changes.
  • Description Font
  • Desc Font Min - Learn more about scaling fonts.
  • Description Color

Page Banner Image Options

Choose whether to display page banners on your site.

  • Show Page Banner Image: Always, In Index, Not In Index, Never - Choose which pages your overlay displays on.
  • Page Banner Image Height

Site-Wide Fonts

Adjust the text in your main content areas. For general info, visit Changing fonts. Blog Pages have additional text options.

Site-Wide Fonts

Headings and quote tweaks support scaling fonts.

  • Paragraph Margin - Adjust the space between paragraphs. This includes paragraphs in page description overlays and gallery captions.
  • Heading 1
  • Heading 1 Min
  • Heading 2
  • Heading 2 Min
  • Heading 3
  • Heading 3 Min
  • Body Font
  • Quote Font - Style the Quote Block.
  • Quote Font Min
  • Label Font - Style the Album Page's Share button.
  • Meta Font - Style the Events Page date, time, and other metadata.
  • Excerpt Font - Style the Events Page excerpt text.

Site-Wide Font Colors

  • Heading 1 Color
  • Heading 2 Color
  • Heading 3 Color
  • Body Color
  • Body Link Color
  • Quote Color - Style the Quote Block.
  • Label Color - Style the Album Page's Share button.
  • Meta Color - Style the Events Page date, tags, and other metadata.
  • Excerpt Color - Style the Events Page excerpt text.

Index

The Index Page creates a full-screen slideshow portfolio.

Index Overlay/Background Colors

Adjust the Index overlay and background colors, which are separate from the rest of your site.

  • Background Color - Displays for slides without thumbnail images, or as the main background to the Index.
  • Use Gradient for Background - Check to enable a second color.
  • Background Color 2
  • Overlay Color - Displays over every thumbnail slide in the Index landing page. 
  • Use Gradient for Overlay - Check to enable a second color and blend mode options.
  • Overlay Color 2
  • Overlay Blend Mode: Normal, Multiply, Screen, Overlay
  • Overlay Opacity - Adjust the overlay's transparency. To make the color disappear, set the opacity to 0.

Index Slideshow Options

Style the Index landing page's slideshow. These settings don't apply to the Index landing page that displays at the bottom of sub-pages.

  • Slideshow On - When checked, the pages in the Index move from one page to the next automatically.
  • Slideshow On for Touch Devices - If you disable the automatic slideshow, you can enable it on touch devices.
  • Slideshow Animation - Add a zoom effect to each thumbnail image.
  • Slideshow Delay - Set the length of time between each slide.
  • Show Index Slide - Display the Index background, rather than the first slide, on initial load.

Index Menu Options

Adjust the Index's navigation links and description.

  • Position: Left, Bottom Left, Center, Bottom Center - Adjust the position of the links. This tweak also affects the position of the Index description.
  • Layout: Inline, Stacked - Display the links horizontally or vertically. 
  • Max Width
  • Tablet: Max Width
  • Mobile: Max Width
  • Link Spacing - Adjust the space between links.
  • Tablet: Link Spacing
  • Mobile: Link Spacing
  • Padding - Adjust the space between the menu links and the description.

Index Typography

Adjust the Index's navigation links and description.

  • Menu Font
  • Menu Font Min - Learn more about scaling fonts.
  • Menu Color
  • Menu Active Color
  • Menu Link Style: Background, Underline on Hover, Strikethrough on Hover, None
  • Menu Link Background Color
  • Menu Link Underline Weight
  • Description Font
  • Description Font Min - Learn more about scaling fonts.
  • Description Color

Index Description Options

Style the Index page description.

  • Show Description - Uncheck to hide the description.
  • Position: Top, Middle - Adjust where the description displays. The position of the Index navigation links also affects this.
  • Max Width
  • Tablet: Max Width
  • Mobile: Max Width
  • Menu/Desc Spacing - Adjust 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.

Gallery

The Gallery Page presents your images in a full page grid format with multiple layout options.

Gallery Layout Options

  • Style: Horizontal, Stacked, Masonry - Adjust the layout.
  • Spacing - Add or reduce space between each image.
  • Landscape Full-width When First - Landscape-oriented images display full-bleed except in rows that start with a portrait-oriented image. Available with Style: Horizontal

Gallery Overlay

Adjust the Gallery overlay, which can display an overlay color, the page title, and the page description. Other pages on your site have separate overlays.

  • Show Gallery Overlay: Always, In Index, Not In Index, Never - Choose which pages your overlay displays on.
  • Overlay Color
  • Use Gradient for Overlay - Check to enable a second color and blend mode options.
  • Overlay Color 2
  • Overlay Blend Mode: Normal, Multiply, Screen, Overlay
  • Overlay Opacity - Adjust the overlay's transparency. To make the color disappear, set the opacity to 0.

Gallery Overlay Options

Adjust the page title and description options. 

  • Title/Desc Position: Top Left, Top Center, Left, Center, Bottom Left, Bottom Center
  • Show Gallery Title - Uncheck to hide the page title.
  • Title Max Width
  • Tablet: Title Max Width
  • Mobile: Title Max Width
  • Title/Desc Padding
  • Title/Desc Spacing
  • Show Gallery Desc - Uncheck to hide the page description.
  • Desc Width
  • Tablet: Desc Width
  • Mobile: Desc Width
  • Gallery Title/Desc Spacing

Gallery Overlay Typography

Adjust the page title and description fonts. 

  • Title Font
  • Title Font Min - Learn more about scaling fonts.
  • Title Color
  • Title Background
  • Title Background Color
  • Description Font
  • Desc Font Min - Learn more about scaling fonts.
  • Description Color

Gallery Caption Typography

Adjust the image titles and descriptions

  • Image Title Font
  • Image Title Font Min - Learn more about scaling fonts.
  • Image Title Color
  • Image Title Background
  • Image Title Background Color
  • Image Description Font
  • Image Description Font Min - Learn more about scaling fonts.
  • Image Description Color

Gallery Caption Options

Adjust the image titles and descriptions

  • Captions Display: Always, On Hover
  • Caption Indicator Position: Bottom Left, Bottom Right - Position the circle you hover over to display on-hover captions.
  • Caption Indicator Color
  • Captions Position: Left, Bottom Left, Center, Bottom Center
  • Captions Below Image - Available with Style: Stacked and Captions Display: Always.
  • Captions Spacing
  • Captions Width
  • Tablet: Captions Width
  • Mobile: Captions Width
  • Captions Overlay Color
  • Captions Overlay Blend Mode (No IE Support): Normal, Multiply, Screen, Overlay - Choose a blend mode.
  • Captions Overlay Opacity

Album Options

These tweaks appear when you’re on an Album Page.

  • Album Text Color
  • Hide Album Share Link

Blog

Tremont, Camino, Carson, and Henson use the standard grid/stacked Blog Page.

Blog: Metadata

You can display up to two metadata elements on Blog Pages and blog posts.

  • Primary: None, Category, Author, Date, Location, Tags, Comments
  • Secondary: None, Category, Author, Date, Location, Tags, Comments

Blog: List

  • Style: Grid, Stacked
  • Posts Per Row (Max)
  • Spacing 
  • Show Separator - Add or remove a line between stacked posts.
  • Separator Width
  • Separator Color
  • Alignment: Left, Center, Right
  • Item Spacing
  • Show Image
  • Image Aspect Ratio
  • Max Image Width
  • Show Title
  • Show Excerpt
  • Show Post Body
  • Read More Link: Hide, Inline, Below Text
  • Metadata - Options for Blog Page: Above Title, Below Title, Below Content. Options for blog post: Above Title, Below title
  • Show Pagination Label
  • Show Pagination Arrows
  • Pagination Arrow Weight: Hairline, Light, Medium, Heavy

Blog: Item

  • Alignment: Left, Center, Right
  • Item Spacing
  • Metadata: Above Title, Below Title, Below Content
  • Share Icons: Above Content, Below Content
  • Show Pagination Arrows
  • Show Pagination Label
  • Show Pagination Title
  • Pagination Meta: Hide, Category, Author, Date, Location, Tags, Comments
  • Pagination Arrow Weight: Hairline, Light, Medium, Heavy

Blog: Typography & Colors

  • List Title Font
  • Item Title Font
  • Title Color
  • Meta Font
  • Meta Color
  • Excerpt Font
  • Excerpt Color
  • Read More Link Font
  • Read More Link Color
  • Pagination Label Font
  • Pagination Label Color
  • Pagination Arrow Color  

Events

These tweaks appear when you’re on an Events Page. For general help, visit Styling the Events Page.

  • Disable Item Pages  
  • Show Past Events  
  • Show Thumbnails  
  • Thumbnail Size
  • Show Date Tag  
  • Show Date Tag w/ Time  
  • Show Categories  
  • Show Date  
  • Show Time  
  • Show Location  
  • Show Export Links  
  • Show Social Buttons  
  • Show Excerpt  
  • Show Button  
  • Show Back Link  
  • 24-Hour Time  
  • Stacked View
  • Show Icons  

Products

These tweaks appear when you’re on a Products Page. Learn more at Styling the Advanced Products Page.

Products: Layout

  • Items Per Row  
  • Item Spacing  
  • Image Aspect Ratio
  • Item Hover Behavior: Show Alternate Image, Fade, None
  • Spacing  
  • Top Padding  
  • Nav Display: Breadcrumb Only, Pagination Only, Breadcrumb and Pagination, None
  • Pagination Style: Previous/Next, Titles
  • Nav Alignment: Left, Center, Right, Split  
  • Nav Font  
  • Nav Color  
  • Nav Separator Color  

Products: Details

  • Position: Under, Overlay
  • Position (Mobile): Under, Overlay
  • Alignment - Options under image: Center, Left. Options for overlay: Top-Left, Top-Center, Top-Right, Center-Left, Center-Center, Center-Right, Bottom-Left, Bottom-Center, Bottom-Right.
  • Overlay Color  
  • Overlay Padding  
  • Spacing  
  • Show Title  
  • Title Font  
  • Title Color  
  • Title Color (Mobile)  
  • Title Spacing  
  • Show Price  
  • Price Font  
  • Price Color  
  • Price Color (Mobile)  
  • Sale Price Color  
  • Sale Price Color (Mobile)  
  • Price Spacing  
  • Alignment: Left, Center, Right
  • Spacing  
  • Show Title  
  • Title Font  
  • Title Color  
  • Show Price  
  • Price Font  
  • Price Color  
  • Sale Price Color  
  • Show Excerpt  
  • Excerpt Position: Above Price, Below Price, Below Add to Cart Button
  • Excerpt Font  
  • Excerpt Color  
  • Excerpt Link Color  
  • Show Share Buttons  

Products: Sort + Filter

  • Display: Hide, Top, Left Side, Right Side
  • Width  
  • Margin  
  • Item Spacing  
  • Alignment: Left, Center, Right
  • Font  
  • Color  
  • Active Color

Products: Gallery

  • Position: Left, Center, Right
  • Design: Slideshow, Stacked
  • Width  
  • Aspect Ratio
  • Thumbnail Alignment: Left, Center, Right
  • Thumbnail Width  
  • Thumbnail Spacing  
  • Spacing  

Products: Options

  • Show Variants
  • Show Quantity  
  • Style: Text-Only, Square, Rounded, Pill
  • Border Color  
  • Background Color  
  • Label Font  
  • Label Color  
  • Font  
  • Text Color  

Products: Add To Cart Button

  • Show Button
  • Style: Solid, Outline, Raised
  • Shape: Square, Rounded, Pill
  • Padding: Small, Medium, Large
  • Color  
  • Text Color  
  • Font  

Products: Image Zoom

Learn more at Product Image Zoom.

  • Enable Image Zoom
  • Zoom Factor  
  • Zoom Activates On: Hover, Click
  • Enable Lightbox  

Products: Status Badges

  • Style: Rectangle, Square, Circle, None
  • Sale Color  
  • Sold-Out Color  
  • Font  
  • Padding  
  • Position: Top-Left, Top-Center, Top-Right, Center-Left, Center-Center, Center-Right, Bottom-Left, Bottom-Center, Bottom-Right
  • Inset: Floating, Flush, Dock Vertically, Dock Horizontally
  • Inset Size  

Products: Quick View Button

Learn more at Product Quick View.

  • Style: Bar, Floating, Docked
  • Color  
  • Font  
  • Padding  
  • Position: Top, Center, Bottom
  • Inset Size  

Products: Quick View Lightbox

Learn more at Product Quick View.

  • Padding  
  • Overlay Color  
  • Background Color
  • Excerpt Display: Truncate, Hide
  • Controls: Show Arrows  
  • Controls: Show Close Button  
  • Controls Color  
  • Controls Weight: Hairline, Light, Medium, Heavy
  • Controls Size

Share Buttons

These advanced Share button tweaks appear when you’re on a blog post or product item page. Different tweaks appear depending on which Style option you choose.

  • Style: Icon Only, Solid, Outline, Raised
  • Show Icons
  • Show Labels
  • Show Counts
  • Rounding
  • Size
  • Spacing
  • Border: Width
  • Border: Color
  • Icons: Standard Color
  • Icons: Custom Color
  • Background: Standard Color
  • Background: Custom Color  
  • Label: Font  
  • Label: Color  
Was this article helpful?
1 out of 2 found this helpful
Tremont Style Editor tweaks