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

With templates in the Brine family, you can create a professional web presence for any brand or company. Customize the headersfooter, content inset, and mobile styles to make your site stand out. Add full-bleed banners to any page, or stack them in the Index. Optional parallax scrolling moves banners more slowly than the page content, creating an illusion of depth and immersion.

This guide covers the features and design options for the Brine family. See a list of Brine's templates.

Style your site in the Site Styles panel. In this guide, style tweaks are bold, and link to the list of all Brine tweaks to help you navigate the panel.

Tip: Brine's Live Preview page shows real customer sites using this template.

Supported pages

Brine supports these page types:

Headers

Visitors use the header at the top to navigate your site. In Brine, the header is divided into top and bottom sections.

  • Add elements such as the site title or logo and navigation links to the top and bottom headers in Header: Layout.
  • The bottom header supports a background image and an intro area where you can add your own content.

brine-topbottom.png

Style the headers

Style the top header in Header: Top:

  • Set the height with Padding.
  • Set the color with Background.

The bottom header displays page banners as background images or videos. If there's no banner, the background color is the same as the page (Color in Main).

To change the height of the bottom header:

  • All pages - Change Padding in Header: Bottom and Intro Padding in Main.
  • Individual pages - Add height by adding extra line breaks to the intro area.
  • Index Pages - Change the height of the top Index section.

Add and style header elements

You can add any of the following elements to either header section:

Choose where they display or hide them, in Header: Layout. For example, choose Branding Position: Top Center to add your site title or logo to the middle of the top header.

Style them in each of their Header sections. For example, go to Header: Primary Navigation to choose the font and color of the links.

  • For elements in the bottom header, set their (Overlay) colors so they're visible over banners.
  • Choose if elements in the same area (for example, Bottom Center) stack or not with the Layout tweaks in Header: Top and Header: Bottom.
  • Set their separate mobile styles to ensure they look good on mobile.

More help with headers

Keep tips in mind:

  • For best results, place each element in a different area of the header. Elements may overlap if there isn't enough space.
  • Some tweaks won't display until the elements they affect are added to your site.
  • If the top header has no elements, it won't appear.
  • For more tips, visit Building a site header.

Navigation links

Brine has three navigation areas.

Primary Navigation and Secondary Navigation links:

Footer Navigation links:

Banners

Banners create a visual element that can set the tone for your page. Add page thumbnail images and videos to create banners.

In Brine, banners:

You can stack multiple banners in an Index.

brine-banner.png

Style banners

Use these options to style your banners:

  • Add a color filter with Overlay Color in Main: Overlay.
  • Add text and other blocks, like Button Blocks, in the intro area.
  • To change the height, edit the intro area and add line breaks.
  • Choose if banners scroll slower than the rest of the page with Enable Parallax in Site: Loading.
  • In Site Styes, (Overlay) tweaks affect elements that display over banner images, like text and navigation links.

Cropping and centering

  • If parallax scrolling is enabled, use Parallax Smart Crop in Site: Loading to ensure banners crop the minimal amount.
  • If the images are cut off in a way you don't expect, see our cropping troubleshooting tips.
  • Choose how banner images are centered by changing their focal points.

More help with banners

Keep in mind:

Intro areas

The intro area in the bottom header is a page-specific header area that you can edit with text, images, and other content. This is a great way to customize the top of individual pages.

Intro areas display over page banners and follow the content inset. They're available on all pages except Layout Pages without a banner, and Index Pages.

To edit the intro:

  • Hover over the area above the page content, and click Edit.
  • Add text and other content with blocks.

brine-intro-area.png

Footer

Customize the site-wide footer to help visitors get the answers they need. Brine's footer has:

Style the fonts and colors in the Footer sections. To hide the footer, uncheck Show Footer.

Layout: Columns

A blocks area, the business information, and the navigation display horizontally, with a blocks area above and below. Folders and Index Pages create columns. The Index Page and folders' titles display as headers that aren't links, with the sub-page links below.

