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

Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, and West share the same underlying structure and functionality. This guide applies to all these templates.

 

This guide walks you through the options for adjusting the look and feel of your site. These options are available in the Style Editor.

This is a supplement to the guide Making style changes, which we suggest you read first if you're new to Squarespace.

Tips: In the Home Menu, click Design, then Style Editor. To access tweaks specific to a page, navigate to the Style Editor when on that specific page. 
Note: There are separate mobile styling options for many site elements, including the site title, shopping cart, and search bar.

Supported pages

Add pages to your site to create your site's underlying structure. Pages can appear as links in your site's navigation.

These templates support these page types with template-specific features:

  • Index - Create a long, scrolling page of stacked sections

And these standard pages:

  • Regular Page - A blank page you can customize with blocks
  • Album - Add music and cover art to your site
  • Blog - Style the blog landing page as a grid or a list
  • Events - Create a calendar or list of events
  • Gallery - Style the gallery as a slideshow or grid
  • Products (Advanced) - Sell goods and services with our integrated commerce features
  • Cover Page - A unique landing page styled separately from your template
Tip: If you're new to Squarespace, we suggest you read Understanding the Pages panel and Adding pages to your navigation for an overview of how pages and content work in Squarespace.

Site header

The header at the top of the page sets the tone for your site and plays a big role in how visitors navigate and interact with your content.

Top and bottom sections

The header of your site is divided into a top and bottom section. 

  • The top section displays over a background color. Use the Header: Top section of the Style Editor to adjust the color and padding of the top header.
  • The bottom section displays over the main content background color, or as an overlay over page banners. Adjust the main content background color with the Color tweak in the Main section.
  • Use (Overlay) tweaks to give elements in the bottom header different styles when displaying over background images. For example, you can set them to be black over the background color, but white over page banners.

Header elements and layout

The top and bottom header sections are each divided into three areas: left, center, and right.

The following elements can all display in any area in the site header:

  • Site title or logo (“branding”)
  • Tag line
  • Main Navigation
  • Secondary Navigation
  • Social icons
  • Search bar
  • Shopping cart 

Adjust where each of these elements display (top left, center, or right; bottom left, center, or right) in the Header section of the Style Editor. You can also Hide any or all of them. 

Tip: For best results, place each element in a different area of the header. Elements may overlap if there isn't enough space.
Note: The tag line, navigation, and shopping cart tweaks won't display if those elements don't exist on your site. For example, the shopping cart tweaks appear once you've created a Product Page. 

Change the layout from Horizontal to Stacked with the Left Layout, Center Layout, or Right Layout tweaks. These tweaks appear in the Header: Top or Header: Bottom sections of the Style Editor once you’ve added two or more items to any header area.

Experiment with the layout to find the perfect arrangement for your site’s header. For example, here’s a configuration with the site title in the top-center and search bar in the top-right.

And here’s an example with a logo in the top-left and shopping cart in the top-right.
 

Tip: See below to learn how to adjust the style of each header element.

Site title or logo

Your site title or logo (“branding”) tells the world who you are. Clicking on the branding leads to your homepage. Use the Site Title & Logo panel to change the site title text or replace it with a logo image.

  • Use the Branding Position tweak in the Header: Layout section of the Style Editor to adjust where the branding displays, or to hide it.
  • The Header: Branding section adjusts the font and color of your site title, or the width of your logo. The Color (Overlay) tweak adjusts the color of the site title when it displays over a page banner. 
  • The Mobile: Branding section adjusts how the site title or logo displays on mobile devices.

Tag line

Adding a tag line is a great way to reinforce your brand. Tag line tweaks appear in the Style Editor once you've added a tag line in the Site Title & Logo panel.

  • Use the Tagline Position tweak in the Header: Layout section of the Style Editor to adjust where the tag line displays, or to hide it.
  • Use the tweaks in the Header: Tag Line section to adjust the font and color of your tag line. The Color (Overlay) tweak adjusts the color of the tag line when it displays over a page banner. 

