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

York, Artesia, Harris, Lange, Jasper, Shibori, and Taylor 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 York, Artesia, Harris, Lange, Jasper, or Shibori 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 supports these page types with template-specific features:

  • Project - Create a sophisticated layout of images, titles, and captions 
  • Index - A landing page of clickable banners or thumbnails that makes a great homepage

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 layout

Your site header contains three areas: left, center, and right. The following elements can all display in any area of your header:

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

Further adjust the header with these tweaks:

  • Change the layout from Horizontal to Stacked with the Left Layout, Center Layout, or Right Layout tweaks. The tweak for each area appears once you’ve added two or more items to that header area.
  • Use the Full Width Header tweak to choose whether the header displays at Site Max Width, or at the width of the browser minus the Site Outer Padding width.
  • The header takes the same background color as the main content area. 

Styling the header elements

Style the header elements with these tweaks: 

  • Site Title tweaks - Set the font and color of the site title.
  • Site Tagline tweaks - Set the font and color of the tag line.
  • Logo Height (Max) - Adjust the size of the logo.
  • Cart tweaks - Set the font, color, and style (text, cart, bag).
  • Primary and Secondary tweaks - Adjust the Main Navigation and Secondary Navigation links.
  • The Show Folder Indicator tweak determines whether a caret icon appears next to drop-down menus.

Use the Icons section of the Style Editor to set the line weight of the search and shopping cart icons.

Note: Many of these elements have separate mobile styles. 

Layout and background

Adjust the padding around your site with these tweaks:

  • Site Spacing - Adjust the space between the site content and the top of the browser.
  • Site Outer Padding - Adjust the space between the site content and the sides of the browser. 

Use the following tweaks to adjust your main content area’s width and alignment. When Full Width Header is unchecked, the header also follows these tweaks:

  • Site Alignment - Align your content to the left, center, or right.
  • Site Max Width - Adjust the width of your main content area. This tweak doesn't affect Project, Gallery, or Index Pages.

Use the Site Background tweak to set the background color for the whole site. These templates don't support a background image.

Fonts

Use the Style Editor to adjust the font, color, and size of your site’s text:

With responsive design, you can set certain text to scale up or down depending on browser width. This helps your text look good in any browser. As an example, here’s how you’d do this for Heading 1 text:

  1. Open the Style Editor and scroll down to Site: Typography.
  2. Ensure the Scale Heading 1 tweak is checked.
  3. Use the Heading 1 tweak to set the maximum font size, for example, 65px.
  4. Use the Heading 1 Min tweak to set the minimum font size, for example, 15px.

It’s considered best practice to set each header’s minimum font size larger than your body text font size. For more information, visit Scaling fonts.

Page banners

You can display a banner image, banner video, or background color at the top of these page types: 

  • Regular Page
  • Album
  • Blog
  • Events
  • Gallery
  • Index
  • Products
  • Project

These banners also create a thumbnail navigation on Index Pages.

  • To add a banner image, open Page Settings and add a thumbnail image in the Media tab.
  • To add a banner video, open Page Settings and add a video URL in the Media tab. Ensure you add a mobile fallback image for mobile display. The Gallery Page doesn't support banner videos.
  • If the page doesn't have a thumbnail image, the banner displays a background color. You may need to adjust the transparency

To choose whether the banner displays on a page, go to the page and use its Banner tweak in the Page section of the Style Editor. 

These banner settings are universal for each page type. For example, if you hide the banner on an Album Page by unchecking Show Album Banner, all Album Pages on your site will hide the banner. 

Homepage-only banner

You can display a banner on your homepage, while hiding it for all other pages of that type (such as Blog Page or Project Page).

For example, if you had a Regular Page set as the homepage, you'd follow these steps:

  1. Go to the Regular Page homepage.
  2. Open the Style Editor.
  3. Scroll down to Page.
  4. Uncheck Show Page Banner. This hides the banner on all Regular Pages.
  5. Check Show Homepage Banner. This displays the banner on the homepage Regular Page.

If you check Show Page Banner while on any other page of that type, the banner will display again on all pages of that type.

Note: The page title and page description remain universal for that page type. For example, if you check Show Page Title, the page title will display on the homepage and all other Regular Pages. The text has different style settings when not displaying over a banner. 

Style all banners

Style the banner with the Banner section of the Style Editor. These style settings affect all page banners on your site. (Index navigation banners have their own style settings.) 

  • Height - Set the height for banners. This tweak doesn't appear on pages without thumbnail images.
  • Image Alignment - Align the image within the banner (top, right, bottom, left, center).
  • Crop Image - Available with the right, left, and center alignment. Crops the image to fill the right half, left half, or entire banner. To fill the whole banner, choose Image Alignment: Center and check Crop Image.
  • Auto Color Background - When checked, each banner with a thumbnail image automatically pulls a background color from the thumbnail image itself.
  • Full Bleed Banner - Extend your banner to the edges of the browser.
Note: Page descriptions may overlap thumbnails on mobile. Use Device View to see how your site will look on mobile.

The Background Color displays as a solid banner background: 

  • For banners that don’t have thumbnail images
  • For banners with thumbnail images when Auto Color Background is unchecked
  • Before a banner image or video as the page fully loads
  • Behind thumbnail images that don’t fill the whole banner 