brine-footer-columns.png

Layout: Stacked

The business information and navigation stack vertically, with blocks areas above, between, and below. Folder and Index Page titles don't display, and their sub-page links display horizontally.

brine-footer-stacked.png

Index Pages

Brine Index Pages turn the content from multiple pages into stacked sections, so you can highlight different images and information in one location.

brine-index-sections-scroll.gif

Content sections

Content sections are made from Layout Pages. After you add content sections, customize them with blocks.

  • Content inset (optional) creates extra white space around some blocks.
  • If the top section is a content section, it displays in the bottom header.

To set the minimum height for some or all sections, use Apply Minimum Height in Index: Page:

  • Set this for the first section only, pages with banners, all pages, or no pages.
  • Use Padding and Padding (Overlay Pages) to change the height of all sections.
  • If the page content is longer than the minimum height, the section stretches to fit the content, including padding.
  • To change just one section's height, add line breaks to the page content to make it longer.

Add page thumbnails to add a background banner images or videos to sections.

  • Banners can feature parallax scrolling.
  • If there's no banner, the background color is the same as the page (Color in Main).

Index gallery sections are made from Gallery Pages. After you add gallery sections, you can add images and videos.

In Index: Gallery:

  • Choose if all gallery sections display as slideshows or grids with Layout.
  • To change the spacing or create full-bleed effects, uncheck Apply Spacing on Sides and use the Spacing tweaks.
  • Set the shape of images with Aspect Ratio.
  • If there's a gallery section at the top, use Overlay Header on First Index Gallery to choose if it displays behind the bottom header.
  • Add a color filter to images with Image Overlay.
  • Hover Style sets what happens when you hover over an image.

Gallery sections don't have parallax scrolling. If parallax is enabled, they appear to slide over the slower-moving content sections.

Index navigation

To help visitors explore your Index:

  • Use Index: Scroll Indicator to add an arrow, line, or text to the first section to encourage them to scroll down (content sections only).
  • Add navigation dots or lines with Style in Index: Navigation. Clicking a dot or line takes them to the corresponding section.

brine-index-nav.png

Add space below the first section

If your site has a border, you can add a matching line of spacing beneath the first section.

  • Check Mirror Border Below First Page in Index: Page or Mirror Border Below First Gallery in Index: Gallery, depending on the top section's type.
  • The second section must be a content section with no banner.
  • The spacing color is the same as the page (Color in Main). For best results, match this to the border color.

brine-mirror-site-border.png

More help with Indexes

Keep in mind:

Structure and style

Use these options to change the look and feel of your site.

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.

  • Enable or disable Ajax loading with Enable Ajax Loading in Site: Loading.
  • Style or hide the loading bar that displays while pages load with the other tweaks in Site: Loading.
  • Occasionally, Ajax may conflict with custom code, anchor links, and Analytics.
  • For more help, visit Ajax loading.

Border

Add and style a site-wide frame around the header, main content area, and footer with Site: Border tweaks. Cover Pages don't show the border.

brine-border.png

Fonts

Style the fonts on your site with these Site Styles options:

Text links are underlined.

Parallax scrolling

Parallax is a special scrolling effect where background images or videos move slower than the page content. Brine has parallax scrolling for its banners.

Share buttons

You can add Share buttons to most pages. Visitors use these buttons to share content to their social profiles.

  • Blog and Products Pages - Advanced Share buttons
  • Album and Events Pages - Classic Share links

Sidebars aren't supported for Brine. Instead, add extra content to the footer, intro area, and Layout Pages.

Site width

Set the width with the tweaks in Site:

  • Set the width of the content area with Width.
  • The layout you choose with Design sets how the content area displays.
  • The site border also affects the layout.

In the examples below, the Width is set to 880 pixels. The background color of the content area is set in Main.

Design: Full Width

Content displays at the width of the browser, minus the Side PaddingBanners display full-bleed.