Tag lines don’t display on mobile.

Social icons

Social icons encourage visitors to follow and connect with you. Social icon tweaks appear in the Style Editor once you've connected one or more accounts

  • Use the Social Position tweak in the Header: Layout section to adjust where the icons display, or to hide them.
  • Use the tweaks in the Social Icons section to set the icons' size, style, shape, and color.

Shopping cart

The shopping cart shows customers how many items they’ve added so far, and takes them to checkout when they’re ready to order.

Shopping cart tweaks appear in the Style Editor once you've created a Product Page. Use the Cart Position tweak in the Header: Layout section to adjust where the cart displays, or to hide it.

In the Header: Cart section:

  • Adjust the Font and Color of the icon or text. The Color (Overlay) tweak adjusts the color of the cart when it displays over a page banner. 
  • Style the quantity circle with the Quantity Color and Quantity Text Color.
  • Use the Style tweak to style your cart three ways: as a shopping cart, shopping bag, or text.

The Mobile: Cart section adjusts how the cart displays on mobile devices.

The Icons tweak in the Site section adjusts the line weight of the shopping cart or shopping bag icons. This tweak affects both desktop and mobile display.

Customer accounts link

After you enable customer accounts, you can adjust the style and position of the Sign In / My Account link. Use the Customer Accounts Link Position tweak in the Header: Layout section to adjust where the link displays, or to hide it.

In the Header: Customer Accounts Link section:

  • Use the Style tweak to display the link as text or an icon.
  • Adjust the Font and Color of the text.
  • Adjust the Color of the icon.

The Mobile: Customer Accounts Link section adjusts how the link displays on mobile devices.

Search bar

The search bar enables visitors to search your site. When visitors enter a keyword and hit enter, a search page appears with relevant pages below.

  • Use the Search Position tweak in the Header: Layout section to adjust where the search bar displays, or to hide it.
  • Use the Header: Search section of the Style Editor to adjust the Font and Color of your search bar, and to Style it with an underline, as a rectangle, or as just the icon. 
  • (Overlay) tweaks adjust the style when the search bar displays over a page banner.
  • Uncheck the Show Placeholder Text tweak to hide the "Search" text.
  • Use the Icon Scale tweak to set the size.
  • The Mobile: Search Icon section adjusts how the search icon displays on mobile devices.
  • The Icons tweak in the Site section adjusts the line weight of the search icon. This tweak affects both desktop and mobile display.
Tip: Like any search engine, search results are based on the quality of the content on your site. For best results, add descriptive and accurate titles, descriptions, excerpts, tags, categories, and keyword-rich content across your site.

Main Navigation and Secondary Navigation

The Main Navigation and Secondary Navigation display in the site header. Adjust which pages display as links in your navigation in the Pages panel. To learn how, visit Adding pages to your navigation. Add drop-down menus to the navigation with folders.

Note: Navigation tweaks appear in the Style Editor once you've added pages to the navigation. 

Use the Position tweaks in the Header section of the Style Editor to adjust where the links display or to hide them. 

When you check Inherit Primary Navigation Styles in the Header: Secondary Navigation section, the Secondary Navigation takes the same style as the Main Navigation. Uncheck Inherit Primary Navigation Styles to style it independently.

In the Header: Primary Navigation and Header: Secondary Navigation sections, you can:

  • Adjust the navigation Font and Color, and style Folder drop-down menus.
  • Use the (Overlay) tweaks to adjust the color when the navigation displays over a page banner.
  • Use the Style tweak to affect how the navigation acts on hover (plain, fade, spotlight, or active) or style each navigation link as a Button

In mobile, the Main Navigation and Secondary Navigation display as a menu overlay. To learn more, visit Advanced mobile styles.

Note: The footer has an additional navigation.

Parallax scrolling 

