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

The Brine template family consists of multiple templates that all share the same options for layout and design. The directions in the Brine guides apply to all templates in this family.

This guide offers an overview of the Brine family's features. See our other Brine guides for information about building and customizing specific parts of your site. 

Tip: If you haven't picked a template yet, visit Getting started with Squarespace. If you've already created a site, you can switch your template at any time.

Special features

With templates in the Brine family, you can create a professional web presence for any brand or company, from a new boutique to an established retail business.

Parallax scrolling Index Page

The vertically-stacked Index Page uses parallax scrolling to create an illusion of depth and immersion.

Great for commerce

Advanced Commerce features include Quick View, product zoom, and on-hover effects. 

Multiple navigation areas

These templates support three separate navigation areas, all of which you can style independently.

Customizable mobile styles

Choose how your site appears on smartphones and other reduced-width browser windows.

Modern Blog Page

With two adjustable layout options, the Blog Page puts the emphasis on your images, videos, and content.

Content inset

special inset for text and certain other blocks helps you create eye-catching layouts.

Site languages

In the Brine family, you can choose the language for your site's built-in text, such as submission forms and the Order Confirmed message.

If you haven't created a site yet, you can start with a FrenchGerman, ItalianPortuguese, or Spanish template.

Gafas_de_sol.png

Templates in the Brine family

Tip: To see which template you're using, visit the Template panel

The following templates are in the Brine family. All these templates share the same underlying structure and functionality. You can browse Brine templates in the template store.

  • Aria
  • Basil
  • Blend
  • Brine
  • Burke
  • Cacao
  • Clay
  • 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

Quick start

Certain tweaks and settings can make a big impact on how your site looks and behaves. Play with the following options until you settle on a design you love.

To open any panel, press the ? key and search for its name.

Site

From the Home Menu, click Design, then Style Editor.

These are some key tweaks that affect the whole site:

  • Header: Layout > Position tweaks
  • Header: Top > Background
  • Header: Primary Navigation > Style
  • Site: Border > Show Border
  • Main > Color
  • Footer > Layout

Index 

An Index is a page of stacked sections. To get a feel for how your Index works:

  1. From the Home Menu, click Pages.
  2. Click + and add an Index Page.
  3. Click Add Section and add:
    • Two Content sections
    • One Gallery section with at least 3 images
  4. In the left panel, hover over over one of the content sections and click the gear-icon. Add a thumbnail image in the Media tab.

Next, go to the Home Menu and click Design, then Style Editor. Here are some key tweaks:

  • Index: Gallery > LayoutAspect Ratio, and Spacing
  • Index: Gallery > Hover Style and Image Overlay
  • Main: Content Colors > Body Text and Body Text (Overlay)  

Banner

Banners are images or videos that display at the top of your page.

  1. From the Home Menu, click Pages.
  2. Next to Primary Navigation, click the +, then click Page.
  3. Give the page a thumbnail image.
  4. Hover over the area below the header and click Edit to add some text to the Intro area. Hover below that and click Edit to add Page Content text.

You can add a banner like this to any Album, Blog, Events, Gallery, Products, or Regular Page on your site. You can also add a video URL instead of the page thumbnail to create a video banner.

Next, open the Style Editor. Here are some key tweaks:

  • Header: Layout > Position tweaks - Try adding at least one header element to the Bottom header.
  • Main: Overlay > Enable Parallax and Overlay Color
  • Main: Content Colors > Body Text (Overlay)
Tip: Save and refresh after each change for best results.

Blog

First, create a Blog Page and add blog posts with thumbnail images. Then go to your Blog Page and open the Style Editor. Here are some key tweaks:

  • Blog: List > Style and Image Aspect Ratio
  • Blog: List > Metadata
  • Blog: Metadata > Primary and Secondary
  • Blog: Typography & Colors > Title Color

Switch between excerpts and full post within Blog Page settings.

Mobile

Use Device View to see what your site looks like on mobile. Here are some key tweaks:

  • Mobile: Menu Icon > Menu Icon and Menu Icon Position
  • Mobile: Top > Fixed Mobile Top
  • Mobile: Top > Top Background 
  • Mobile: Branding > Font or Logo Width

Customer examples

To see examples of real customer sites, click the links below and scroll to the Customers Using This Template section. 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:

Next steps

For more help customizing specific parts of your site, visit our Brine guides:

Was this article helpful?
69 out of 135 found this helpful
Using the Brine template