brine-full-width.png

Design: Full Background

Content displays at the Width amount, minus the Side PaddingBanners display full-bleed.

brine-full-background.png

Design: Constrained Width

The background color from the Site section displays outside the content area. Banners display in the content area.

brine-constrained-width.png

Content inset

Use the content inset to create eye-catching layouts. When arranged in a single column, some blocks, such as Text and Quote Blocks, display narrower than other page content, such as Image Blocks.

  • This affects all areas where you can add blocks, including intro areas and the footer.
  • Set the width with Content Inset in Main.
  • To remove the inset, set Content Inset to 0.
  • For more help, visit Content inset.

brine-content-inset.png

Background colors

Use the following tweaks to set the background colors for your site:

  • Main content area - Color in Main
  • Side margins - Background in Site
  • Border - Color in Site: Border
  • Top header - Background in Header: Top
  • Bottom header - Matches the main content area, or displays a banner
  • Footer - Background Color in Footer
  • Index sections Matches the main content area, or displays a banner
  • Behind transparent banner images - Overlay Color in Main: Overlay, even if this color is set to transparent
Tip: You can use an Index to create the effect of a page background image.

This example shows many of the background areas:

brine-background-colors.png

Mobile

With Squarespace's built-in responsive design, your site adjusts to look great on any device. In Brine, you can customize how your site appears in mobile devices and narrow browsers.

Choose the browser width where your site switches to mobile view with Mobile Breakpoint in Mobile. The default is 640 pixels.

Mobile header elements display in top or bottom navigation bars.

  • To add a top or bottom bar, move any header element into it. For example, go to Mobile: Branding and choose Position: Top Left to add the top bar.
  • Choose if the top bar is fixed at the top or scrolls up with the page with Fixed Mobile Top in Mobile: Top.
  • The bottom bar is always fixed.
  • Set the background colors in Mobile: Top and Mobile: Bottom.

brine-mobilebars.png

Header elements

Your site's header elements display in the navigation bars and have separate mobile styles.

  • Style them in each of their Mobile sections. For example, style the site title or logo in Mobile: Branding.
  • Navigation collapses to a ☰.
  • Set the navigation background color with Menu Color in Mobile Menu: General.
  • Close Button tweaks in Mobile Menu: General style the X that closes the navigation menu.
  • Social icons and tag lines don’t display on mobile.
  • When tapped, the search icon opens an overlay with a search bar. The overlay background follows the site background color.

Although they have separate styles, the same element displays on both computer and mobile. For example, you:

  • Can - Give your mobile site title a different color and font.
  • Can - Display your search bar on mobile but hide it on a computer.
  • Can't - Display a site title on a computer and a logo on mobile.

More help with mobile

Keep in mind:

Templates in the Brine family

All templates in the Brine family have the same style options and features. You can browse Brine templates in the template store.

The Brine family includes:

  • Aria
  • Basil
  • Blend
  • Brine
  • Burke
  • Cacao
  • Clay
  • Custom Template (sites made with the custom site builder)
  • Ethan
  • Fairfield
  • Feed
  • Foster
  • Greenwich
  • Hatch
  • Heights
  • Hunter
  • Hyde
  • Impact
  • Jaunt
  • Juke
  • Keene
  • Kin
  • Lincoln (discontinued)
  • Maple
  • Margot
  • Marta
  • Mentor
  • Mercer
  • Miller
  • Mojave
  • Moksha
  • Motto
  • Nueva
  • Pedro
  • Polaris
  • Pursuit
  • Rally
  • Rover
  • Royce
  • Sofia
  • Sonny
  • Sonora
  • Stella
  • Thorne
  • Vow
  • Wav
  • West

Customer examples

To see examples of real customer sites, click the links below and scroll to Customers Using This Template. Since all templates in this family have the same features, you can use these as inspiration even if your template isn't in the list below.

Language options

Brine supports two language options:

Was this article helpful?
98 out of 185 found this helpful