The style and features of the Montauk template family.
The Montauk template family (Julia, Kent, Montauk, Om) features page banners and a versatile thumbnail navigation Index, putting your information, products, or love story in the spotlight.
This guide covers the features and design options for the Montauk family. Site styles tweaks and the section they appear under in the Site Styles panel are bold.
Supported pages
Montauk supports these page types:
- Album pages
- Blog pages - List
- Cover pages
- Events pages
- Gallery pages - Stacked
- Index pages - Grid
- Layout pages
- Store pages - Classic
Header
Visitors use the header at the top to navigate your site. In Montauk, the header has the site title or logo, top navigation links, and a customizable area called the header subtitle.
- Set the layout with the Canvas style tweak under Options.
- For left and right layouts, use the Stack navigation tweak under Options to stack the navigation links.
- Change spacing in the header and between navigation links with the Sizes & values tweaks.
Choose what displays in the header subtitle with the Header subtitle tweak under Options.
- Address displays the address and phone number from the Physical location fields of Business information.
- Tagline displays your site’s tagline.
- Choose Custom to add text or other content. Exit site styles and double-click the placeholder "Your custom text here" text to replace it with blocks.
Border
Add a border around your entire site and at the top and bottom of the main content.
- Set the color with the Page border color tweak under Colors.
- Set the thickness with the Page borders tweak under Options.
- Hide the border by choosing the Page borders: none tweak under Options.
- If the Canvas style is set to Masthead logo left or right, the outside border won't display.
Background
In the Colors section of site styles:
- Set the site background color with Site background, or add a background image with Site background image.
- Set the background of your main content area and site header with Canvas background.
- The site background color may display briefly before the background image loads.
- Use the Canvas background opacity slider to let the background show through, as shown below.
Tip: The border displays around the canvas.
Footers
Montauk has three footers, which you can customize with blocks.
Page footers are unique to individual pages.
- Collection items (like blog posts) each have their own footer.
- Page footers don't display for Gallery and Layout Pages opened from an Index.
There are two site-wide footers:
- Info footer - Choose if this shows with the Hide info footer tweak under Options. Hide its built-in social icons with Hide social icons.
- Bottom footer
Page banners
You can create a banner with a text overlay at the top of blog, events, index, and layout pages. Add banners in page settings with featured images or video URLs.
- Use the Options section of site styles to choose if banners, page titles, and divider lines appear.
- When layout pages are opened from an index, banners don't display.
- Video banners require a mobile fallback image to display.
Width and height
The width and height are fixed:
- Width - Page banners always display at the width of the canvas area.
- Height - The height is set by the image (or mobile fallback image, for video banners). You can change this with the built-in image editor. To create a uniform look, ensure all your banner images have the same aspect ratio.
Banner text
Page titles and descriptions can display over banners.
- The page must have a banner image or video for the text to appear.
- Descriptions don't display on browsers smaller than 767 pixels wide.
- The text color matches the canvas background (Canvas background under Colors).
- Style the fonts with the Page title and Page description tweaks under Typography.
- Pages titles have a fixed size on narrower browsers.
- To use different text for search results, add an SEO title and description.
To hide the text on all pages, check the Hide page banners tweak. You can also delete descriptions for individual pages from page settings.
Blog pages
Montauk blog pages display as a list of vertically-stacked posts.
On the landing page:
- The page featured image creates a banner image.
- Dates and author names display above each post. Other metadata displays below.
- Promoted image, video, and gallery blocks display below the post title for posts with excerpts.
- Excerpts display "Read more" links.
- The full content of individual posts displays under the title for posts without excerpts.
- Blog pages support a sidebar, banner, and page footer.
On individual posts:
- The blog page featured image creates a banner image.
- Dates and author names display above each post. Other metadata displays below.
- Navigation for previous and next posts displays below the comments.
Style blog pages
Change the colors of the post title, text, and metadata with the Heading 1 color, Text color, and Blog meta color tweaks under Colors.
In the Blog styles section of site styles:
- Choose if the author shows with Hide article author.
- Change the space between posts with Blog post spacing.
- Change the title font with Blog post title.
Blog sidebar
A sidebar displays on landing pages and posts. Customize it with blocks. If you have multiple blogs on your site, the same sidebar displays on all of them. The sidebar scrolls up with the page.
In the Blog styles section of site styles:
- Enable the sidebar and choose where it displays with Blog layout.
- To hide the sidebar, choose Blog layout: center.
- Set the size of the sidebar with Blog sidebar width.
Tip: If your sidebar is blank when you first enable it, exit site styes, hover over the top corner of the blog page, and click the Sidebar content edit annotation.
Gallery pages
Montauk gallery pages stack images and videos vertically. The page title and description display on one side, with images on the other. Style gallery pages with the following Index styles tweaks:
- Flip the layout with Project layout.
- Change the image size by adjusting Index sidebar width.
Gallery text
For page titles and descriptions:
- Set the title font with the Index thumb titles tweak under Index styles.
- Control the title size with the Heading 2 tweak under Typography.
- The description text follows the Body text tweaks.
- To use different text for search results, add an SEO title and description.
- To hide the text, delete the title or description from page settings. If you do this, add an SEO title and description. These won't show on your site, but are helpful for SEO.
Image titles and descriptions display below each image.
- The text follows the Body text tweaks.
- Image titles are always bold.
- To hide the text, remove the title or description in the image's editor.
More help with gallery pages
- Add custom content at the bottom with page footers.
- Navigation appears at the bottom when the page is opened from an Index.
- Montauk doesn't support clickthrough URLs, deeplink URLs, or lightbox functionality.
- Page banners don't display.
- To create a different layout, use a Layout Page with a gallery block.
Index pages
Montauk Index pages create thumbnail grids that visitors can use to explore different pages.
- The navigation grid displays page featured images. Even if a page has a video banner, its featured image displays in the grid.
- Page titles display below the thumbnails.
- You can add a page banner and per-page footer.
- On mobile, index pages display one thumbnail per row.
Supported pages
You can add the following pages to an Index:
- Layout pages
- Gallery pages
- Blog pages
- Event pages
- Store pages
- Album pages
Style the index
Style index pages with the following Index style tweaks:
- Set the page title color with Index thumb title color.
- Choose how many thumbnails display horizontally with Thumbnails per row.
- Set the height of the thumbnail images with Thumbnail ratio.
- Choose how much of the background color shows through with Thumbnail opacity.
- Choose how much the thumbnail fades when a visitor hovers over it with Thumbnail hover opacity.
Gallery and layout pages in indexes
Gallery and layout pages opened from an Index have special formatting:
- The top of the page displays at the top of the browser. Visitors can scroll up to see the site header.
- Clickable thumbnails for the other pages in the Index display below the page content, along with navigation elements.
- Banners don't display on layout pages. If the index page has a banner, that displays instead. Otherwise, there's no banner.
- The URL includes a hashtag (#). The special formatting doesn't display if the URL doesn't include the #.
Page titles and descriptions
Page titles and descriptions can display:
- Over the page banner for layout, blog, events, and index pages.
- On the page for gallery pages.
Social icons
The info footer has optional built-in social icons.
Tip: Montauk's demo content includes a removable social links block in the bottom footer.
Fonts
For text on your site:
- Style the fonts and sizes with the Typography tweaks.
- Style the colors with the Colors tweaks.
Sidebar
Montauk has a sidebar on blog pages and posts.
Mobile
With Squarespace's built-in responsive design, your site adjusts to look great on any device.
- The navigation displays as a Menu link in the top center.
- The Menu link always displays on mobile, even if the Top Navigation is empty.
- The menu background follows the Canvas background tweak under Colors.
- Gallery images stack beneath the page description text.
- You can disable mobile styles, but we don't recommend it.
Banners may look different on mobile:
- Page descriptions don't display on smartphones and browsers smaller than 767 pixels wide.
- Video banners sometimes won't display on mobile, depending on the visitor's connection speed and browser version. Set a mobile fallback image to appear when the video banner can't load.
- See our troubleshooting tips for mobile banner and background image cropping issues.
Language options
Within this family, the Julia, Kent, and Om templates support two language options:
- Choose the language for your site's built-in text, such as submission forms and the order confirmed message.
- Start a new site with a French, German, Italian, Portuguese, or Spanish template.
Troubleshooting Montauk
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.
Can people RSVP through our site?
You can create an RSVP button on a layout page using a form block. This block collects information from visitors. Ensure Enable lightbox mode is checked in the Advanced tab of the form block editor. Lightbox mode sets the form to open when a button is clicked instead of on the page itself.
For an example of how this looks in practice, see the Naomi template's demo content:
How do I change the font of the header on my gallery page?
The font and size of the header on the gallery page are controlled by two different tweaks:
- Use the Index thumb titles tweak in the Index styles section of site styles to adjust the font.
- Use Heading 2 in the Typography section to adjust the size.
How do I recreate the classes or workshops pages from the Om demo content?
The classes page is a Layout Page that's been customized with form blocks. To incorporate booking, visit Adding online booking to your site.
The workshops page shown in the demo content is an events page. Visit Events pages for more help.
How do I recreate the registry page from the Julia demo content?
The registry links in the demo content are created on a Layout Page with a grid gallery block, using images with clickthrough URLs.
How do I update my business information?
Your business information can display as a subtitle in your site header. This comes from the Physical location section of your Business information panel.
To edit this:
- Open the Settings panel and click Business information.
- Scroll down to Physical location and update the information.
- Click Save.
Note that changes to the Business address fields won't appear in the subtitle.
My mobile menu won't open
The mobile menu won't open if you added a video banner to the homepage using an invalid URL or an embed code. To edit the video URL:
- Open the Pages panel.
- Hover over the homepage title in the left panel and then click
. - Click the Media tab, then click the Video tab.
- Confirm the Video URL field contains a valid URL.
.My background image isn't fixed on mobile
Many mobile browsers, including iOS, don't support fixed background images. For a similar effect, experiment with the Size: cover and Size: contain background image style options. Note that background image style settings apply to both mobile and computer.
For more help, visit our responsive design troubleshooting tips.
My info footer disappeared
If the info footer's Edit annotation doesn't appear:
- Open the Site styles panel.
- Scroll to the Options section.
- Uncheck Hide info footer.
- Click Save.
- Exit site styles and refresh the page. The annotation should appear.
My line block isn’t displaying
The color of the line block color is set with the Page border color tweak in the Colors section of site styles. Ensure the transparency is opaque to keep all lines and borders visible.
My navigation is split into two lines
If the links in your top navigation won’t fit on just one line, the top navigation will break to a second line.
If you’ve selected Canvas style: masthead logo right or Masthead logo left, and the top navigation is too long to display next to the site title or logo, the top navigation will move below it.
If you don’t like the way your top navigation looks, there are several ways to adjust the formatting:
- Reduce the number of pages within the navigation. One method is to use a dropdown.
- Rename the pages to be shorter in length.
- In the Sizes & values section of site styles, reduce the Navigation link spacing to bring the links closer together, or increase the Side width to increase the width of the whole site.
My page title and description size isn't changing
Page titles and page descriptions have a fixed font size in browsers narrower than 1041 pixels. Depending on the size of your screen, the preview window may not be wide enough while you're in Site Styles to see the size changes you're making.
If this is the case, save your changes, exit site styles, and open the full preview to see the updated page title and description height. You can also save changes and view your site in a separate private browser window.
My page title looks larger in narrower browsers
Page titles display over banners. For browsers narrower than 1041 pixels, they have a fixed size:
- 767 pixels or narrower - Font size is 21px
- 768 - 1040 pixels - Font size is 52px
In browsers 1041 pixels or wider, set the size with the Page title tweak in the Typography section of site styles.
My page title won’t display
A page title in Montauk must appear over a page banner. If your page title isn’t displaying:
- Ensure you have a featured image or video URL set for that page.
- In the Options section of site styles, ensure Hide info footer and Hide page banner are both unchecked.
My video banner won't display
If your video banner isn't displaying, add a mobile fallback image:
- Open page settings.
- In the Media tab, click Video.
- Scroll down and add an image to the image uploader.
- Click Save.
Keep in mind:
- The height of the mobile fallback image sets the height of the banner.
- For index pages, the video creates a banner on the index landing page; index grid thumbnails don't display videos.
There’s a horizontal line through my top navigation and like and share buttons
This line is visible when the Canvas background tweak in the Colors section of site styles is transparent or partially opaque. You can change the Canvas background tweak, or make the Page border color transparent to hide the line completely.
Why does my footer have two sets of social links?
The Montauk template has two built-in options for displaying social icons: as part of the info footer, and with a social links block in the bottom footer (part of the demo content).
By default, the info footer and its social icons are hidden, and the social links block displays in the bottom footer.
- Info footer: Uncheck Hide info footer in the Options section of site styles to display the icons. Then use the Social icon style tweak to change how they look, or use the Hide social icons tweak to hide them.
- Bottom footer: Edit the social links block to change how they look, or delete the block to remove them.