These templates support a special visual effect called parallax scrolling, where elements on the page scroll at different speeds. This effect can be seen:

  • On banners at the top of collection pages.
  • Within an Index, for the background images on content sections. 

In the Main: Overlay section:

  • Use the Enable Parallax tweak to choose whether images parallax scroll.
  • Check Parallax Smart Crop to set how parallax images crop. When this tweak is checked, the images crop the minimal amount.

Page banners

Header banners

You can display an image or video in the bottom section of the header on individual pages, creating a banner above the page content. This is supported on these page types:

  • Album
  • Blog
  • Events
  • Gallery
  • Products
  • Regular Pages

Any header elements in the bottom header display over the banner. You can also add a text overlay with the intro area

To create a banner:

  1. From the Home Menu, click Pages.
  2. Hover over the page title and click the gear icon.
  3. In the Media tab, add a thumbnail image or video URL

Banners don’t display on collection items. For example, they don’t display at the top of the pages for individual blog posts or product items, even if these pages have thumbnail images.

  • If a Gallery Page doesn’t have a thumbnail image or video URL, the first gallery image becomes the banner image. Open Page Settings to remove or replace the thumbnail image.
  • Video banners don't display in mobile. Set a mobile fallback image to display in its place.
  • See our troubleshooting tips for mobile banner cropping issues.
  • Because of how parallax scrolling works, focal point changes may not have a noticeable impact on a banner image's position. Banner videos don't support focal points. 
  • To add height to the banner, edit the intro area and add line breaks (press the return key).
Tip: You can create the effect of a slideshow page banner by creating an Index Page with a slideshow gallery.

Index banners

When you stack Regular Pages within an Index, the thumbnail displays behind the page content for each page.

To learn more, visit Index Pages

Parallax scrolling

Parallax scrolling causes banners to scroll at a different speed than the other elements on the page, creating an illusion of depth and immersion. For general information, visit Parallax scrolling.

Enable or disable parallax scrolling in the Main: Overlay section of the Style Editor. You can also add a color filter to all parallax scrolling banners with the Overlay Color tweak. 

Use the Overlay Content: Colors section to adjust the colors of any body text, headers, links, and lines that overlay parallax scrolling banners in the per-page intro areas.

Intro areas

All pages except the Index support a page-specific header area called the "intro." This is a great way to customize individual pages and introduce the page content to your visitors.

Hover over the intro area and click Edit to add and adjust content with blocks.

On pages with banners, the intro displays over the banner.

Note: Intros don’t display on Index Pages or Index sections.

The intro blocks area follows the content inset. For example, single-column text will be inset on either side, but image blocks display at the site width.

Use the Intro Padding tweaks to adjust the padding above and below the content in the intro area.

Footer

The footer is often where visitors look first for important information such as contact details, FAQs, terms of service, and return policies. The footer in these templates features multiple areas and customization options to help your visitors quickly get the answers they need. For general information, visit Editing footers.

  • The footer is site-wide, meaning the same footer content displays on all pages. To hide the footer, uncheck the Show Footer tweak.
  • Use the Padding tweak to adjust the footer’s spacing.
  • Use the Background Color tweak to adjust the footer's background color.

The footer contains a business information area, a navigation area, and three areas you can customize with blocks.

  • The blocks areas obey the content inset.
  • Use the Layout tweak in the Footer section of the Style Editor to choose the layout.

Layout: Columns

Choose Layout: Columns to arrange the business information, navigation, and one of the blocks areas horizontally, with a blocks area above and below.

  • To set the column width manually, uncheck Auto Width Columns in the Footer section. Then use the Business Info WidthBusiness Hours Width, and Navigation Column Width tweaks in the Footer: Business section to set the width.

Layout: Stacked

Choose Layout: Stacked to stack the business information area and navigation area, with blocks areas above, below, and between.

  • Use the Alignment tweak to align the business information and navigation areas. 

Business information

