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.
Tip: 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.
Templates in the Pacific family support these page types:
- Index - Create a long, scrolling page of stacked sections.
- Blog - The list-style Blog Page stacks posts vertically.
- Regular Page - A blank page you can customize with blocks.
- Album - Create a page with playable music tracks and cover art.
- 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.
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.
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.
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.
Tip: Add drop-down menus to the navigation with folders.
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.
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.
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 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.
Use the Category Navigation section of the Style Editor to add and style category navigations at the top of Blog Pages and Products Pages.
Tip: The category navigation style tweaks affect both Blog Pages and Products Pages.
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.
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.
If your site has a Products Page, a shopping cart button displays in the top-right corner of all pages after a customer adds a product to their cart. In Pacific, you can style the button's colors.
To customize the shopping cart button:
- Add at least one product to your cart so the cart button appears.
- In the Style Editor, use the Cart Button Background Color and Cart Button Font Color tweaks to style the button.
On mobile, the cart button looks the same and displays in the bottom-right.
These templates don't support a sidebar on any page. For a list of templates with sidebars, visit Editing sidebars.
These templates don't support built-in social icons. Instead, add a Social Links Block to the footer or to your page content.
Create a vertically-scrolling homepage with an Index Page.