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

The Pacific template family (Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific) use text overlays and a scrolling full-bleed Index Page to tie all of your content together into a single voice.

This guide covers the features and design options for the Pacific family. Site Styles tweaks are bold, and link to the list of all Pacific tweaks to help you navigate the panel.

Tip: The Live Preview pages for CharlotteFultonHorizonNaomi, and Pacific show real customer sites using these templates.

Supported pages

Pacific supports these page types:

Header

Visitors use the header at the top to navigate your site. In Pacific, the header has the site title or logo (branding) and navigation links.

Style the header's fonts and colors in Site Header.

  • Set the header color with Background Color.
  • Display banners behind the header with Transparent on Banner Images.
  • Change the site title size with the Font Size slider in the Site Title Font tweak. To prevent distortion, don't go higher than 72 pixels.
  • Change the logo size with Logo Width.

Stye the navigation links in Site Navigation. Choose if navigation appears on the page or behind a ☰ icon with Always Use Overlay Nav.

  • When unchecked, navigation links display either beneath the branding, or split on either side. This depends on the number of pages and browser width.
  • Change the  Link Color and the overlay background with Background Color.
  • In the ☰ overlay, links resize automatically to best fit the menu. The Link Font: Font Size tweak doesn't affect them.

pacific-header.png

Banners

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

  • Banners display on Album, Blog, Events, Gallery (image only), Products, and Layout Pages.
  • Stack multiple banners vertically in an Index.
  • Page titles and descriptions and the site header can overlay the banner.
  • Add a color filter with Overlay Color in Page Banner. Index sections have separate overlay colors.

pacific-banner.png

Banner text

Page titles and descriptions can display on banners.

  • Style the fonts in Page Banner. Hide all titles with Show Page Title.
  • To remove page descriptions, delete them from Page Settings. To remove them without affecting the banner height, replace the text with line breaks.
  • To use different text for search results, add SEO titles and descriptions.

Banner height

To change the height, you can:

  • Change Padding in Page Banner.
  • Add height to the page description by adding line breaks.

More help with banners

Keep these tips in mind:

  • Video banners sometimes won't display on mobile, depending on the connection speed and browser version. Set a mobile fallback image to appear when the video banner can't load.
  • If a Gallery Page doesn't have a thumbnail image, the first image becomes the banner automatically whenever you make a change in the Gallery. If you don't want a banner on your Gallery Page, open Page Settings to remove the thumbnail.

Background

Set the site background color with Background Color in Main Content.

  • The header and footers have their own background colors.
  • You can set alternating background colors for sections in an Index.

Footers

Customize Pacific's site-wide footer with blocks. The footer can include navigation links, contact information, and a second content area called the pre-footer.

Style the footer, contact information, and footer navigation links in the Footer section.

  • Display and style the contact information with the Site Info tweaks. Change the information with the Physical Location, Contact Email, and Contact Phone Number fields in Business Information.

The pre-footer displays above the footer.

  • Style its background and text colors in the Prefooter section.
  • To display the pre-footer, choose Content: Custom. To hide it, choose Content: Empty.

Keep these tips in mind:

  • Some templates' demo content includes a Social Links Block. Delete the block to remove the social icons.
  • Text links in the footer and pre-footer are underlined.

pacific-footers.png

Blog Pages

Pacific Blog Pages display as a list of vertically-stacked posts.

  • Add category navigation to display category filters at the top of the page.
  • On the landing page, posts with excerpts display Read More links and post thumbnail images.
  • Individual posts have navigation for previous and next posts below the comments.
  • Single-column Text Blocks are inset on either side. This adds visual interest to your posts by varying the layout. There are no options to change the indent's width.

Style the metadata in the Blog section:

  • Date, categories, and author names display above the post. Use the Meta Priority to move one of these above the post title.
  • To hide author names, choose Hide Entry Author. This tweak isn't available when Meta Priority: Author is selected.
  • Source URLs, tags, and comment, like, and Share buttons display below the post. Check Hide List Entry Footer to hide them.

Style the text in Main Content:

  • Style the metadata with the Meta tweaks.
  • Post titles follow the Heading 1 tweaks.
  • Body text follows the Text Font and Text Color tweaks.