Use your Business Information Settings to add or adjust your business name, contact details, and business hours.

  1. From the Home Menu, click Settings.
  2. Click Business Information.
  3. Update the Physical Location and Business Hours fields.
  4. Click Save.

To show these details in the footer, go to the Footer: Business section of the Style Editor and check Show Business Info and Show Business Hours

Use the tweaks that appear in this section to adjust the fonts and colors of the business information area.

Tip: In the Name Color and Info Color tweaks that appear, you may need to adjust the transparency to make the business information text visible.

Pages added to the Footer Main Navigation in the Pages panel display in the footer. To learn more, visit Adding pages to your navigation.

Folders

Folders in the Footer Main Navigation can display in one of two ways, depending on which layout option you choose in the Footer: Navigation section of the Style Editor:

  • Layout: Stacked - Folder titles don't display. The sub-pages display as regular navigation links.
  • Layout: Columns - Each folder creates its own column. The folder's name appears as a non-clickable header with the sub-page links below. This is a great way to break footer links into categories to help your visitors navigate to what they need as quickly as possible. 

Style the fonts and colors of navigation and folder headings with the Footer: Navigation section of the Style Editor.

Note: Index Pages behave the same way as folders. Note that the links for Index sub-pages don't take you to the main Index Page.

Blocks areas

The blocks areas are a great place for important text, such as a copyright date, or key links such as a Social Links Block.

Hover over the footer blocks areas and click the Edit annotations to customize it with blocks. One option would be to add a Text Block with your copyright information.

The footer blocks areas follow the content inset. For example, single-column text will be inset on either side, but image blocks display at the site width. To learn more, visit the Content inset part of this guide.

Note: Depending on your template, your blocks areas may contain a Social Links Block or Newsletter Block. Delete the blocks to remove them.

Site width, background, and border

Use the Design tweak in the Site section of the Style Editor to choose the width of your site. Banners always display full-bleed.

  • Design: Full Width - Content displays at the width of the browser, minus the Side Padding
  • Design: Full Background - Content displays at the width set with the Width tweak, minus the Side Padding. The background color chosen in the Main section of the Style Editor extends out to the edge of the browser.
  • Design: Constrained Width - Content displays at the width set with the Width tweak, minus the Side Padding. The background color chosen in the Site section of the Style Editor displays outside the main content area.

Here's an example of a site with a width set to 880 pixels: 

Add a border around your entire site in the Site: Border section of the Style Editor. Check Show Border and then use the tweaks that appear to adjust the width and color.

Content inset

These templates support a content inset feature to help your content stand out. When in a single column, certain blocks display narrower than other page content, condensed in one centered column with white space on either site.

This affects all editable blocks areas, including:

  • Regular Pages
  • Blog posts
  • Intro areas
  • Footer blocks areas

Adjust the column width with the Content Inset tweak in the Main: Content section of the Style Editor. To remove it, set the Content Inset to 0. You can further adjust the column width with the Width and Site Padding tweaks in the Site section.

Tip: There must be at least one affected block on the page for the Content Inset tweak to appear.

The content inset affects most blocks, including:

These blocks aren't affected:

For a list of all affected blocks, visit Content inset.

The content inset particularly emphasizes any floated blocks on the page. To learn how to float blocks, visit Moving blocks.

Share buttons

Special customizable Share buttons display on blog posts and product item pages. These buttons allow visitors to share content to their social profiles in one click, helping to expand your audience and drive more traffic to your site.

To choose which buttons display or to hide them all, go to the Home Menu and click Settings, then Marketing. Then click Share Buttons, and check or uncheck the buttons you want to display. Learn more at Adding Share Buttons.

Use the Share Buttons section of the Style Editor to adjust their size, spacing, color, and style (icon only, solid, outline, or raised). Depending on which style you choose, more tweaks will appear to add labels and adjust the button options.