Tip: Auto Color Background is especially useful for illustrations and images that have a single dominant background color, as the image will appear to extend out to the edges of the banner.

Page title and description

You can display the page title and/or page description at the top of these page types:

  • Regular Page
  • Album
  • Blog
  • Events
  • Gallery
  • Index
  • Products
  • Project

Project Pages and Gallery Pages can also display categories. This text can overlay page banners or display on its own. 

To choose whether this text displays on a page, use the TitleDescription, and Category tweaks in the Page section of the Style Editor. 

These settings are universal for each page type. For example, if you hide the page title on an Events Page by unchecking Show Events Title, all Events Pages on your site will hide the page title. 

Banner vs. no banner

Each page type on your site can display page banners. When a banner is enabled on a page, your page title, description text, and categories display over it.

You can assign this text different style options for when it displays over a banner versus when it displays over the page. For example, you might want your text to be dark when displaying on the page, but light when displaying over background images. 

The section of the Style Editor you use to style the text varies depending on whether your page has a banner

  • Banner Text section - Any page with a banner.
  • Page: Intro Text section - Any page without a page banner, except the Index.
  • Index: Intro Text section - Indexes without page banners.

In any of these sections, use the Title, Description, and Category tweaks to style the text. These style settings affect all banners on your site. 

Text on pages without banners has these additional options:

  • Text Width - Set the side margins for the text.
  • Text Height - Adjust the spacing above and below the text.

Text displaying over a banner has these additional options: 

  • Alignment positions your text within the banner (top, center, bottom, and left, center, right).
  • Width - Set the side margins for the text.
  • Highlight tweaks add a background color behind the text. Use the Highlight Text Indent tweak to set the width of the background color (small, medium, large, custom).
Note: Page descriptions may overlap thumbnails on mobile. Use Device View to see how your site will look on mobile.

Page headers and footers

The following page types support a customizable area at the top and bottom of the page content:

  • Album
  • Blog
  • Events
  • Gallery
  • Index
  • Products
  • Project

To enable these across your site:

  1. Open the Style Editor.
  2. Scroll down to the Page section.
  3. Check the Show Page Header and/or Show Page Footer tweaks.
  4. Save and exit the Style Editor, then refresh.
  5. Hover over the top or bottom of any page. When the Collection Header Content or Collection Footer Content annotation appears, click Edit to add content with blocks.

Text Blocks in the page header and footer follow the tweaks in the Site: Typography section of the Style Editor. 

  • Individual collection items, such as blog posts, don’t support page headers and footers.
  • Regular Pages don’t have separate page header and footer areas. You can create a header or footer on a Regular Page by adding blocks directly to the page.
  • Hidden header or footer content may appear when you share the page on social media. To prevent this, delete the content from the header and footer before hiding them with the Show Page Header or Show Page Footer tweaks.
  • Pages within an Index display navigation below the page footer.

Site-wide footer

To enable a site-wide footer, check the Show Global Site Footer tweak. 

Hover over the footer and click Edit to open the Footer Content Editor. For more information, visit Editing footers.

Share buttons

Share buttons allow visitors to share content to their social profiles in one click. To choose which buttons display, or hide them all, visit Adding Share buttons.

Special customizable Share buttons display on blog posts and product item pages:

  • Use the Share Buttons section of the Style Editor to adjust their size, spacing, color, and style. Depending on which style you choose, more tweaks will appear to add labels and adjust the button options.
  • Product item share buttons display with the product details, which you can adjust in the Products: Details section. Hide the icons for product items by unchecking Show Share Buttons.
  • Share buttons always display below blog posts.

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.  

Tip: The Pinterest Share button only displays on pages that have thumbnail images.

Mobile

Because Squarespace templates are built with responsive design, your site adjusts on mobile devices to better fit the format of that device. 

York, Artesia, Harris, Lange, Jasper, Shibori, and Taylor have advanced mobile options, letting you customize your visitors' mobile browsing experience. Use the Mobile sections of the Style Editor to adjust the style. 

  • A mobile bar contains your site title or logo, navigation icon, and tagline. Use the Mobile Bar Position tweak to choose whether the bar scrolls up with the page, or stays fixed at the top or bottom of the screen.
  • Swap the side of the site branding and menu icon with the Branding Position tweak.
  • The shopping cart displays in the navigation menu.
  • Folders drop down within the navigation menu.
  • The site title, tag line, navigation links, and shopping cart can all have separate styles in mobile. You may want to keep your branding consistent across devices by using the same styles as the Site sections of the Style Editor.
  • For video banners, ensure you add a mobile fallback image.
Tip: If your site isn’t displaying correctly on mobile, enable scaling fonts and experiment with reducing the font minimums.

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.

Page loading

These templates support Ajax, a page-loading method that makes your site faster by only loading the content that’s visible on the page. 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.

These templates also support special animated page loads:

  • Images and captions on Project Pages appear to slide up from the bottom as you scroll down the page. Uncheck the Cascade Images and Captions tweak to remove the effect.
  • The content on pages within an Index appears to slide up on initial load. Uncheck the Page Transition Animation tweak to remove the effect.
  • Page banners load with a fade-in effect. 
Note: Not all loading animations will be visible when you’re logged in. To preview the animation effects, view your site in incognito mode.

Sidebars

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

Next step

Create sophisticated layouts for your site with Project Pages.

Was this article helpful?
0 out of 2 found this helpful
York structure and style