Brine template family

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

Brine template family

Last updated January 22, 2024 23:08

The styles and features of the Brine template family.

With templates in the Brine family, you can create a professional web presence for any brand or company. Customize the headers, footer, 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 and the section they appear under in the Site Styles panel are bold.

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 the Header: layout section of site styles.
The bottom header supports a background image and an intro area where you can add your own content.

Style the headers

Style the top header with these Header: top tweaks:

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 (set using the Color tweak under Main).

To change the height of the bottom header:

All pages - Change the Padding under Header: bottom and the Intro padding tweak under 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 the Header: layout section of site styles. For example, choose Branding position: Top center to add your site title or logo to the middle of the top header.

Style them using the tweaks 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:

Can display in the top or bottom header.
Are styled using the Header: primary navigation and Header: secondary navigation style tweaks. For example, choose Style: button to style primary or secondary navigation links as buttons.

Footer navigation links:

Display in the site footer.
Are styled with Footer: navigation tweaks.

Banners

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

In Brine, banners:

Display for layout pages and collection pages.
Become backgrounds for the bottom header.
Display full-bleed, except with the Design: constrained layout.
Can scroll slower than the rest of the page with parallax scrolling.
Don't display for collection items (like blog posts, product items, and individual events).

You can stack multiple banners in an Index.

Style banners

Use these options to style your banners:

Add a color filter with the Overlay color tweak under 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 the Enable parallax tweak under Site: loading.
In site styles, (Overlay) tweaks affect elements that display over banner images, like text and navigation links.

Cropping and centering

If parallax scrolling is enabled, use the Parallax smart crop tweak under 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. To ensure your image stays in view while scrolling, set the focal point near the center of the image.

More help with banners

Keep in mind:

The first image in a gallery page automatically becomes the banner image if there isn't one. Replace or delete it in page settings.
Create the effect of a slideshow page banner with an index with a slideshow gallery.
For general help, visit Adding banner images.

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.

The intro area can display extra padding while you're editing your site. To see how the intro spacing appears on your live site, save your changes and view the page in preview mode.

Footer

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

Three blocks areas you can customize with your own content.
An area that displays your business information.
Footer navigation links.
Two layout options (use the Layout tweak under Footer).

Style the fonts and colors with the Footer tweaks. 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. In the footer, dropdowns and index pages don't create drop-down menus, but rather columns. The index page and dropdowns' titles display as headers that aren't links, with the sub-page links below.

Layout: stacked

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

Blog pages

The Brine 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

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

Content sections are great for displaying text, buttons, and other blocks.
Gallery index sections showcase images in a grid or slideshow format.

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 under 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 featured images 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 (set using the Color tweak under Main).

Gallery index sections

Gallery index sections are made from gallery pages. After you add gallery index sections, you can add images and videos.

In the Index: gallery section of site styles:

Choose if all gallery Index 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 the section at the top is a gallery, 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 index sections don't have parallax scrolling. If parallax is enabled, they appear to slide over the slower-moving content sections.

Videos in a gallery index section display a featured image. If your video doesn't have a featured image uploaded, the index displays a black box with a line through it. To fix, this add a featured image to your video.

To help visitors explore your Index:

Use the Index: scroll indicator tweak 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 the Style tweak under Index: navigation. Clicking a dot or line takes them to the corresponding section.

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 the Mirror border below first page tweak under Index: page or the Mirror border below first gallery tweak under 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. For best results, match this to the border color.

More help with Indexes

Keep in mind:

Index pages don't have intro areas, and the intro areas for sub-pages don’t display.
In header navigations, index pages create a single link.
In footers, index pages display all their sub-page links.
You can use an index to create a slideshow banner or full-page background image.
See our tips on adding other types of content.
Visit Using index pages for more help.

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 the Enable Ajax loading tweak under Site: loading.
Style or hide the loading bar that displays while pages load with the other Site: loading tweaks.
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.

Fonts

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

Site fonts - Content: fonts and Content: colors
Text on banners - All (Overlay) tweaks
Gallery index sections - Index: gallery
Header elements - In their Header sections (for example, Header: branding)
Product pages - Products
Blog pages - Blog: typography & colors

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.

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

Blog and store 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 the Main section of site styles.

Design: full width

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

Design: Full Background

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

Design: constrained width

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

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 under Main.
To remove the inset, set Content inset to 0.
For more help, visit Content inset.

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:

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 tweak under Mobile. The default is 640 pixels.

Navigation bars

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 the Mobile: branding section of site styles 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 the Fixed mobile top tweak under Mobile: top.
The bottom bar is always fixed.
Set the background colors with the Mobile: top and Mobile: bottom tweaks.

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

Style them in each of their Mobile sections of site styles. For example, style the site title or logo with the Mobile: branding tweaks.
Navigation collapses to a ☰ icon. Both the primary and secondary navigation display when the ☰ is tapped.
Set the navigation background color with the Menu color tweak under Mobile menu: general.
Close button tweaks in Mobile menu: general style the X that closes the navigation menu.
Social icons and taglines 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:

Store pages have mobile style options.
Index navigation disappears on mobile.
Parallax scrolling works on mobile.
Video banners sometimes won't load for slow connection speeds and old browser versions. Set a mobile fallback image to appear when the video banner can't load.
Long headings hyphenate and break to the next line.
Unlike some templates, you can’t disable mobile styles.
See our troubleshooting tips for mobile banner and background image cropping issues.
See our general tips for how sites behave on mobile devices.

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 version 7.0 template store.

The Brine family includes:

Language options

Brine supports 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.

Was this article helpful?

311 out of 542 found this helpful

Report malware

Report phishing or pharming

Report spam

Report Whois contact inaccuracy

The styles and features of the Brine template family.

Supported pages

Headers

Style the headers

Add and style header elements

More help with headers

Navigation links

Banners

Style banners

Cropping and centering

More help with banners

Intro areas

Footer

Layout: columns

Layout: stacked

Blog pages

Index pages

Content sections

Gallery index sections

Index navigation

Add space below the first section

More help with Indexes

Structure and style

Ajax loading

Border

Fonts

Parallax scrolling

Share buttons

Sidebar

Site width

Design: full width

Design: Full Background

Design: constrained width

Content inset

Background colors

Mobile

Navigation bars

Header elements

More help with mobile

Templates in the Brine family

Language options

Related articles