Navigate to a blog post or product item page to adjust the display settings:

  • Blog post - Use the Share Icons tweak in the Blog: Item section of the Style Editor to change where they display (below content or above content).
  • Product item - Share buttons display with the product details, which you can adjust with the Products: Details section. Hide the icons for product items by unchecking Show Share Buttons.

A Share link with popup Share buttons also appears on the Album Page and Events Page. These Share buttons don’t take on the customized styles. Learn more at Adding Share buttons.

Tip: The Pinterest button only displays on blog posts, product items, and Album Pages that have thumbnail images.

Fonts and font colors

  • Adjust the fonts for body text and headings with the Main: Content Fonts section of the Style Editor.
  • Adjust the colors for body text, headings, links, and lines with the Main: Content Colors section. (Overlay) tweaks affect the for body text, headings, links, and lines that display over banners.
  • Adjust the title and body fonts and colors for galleries in an Index with the Index: Gallery section.
  • Set the font and color for each of the header elements within their individual Header sections.
  • Adjust Product Page fonts with the Products section.
  • Use the Blog: Typography & Colors section to adjust blog fonts and colors.

Ajax loading

Ajax (asynchronous JavaScript and XML) is a special method for site loading, which retrieves server data for specific elements without reloading the whole page. This makes content-heavy pages like your Blog Page much faster and more nimble.

To create a seamless browsing experience, we recommend keeping Ajax loading enabled. Occasionally, Ajax may conflict with embedded custom code. If you’re troubleshooting issues with embedded custom code, you can disable Ajax by unchecking Enable Ajax Loading.  

Use the Site: Loading section of the Style Editor to enable Ajax loading and adjust or hide the loading bar that displays while pages load.

Mobile

Because Squarespace templates are built with responsive design, your site adjusts on mobile devices to better fit the format of that device. These templates have mobile-specific tweaks for an extra layer of customization, including:

  • Add one or two mobile navigation bars
  • Choose whether the top bar is fixed
  • Set separate styles for header icons
  • Adjust where the icons appear
  • Products Pages have mobile style options

Choose the browser width where your site will switch to mobile view with the Mobile Breakpoint tweak. The default is 640 pixels.

Use the tweaks in the Mobile sections of the Style Editor to style how your header elements (branding, navigation menu, shopping cart, and search icon) display when viewed on a mobile device.

Mobile header elements display in customizable top or bottom navigation bars.

  • You can set the color for each navigation bar.
  • Choose whether the top bar is fixed at the top or scrolls up with the page with the Fixed Mobile Top tweak. The bottom bar is always fixed.

If you adjust the opacity of a navigation bar, it displays over a color when you've scrolled to the top or bottom of the page. If the site has a border, it displays over the border color. Otherwise:

  • If the page has a banner, it displays over the site's background color.
  • If there's no banner, it displays over the footer's background color.

To add any element to either navigation bar, scroll down to its Mobile section in the Style Editor (for example, Mobile: Branding) and use the Position tweak to adjust where it displays (left, center, right), or to hide it.

  • Each element can have a unique mobile style.
  • You must choose either a site title or logo to display on both desktop and mobile.
  • Social icons and tag lines don’t display on mobile.
  • When tapped, the mobile search icon opens an overlay with a search bar. The search overlay displays over the site background color.
  • The navigation displays in an overlay. The overlay background color is set with the Menu Color tweak in the Mobile Menu: General section.  

Banners

Banners display normally on mobile in most cases.

  • Video banners don't display in mobile. Set a mobile fallback image to display in place of the banner video on mobile. 
  • See our troubleshooting tips for mobile banner and background image cropping issues.

Page layout

Note: Unlike some other Squarespace templates, you can’t disable mobile styles for these templates. This ensures your site always follows best practices and stays mobile-friendly.

Sidebar

These templates don't support a sidebar on any page. To learn more about sidebars and the templates that support them, see Editing sidebars.

Next step

Learn how to create a vertically-scrolling Index Page.

Was this article helpful?
9 out of 17 found this helpful
Brine structure and style