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

Pacific, Bryler, Charlotte, Fulton, Horizon, and Naomi 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 Pacific, Bryler, Charlotte, Fulton, Horizon, or Naomi 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.

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
  • Blog - The list-style Blog Page stacks posts vertically

And these standard pages:

  • Regular Page - A blank page you can customize with blocks
  • Album - Add music and cover art to your site
  • Events - Create a calendar or list of events
  • Gallery - Style the gallery as a slideshow or grid
  • Products (Classic) - 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. 

Banner images

Create banner images at the top of any page, or stack multiple banner images vertically within an Index Page. To learn more, visit Banner images

Site header

The site header is the area where your Main Navigation and site title or logo display.

  • Use the Background Color tweak to set the header color.
  • When Transparent on Banner Images is checked, the header elements display over any banner images on your site.

Site title

The site title displays centered at the top of the page. Use the Site Title & Logo panel to adjust the site title, or replace it with a logo. These templates don't display a tag line.

Use the tweaks in the Site Header section of the Style Editor to adjust the site title's color, font and formatting. The Font Size slider in the Site Title Font tweak adjusts the site title size. To prevent distortion, the recommended limit is 72 pixels.

Logos resize to a width of 140 pixels. The aspect ratio of the logo is maintained. You can adjust the width of the logo with the Logo Width tweak.

On mobile devices and reduced-width browsers, the site title or logo reduces to a maximum height of 50 pixels.

Main Navigation

The Main Navigation displays at the top of the page in the site header. Use the Always Use Overlay Nav tweak to choose whether it appears as inline links or as a navigation menu overlay. 

Use the tweaks in the Site Header section of the Style Editor to adjust the color and font of your site's navigation links. For general help, visit Styling navigation

Tip: Add drop-down menus to the navigation with folders.

Header navigation

When the Always Use Overlay Nav tweak is unchecked, navigation links display either beneath the site title or logo, or split into two sections on either side of it. This depends on the number of pages and browser width. If the navigation is split and there are an odd number of links, the extra link displays to the left of the site title.

Index Pages

If you've set an Index Page as your homepage, its Album and Regular Page sections can display in the site-wide navigation links.

Homepage Index Pages can also create fixed navigation.

Navigation menu

When the Always Use Overlay Nav tweak is checked, a menu or hamburger icon displays in the top-left corner. When you click the menu icon, an overlay with your navigation links appears.

  • Link Color determines the hamburger icon color.
  • Background Color determines the overlay color.
  • The Link Font: Font Size tweak doesn't affect the overlay links. The links resize automatically to best fit the overlay menu.

Secondary Navigation

Secondary Navigation links display as footer navigation at the bottom of the page, above the footer content.

Use the Nav tweaks in the Footer section of the Style Editor to adjust the links' color and font.

Category navigation

Use the Category Navigation section of the Style Editor to add and style category navigations at the top of Blog Pages and Products Pages.

Category navigations display links to the different post categories or product categories. Clicking a link filters out every item except the ones in that category.

Tip: The category navigation style tweaks affect both Blog Pages and Products Pages.

Background

Set the Background Color for your site in the Main Content section of the Style Editor. You can also set alternating background colors or separating borders for sections in an Index Page.

These templates don't support a site-wide background image. However, you can add images with text and content overlays to your site with banner images.

Mobile

Because Squarespace templates are built with responsive design, your site will adjust on mobile devices to better fit the format of that device. You can use Device View to see how your site will look on different devices.

On a mobile device, the navigation displays as a menu icon in the top-left corner. When you tap the menu icon, an overlay with your navigation links appears.

The site title or logo displays in the top middle. On mobile devices and reduced-width browsers, site titles and logos reduce to a maximum height of 50 pixels to fit in the mobile navigation bar. 

On smartphones, a Back To Top link appears at the bottom of the page above the footer.

Due to space limitations, galleries in an Index Page don't display image descriptions on mobile devices.

Note: You can disable mobile styles in the Advanced panel.

Footer and pre-footer

Your site supports a site-wide footer. This means the same content displays on every page. The footer has an optional top section called the pre-footer. To add the pre-footer, select the Content: Custom tweak. To hide it, select Content: Empty.

Tip: The pre-footer won't be visible when the Style Editor is open unless it contains content. You can leave the Style Editor, add content to the pre-footer, then re-open the Style Editor to continue making adjustments.

Add content directly to the footer and pre-footer using blocks. When viewing the page, hover over the footer or pre-footer and click Edit to open the editor. To learn more, visit Editing footers.

  • Use the tweaks in the Prefooter section of the Style Editor to set its background, heading, and text colors.
  • Use the tweaks in the Footer section to set the footer's background, heading, site info, and text colors, and to adjust the links for the Secondary Navigation.

Certain content auto-populates in the footer and pre-footer:

  • Secondary Navigation displays at the top of the footer, below the pre-footer.
  • Contact information displays below the Secondary Navigation and above any footer content. Add or adjust this in the Physical Location, Contact Email, and Contact Phone Number sections of the Business Information panel. Style the text with the Site Info tweaks.
  • Depending on which template you've chosen, icons for the social networks you’ve added in the Connected Accounts panel automatically display in a Social Links Block. Delete the Social Links Block to remove them.

Shopping cart

If your site has a Products Page, a shopping cart button displays in the top-right corner after a customer adds a product to their cart.

To customize the shopping cart, add at least one product to your cart so that the cart button will appear. The Cart Button Background Color and Cart Button Font Color tweaks will appear in the Style Editor.

Sidebar

These templates don't support a sidebar on any page. For a list of templates with sidebars, visit Editing sidebars.

Next Step

Create a vertically-scrolling homepage with an Index Page.

Was this article helpful?
7 out of 15 found this helpful
Pacific structure and style