The style and features of the Pacific template family.

The Pacific template family (Bryler, Charlotte, 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 and the section they appear under in the Site styles panel are bold.

Supported pages

Pacific supports these page types:

• Album pages
• Blog pages - List
• Cover pages
• Events pages
• Gallery pages - Standard
• Index pages - Stacked
• Layout pages
• Store pages - Classic

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.

• The branding is centered.
• Index homepages can have fixed navigation.

Style the header's fonts and colors with the Site header tweaks:

• 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.

Style the navigation links with the Site navigation tweaks. 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 set 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.

Banners

Banners create a visual element that can set the tone for your page. Add page featured 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 the Overlay color tweak under Page banner. Index sections have separate overlay colors.

Banner text

Page titles and descriptions can display on banners.

• Style the fonts with the Page banner tweaks. 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 under Page banner.
• Add height to the page description by adding line breaks.

More help with banners

Keep 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 featured 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 featured image.

Background

Set the site background color with the Background color tweak under Main content.

• The header, footers, and prefooter 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 with the Footer tweaks:

• 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.

Tip: If you don’t see the Site info tweak, preview a different template on your site, then cancel the preview.

The pre-footer displays above the footer.

• Style its background and text colors in the Prefooter section of site styles.
• To display the pre-footer, choose Content: custom. To hide it, choose Content: empty.

Keep 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.

Blog pages

Pacific blog pages display as a list of vertically-stacked posts.

On the landing page:

• Add category navigation to display category filters at the top of the page.
• Post featured images display below the title for posts that have excerpts,
• Excerpts display "Read more" links.
• The full content of individual posts displays under the title for posts without excerpts.

On individual posts:

• 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 with the Blog tweaks:

• 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 with these Main content tweaks:

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

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 are made from layout pages. They're a good option for adding text, buttons, and other blocks.
• Gallery index sections are made from gallery pages, and can display in a grid or slideshow.
• Album sections are made from album pages.
• Page featured images display as a background for content and album sections.

Gallery index sections

Style gallery index sections in the Index gallery section of site styles. Set the layout of all gallery index 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:

• Open in a lightbox on mobile.
• Can play automatically.

Section backgrounds

For content and album sections:

• Page featured images display as a background.
• Sections without featured images display the site background color.
• Use the Section separator tweak under 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 index sections:

• Slideshow layout - Images display full bleed.
• Grid layout - The Gallery overlay color tweak under 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 the Color tweak under Index overlay.
• Gallery index sections - Use the Galley overlay color tweak under 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 with the following tweaks:

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

Change the height for gallery index sections with the Index gallery tweaks:

• Slideshow layout - Change the Slideshow aspect ratio.
• Grid layout - Change the Grid aspect ratio and Grid max columns.

Navigation links

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 past the first section in the index 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 the Site navigation section of site styles. Set the navigation background color with Background color under Site header.

Keep in mind:

• Site branding won’t display.
• You must have more than one section in your index for the locked nav to appear.

To create navigation links for content and album sections, check the Expand homepage index links tweak under Site navigation.

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

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 store pages in the Category navigation section of site styles. Style changes affect all category navigations on your site.

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 tweaks under Site header.

Mobile

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

• Navigation collapses into a ☰ in the top-left corner, and can stay locked in place as your scroll on index pages set as the homepage.
• 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, but we don't recommend it.
• 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.

Headings won't display past these maximum sizes on mobile:

• Heading 1 - 34 pixels
• Heading 2 - 26 pixels
• Heading 3 - 20 pixels

On smartphones:

• A Back to top link appears at the bottom above the footer.
• Galleries in index pages don't display image descriptions.

Language options

Within this family, the Charlotte, Naomi, and Pacific templates support 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.

Troubleshooting Pacific

Here are some common issues with this template. Some of these are bugs or known issues. Although we still support Squarespace version 7.0, fixing bugs or issues is a lower priority for us while we focus on our current platform, version 7.1. You can move your version 7.0 site to version 7.1 using our update tool.

Add RSVP or registry links

To add these links:

• Create an RSVP button on a layout page using a form block. This block collects information from visitors.
• Create registry links on a layout page with a grid gallery block, using images with clickthrough URLs to different registry sites.
• To see an example of how these look in practice, see the Naomi live preview page.

Change the headers and text on index pages

Within an index, how you adjust the color and size of the heading and text depends on the type of page and whether there's a banner image or not. Style this in site styles.

For content and album sections with background images:

• Change font and typography using the tweaks in the Main content section.
• Adjust color and size using the tweaks in the Index overlay section.

For content and album sections without background images:

• Change font, typography, color, and sizes using the tweaks in the Main content section.

For gallery pages, use the Index gallery section.

Create a non-cropping banner with an index

Page banners in any template always experience some cropping, especially on mobile devices.

With the index page in the Pacific family, you can create the look of a header banner that doesn't crop:

1. Add an index page.
2. Add a gallery page to the index.
3. Add your preferred banner image to the gallery page. Don't add more than one image, as this will affect the cropping.
4. Add text to the Image title and Description fields. This text will display over the image.
5. In site styles, scroll down to Index gallery and select Design: slideshow and Slideshow aspect Ratio: auto.
6. Add any page content you want to display below the banner as a second page within the index.

Use these site styles tweaks to further adjust how the gallery page image displays:

• Transparent on banner images - Display the site header over the image.
• Gallery overlay color - Adjust the color filter over the image.
• Gallery title and Gallery description - Adjust the font and color of the gallery image text.

Here's an example of how the page might look:

Gallery images are darker than normal in the index

The index page may be displaying the gallery index section with a partially opaque filter.

To change or remove this overlay color, use the Gallery overlay color tweak in the Index gallery section of site styles. Use the opacity slider to change the transparency.

Gallery overlay colors aren't showing

The gallery overlay color appears when there's a description or title for that image. If there's no description or title, the overlay color won’t show.

To learn how to add an image title or description, visit Using gallery pages.

How do I style the pre-footer?

If the pre-footer doesn't have content, it won't be visible when site styles is open. To see it:

1. Leave site styles.
2. Add content to the pre-footer.
3. Re-open site styles to continue making changes.

I can’t find the pre-footer

You may have set the Prefooter to Content: empty in site styles. This hides your pre-footer from visitors and from editing. To make the pre-footer visible again:

1. Open the site styles panel.
2. Scroll down to Prefooter.
3. Using the dropdown, set Content to Content: custom.
4. Make style changes, if needed, like setting the background, heading, and text colors.
5. Click Save at the top of the panel.

I can't see my separating border

If you can't see the separating borders between sections without banner images:

1. Open site styles while on the index page.
2. In the Index section, check Section separator: border.
3. Change the Border color tweak. You may need to change the transparency.

Index page doesn't scroll all the way to the top

When your index page is set as the homepage, the index page links in the navigation take you to the top of each index page section. To have the link for the top section take you to the very top of your site:

1. Go to your index page.
2. Open the Site styles panel.
3. In the Site Header section, check Transparent on banner images.

This displays your site title and navigation over your site's banners, including the top section of your Index. Clicking the link for the top section in your index (for example, the Home link on the Pacific demo site) will now take you to the top of your site.

If the index page still isn't scrolling to the top, ensure that the first page in your index is a layout page and not a gallery or album page. Gallery and album pages don't appear in index page navigation.

Index page has alternating background colors

Two or more sections without banner images in an index page can feature alternating background colors.

To disable this feature, choose Section separator: border tweak in the Index section of site styles. This adds a border between any two consecutive sections without banner images instead.

Navigation icon displays instead of main navigation links

To disable this feature, uncheck Always use overlay nav in the Site navigation section of site styles. The navigation will display as text again.

On certain narrow browsers, such as mobile devices, the navigation always collapses behind a ☰, even if you've disabled it. This is part of the template’s design.

Navigation links are missing

First, confirm the pages you want in your navigation are in the main navigation section of the Pages panel.

Then, open the Site styles panel. Scroll down to the Site navigation section and try these troubleshooting tips:

• If an index page is set as the homepage, confirm Expand homepage index links is checked.
• If the navigation is displaying as a menu icon in the top-left corner, uncheck Always use overlay nav.
• Check the Link color isn’t transparent.

Gallery index sections don't create links in the navigation. Instead, add a content section right above the gallery index section to introduce it, or add index anchor links.

Navigation menu displays behind the site title

This can happen when you first uncheck the Expand homepage index links in site styles. Save the changes, and refresh the page. The navigation will appear below your site title.

Site title resizes after loading

This happens when the site title is too large to fit in its container. To fix this issue:

• Click the Site title font tweak in the Site header section of site styles to ensure the font size is 72 pixels or smaller.
• Use the Site title container width tweak to change the container size to fit the site title.

For the best design, limit the size of your site title to 72 pixels or less. Anything larger that that will cause distortion in the site title, no matter how wide its container is.