pacific-blog.png

Index Pages

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

  • Content sections display the content from Layout Pages. They're a good option for adding text, buttons, and other blocks.
  • Gallery sections display images from Gallery Pages in a grid or slideshow.
  • Album sections display content and tracks from Album Pages in a grid.
  • Page thumbnails display as a background for content and album sections.

pacific-index.gif

Gallery sections

Style gallery sections in the Index Gallery section. Set the layout of all gallery sections with the Design tweak.

For slideshow layouts:

  • Choose if galleries Autoplay and set the Slideshow Transition to Fade or Scroll.
  • Add or hide navigation elements with Gallery Controls.
  • Add an eye icon that visitors can use to enable or disable captions with Gallery Overlay Toggle.
  • Image titles and descriptions center over the image.

For grid layouts:

  • Choose how many images display horizontally with Grid Max Columns.
  • Image titles display on hover. Image descriptions don't display.

Videos added to the gallery:

Section backgrounds

For content and album sections:

  • Page thumbnails display as a background.
  • Sections without thumbnails display the site background color.
  • Use Section Separator in Index to choose what happens when there are two consecutive sections without background images. You can either have alternating background colors, or a border dividing sections.

For gallery sections:

  • Slideshow layout - Images display full bleed.
  • Grid layout - The Gallery Overlay Color in Index Gallery displays fully opaque in any empty space in the grid.

Color overlays

You can add a color filter to images and videos. This helps any overlaying content stand out.

  • Content and album sections - Use Color in Index Overlay.
  • Gallery sections - Use Galley Overlay Color in Index Gallery. The color only shows on images with titles or descriptions. For grid layouts, the color shows on hover.

Section height

To change the height of content and album sections, adjust the padding:

  • Sections with banner images - Use Page Padding in Index Overlay.
  • Sections without banner images - Use Page Padding in Index.
  • For content sections, you can also add height by adding extra line breaks to the page content.

Change the height for gallery sections in Index Gallery:

  • Slideshow layout - Change the Slideshow Aspect Ratio.
  • Grid layout - Change the Grid Aspect Ratio and Grid Max Columns.

On Index Pages set as the homepage:

  • The header navigation can be locked to appear at the top of the browser window when you scroll down the page (fixed navigation).
  • You can add links for content and album sections to the navigation. When you click the link, the page scrolls to that section.

To lock the navigation, choose Index Scroll Nav: Show On Scroll in Site Navigation.

  • Set the navigation background color with Background Color in Site Header.
  • Site branding won’t display.

charlotte-fixed-nav.png

To create navigation links for content and album sections, check Expand Homepage Index Links in Site Navigation.

  • Gallery sections don't display in the navigation. Use Index anchor links to create links for them instead.

index-nav-links.jpg

More help with Index Pages

  • Edit annotations may not appear on blank sections. To edit a blank page, move it out of the Index, add content, then move it back.
  • To change the color of Button, Form, and Quote Blocks over images, use the Index Overlay tweaks.
  • Share buttons always display on album sections.

Category navigation

Visitors use category navigation links to filter pages by post or product categories.

Add and style category navigations at the top of Blog and Products Pages in the Category Navigation section. Style changes affect all category navigations on your site.

pacific-category-nav.png

Shopping cart

A shopping cart button displays in the top-right corner of all pages after a customer adds a product to their cart. To style the button:

  1. Add at least one product to your cart so the cart button appears.
  2. Change the Cart Button Background Color and Cart Button Font Color in Site Header.

pacific-shopping-cart.png

Mobile

With Squarespace's built-in responsive design, your site adjusts to look great on any device.

  • Navigation collapses to a ☰ in the top-left corner.
  • The site title or logo displays in the top center, with a maximum height of 50 pixels.
  • The shopping cart button displays in the bottom-right corner.
  • You can disable mobile styles (not recommended).
  • Grid galleries display two images per row. If you have an odd number of images, there will be a blank space next to the final image.

On smartphones:

  • A Back To Top link appears at the bottom above the footer.
  • Galleries in Index Pages don't display image descriptions.

pacific-mobile.png

 

Was this article helpful?
12 out of 25 found this helpful