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

The York template family (Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, and York) is designed to showcase the work of illustrators, photographers, creative agencies, and other visual content producers. With a grid Index page and unique Project Pages, these templates give you the tools to display and share your creative output.

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

Tip: The Live Preview pages for Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori and York show real customer sites using these templates. 

Supported page types

York supports these page types:

Header

Visitors use the site-wide header at the top to navigate your site. In York, the header is divided into three areas: left, center, and right. You can add any of the following elements to the header:

Style the header layout in the Site: Header Layout section:

  • Choose Left Layout, Center Layout, or Right Layout to change the layout from Horizontal to Stacked. These options appear after you’ve added two or more items to the header area.
  • Choose how the header displays with the Full Width Header tweak. 

Style the header

Style the header content in Site: Header: 

  • Set the site title font and color with Site Title
  • Set the tag line font and color with Site Tagline
  • Change the logo size with Logo Height (Max)
  • Set the shopping cart font, color, and style with Cart

Style the navigation in Site: Navigation:

  • Adjust the Main Navigation and Secondary Navigation with Primary and Secondary.
  • Hide or display a caret icon next to drop-down menus with Show Folder Indicator.

folder_indicator_caret.png

More help with headers

Tips: 

Page headers and footers

Page headers and footers are a great way to customize individual pages. To add blocks, hover over the top or bottom of the page, then click Edit on the Collection Header Content or Collection Footer Content annotation.

York has page headers and footers on:

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

To enable these across your site, check Show Page Header and/or Show Page Footer in Page. Text Blocks in the page header and footer follow the tweaks in Site: Typography

Keep in mind:

  • Individual collection items, such as blog posts, don’t support page headers and footers.
  • Header or footer content may still appear when you share a page on social media, even if the area is hidden on your site. To prevent this, delete the content before hiding the header or footer. 
  • 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 in Site: Footer. To add blocks, hover over the footer and click Edit. For full steps, visit Editing footers.

Page banners

Add a banner image or video at the top of these page types: 

  • Layout Pages
  • Album Pages
  • Blog Pages
  • Events Pages
  • Gallery Pages (images only)
  • Index Pages
  • Products Pages
  • Project Pages

To add a banner image or video, add a thumbnail image or video URL to the Media tab in its page settings. 

Keep in mind:

  • These banners also create a thumbnail navigation on Index Pages
  • If the page doesn't have a thumbnail image, the banner displays a background color. You may need to adjust the transparency.
  • Banner settings are universal for each page type. Hide or display a banner for a page type with the Banner tweaks in the Page section.
  • The page title and description can overlay the banner.
  • Banners support animated page loads.

Homepage-only banner

To display a banner on your homepage, but hide it for all other pages of that type, enable Show Homepage Banner for that page. For example, if your homepage is a Layout Page, you'd follow these steps:

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

Checking Show Page Banner on any other page of that type shows the banner again on all pages of that type.

The page title and page description remain universal for that page type. For example, checking Show Page Title displays the page title on the homepage and all other Layout Pages. 

Style banners

Style banners in the Banner section. These tweaks affect all page banners on your site except Index navigation banners, which have their own style settings.  

  • On pages with thumbnail images, set the banner height with Height.
  • Position the image within the banner with Image Alignment
  • When Image Alignment is set to right or left, use Crop Image to let the image fill the right half or left half. To fill the entire banner, set Image Alignment to center and check Crop Image.
  • Check Auto Color Background and the banner automatically pulls a background color from the thumbnail image itself. This 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.
  • Check Full Bleed Banner to extend the banner to the edges of the browser.

The Background Color displays: 

  • On banners that don’t have thumbnail images.
  • While a banner image or video loads.
  • Behind thumbnail images that don’t fill the whole banner, if Auto Color Background is unchecked.

banner_sample_1.png

banner_sample_2.png

banner_sample_3.png

banner_sample_4.png

Page titles and descriptions

Display the page title and description from page settings at the top of any page. Project Pages and Gallery Pages can also display individual image categories.

  • These settings are universal for each page type. For example, if you hide the page title on an Events Page, all Events Pages on your site will hide the page title.
  • Use Title, Description, and Category in the Page section to hide or display the text. 
  • Text can overlay the page banner or display on its own.
  • Hide an individual page's description by deleting it from page settings.

Text on banners vs. no banner

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

You can assign different style options for when the text displays over a banner versus when it displays over the page. The Site Styles section you use depends on whether your page has a banner enabled:

Use Title, Description, and Category to style the text. These style settings affect all banners on your site. 

Text on pages without banners has these additional options:

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

Text displaying over a banner has these additional options: 

  • Use Alignment to position your text within the banner.
  • Set the side margins for the text with Width.
  • Add a color behind the text with Highlight tweaks. Use Highlight Text Indent to set the background color's width.

text_on_a_banner.png

Project Pages

The Project Page arranges images, titles, and captions into elegant layouts. This is a unique alternative to a Gallery Page, especially if you're using a mix of text and images.

To learn more, visit Project Pages

Index Pages

York Index Pages create navigation thumbnails in a banner or a grid that visitors can use to navigate to different pages.

  • The navigation grid displays page thumbnail images. Even if a page has a video banner, its thumbnail image displays in the grid.
  • You can add a page banner, navigation title and description text, and customizable header and footer areas.
  • On mobile, Index Pages display one thumbnail per row.
  • Index Pages don't follow the Site Max Width.

index-with-page-banner-and-navigation-banners.png

Supported pages

You can add the following pages to an Index: 

  • Album Pages
  • Blog Pages 
  • Gallery Pages
  • Events Pages
  • Products Pages
  • Project Pages
  • Layout Pages

Thumbnail images

Add a thumbnail image or video URL to a page's settings to display it in the Index navigation thumbnail.  Use the Index: Item Image section to style the thumbnails:

  • Use Image Alignment to align the image within the thumbnail.
  • Crop the image to fill the right half, left half, or entire thumbnail with Crop Image. This option appears when Image Alignment is set to Right, Left, or Center
  • Choose how much of the background color shows through the image with Image Opacity
  • Use Hover Opacity to adjust how much the image fades when visitors hover over it.
  • Choose Image Alignment: Center and check Crop Image to fill the whole thumbnail.
  • To set thumbnails to automatically pull a background color from the thumbnail image or video, check Auto Color Background.
  • Choose an Item Background Color to display in thumbnails that don’t have images or videos. Appears when Auto Color Background is unchecked.

The thumbnail background color displays:

  • When navigation thumbnails that don't have images or videos.
  • Behind images that don’t fill the whole thumbnail.
  • Through thumbnail images if you've adjusted their opacity.

Thumbnail layout

Index navigation thumbnails can display as banners or in a grid. Set the style in the Index: Layout section.

  • Use Item Width to display the thumbnails as banners. Choose either Full or Half to display one or two banners per row. 
  • Use the Item Height tweak to set the height of the banners.
  • To display the thumbnails in a grid, select Item Width: Grid. Use the Columns tweaks and Thumbnail Ratio to style the grid.
  • Set the space between banners or thumbnail tiles with Item Spacing.
  • Check Full Bleed Index to extend thumbnails to the browser’s edge. When unchecked, thumbnails follow the site padding. This also affects the page header banner.
  • Check Alternate Widths to alternate between rows that display one banner and two banners. This option appears when banners are is set to Image Alignment: Center and Index Width is set to Full or Half.
  • Check Alternate Sides to alternate the side that the image displays on. This option appears when banners are set to Image Alignment: Right or Left and Index Width is set to Full.

Index thumbnails can display the navigation title for each page and categories you’ve added to images in Gallery and Project Pages. The navigation title appears on Index thumbnails, but the page title appears at the top of individual pages. This means you can set different text to appear in these two locations. 

Use the Index: Item Text section to change the font, color, and size of the text.

  • Choose how the titles display with Title Display.
  • Uncheck Show Categories to hide the category text.
  • Check Use Title Background and Use Category Background to add customizable background colors behind the text.
  • Set where the text displays with Text Alignment.

index_thumbnails_with_titles.png

Navigation

To style Index navigation, select a page within the Index, then open Site Styles. 

Navigation displays at the bottom of all pages within an Index. To hide it, uncheck Show Index Navigation. To style it, use the Index: Navigation section: 

  • Set Link Style to List to display all pages within the Index as navigation links.
  • Set Link Style to Next to display a Next label. Uncheck Show Label Only to show the name of the next page after the Next label.

link-style-list.png

link-style-next.png

For either style, you can display the text as Inline or Stacked and change the text’s color, font, and scaling. Use the other tweaks in Index: Navigation to set the link style, including spacing, font, and how the links are separated.

Page loading

York 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. For more help, visit Ajax loading.

York templates also support special page animations:

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

Not all animations will be visible when you’re logged in. To preview the effects, visit your site in private or incognito mode.

image-sliding-up.gif

page_banner_fading_in.gif

Share buttons

Customizable share buttons display on blog posts and product details pages:

  • Use the Share Buttons section to set their size, spacing, color, and style. Depending on the style you choose, more tweaks appear to further customize the buttons.
  • Use the Products: Details section to choose the product item share buttons display. Hide the icons for product items by unchecking Show Share Buttons.
  • On Blog Pages, share buttons always display below blog posts.
  • The Pinterest share button only displays on pages with thumbnail images.
  • Album and Events Pages include a share link with pop-up share buttons. These buttons don’t follow customized styles.  

Layout and background

Set your site's padding in the Site section:

  • Set the space between site content and the top of the browser with Site Spacing.
  • Set the space between site content and the sides of the browser with Site Outer Padding.
  • When Full Width Header is unchecked, the header follows Site Alignment and Site Max Width.
  • Set the site-wide background color with Site Background. York templates don't support a background image.

Fonts

Style the fonts on your site with these Site Styles options:

You can set certain text to scale up or down depending on browser width. Here’s how you’d do this for Heading 1 text:

  1. In the Site: Typography section, check Scale Heading 1.
  2. Set the maximum font size with Heading 1.
  3. Set the minimum font size with Heading 1 Min.

We recommend setting each header’s minimum font size larger than your body text font size. For more information, visit Scaling fonts.

Sidebar

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

Social icons

York templates don't support built-in social icons. Instead, add a Social Links Block to the footer or to your page content.

Mobile

With Squarespace's built-in responsive design, your site adjusts to look great on any device. On mobile devices and narrow browsers, content stacks vertically.

Style your site's mobile appearance in the Mobile sections: 

  • Use Mobile Bar Position to choose whether the mobile bar scrolls up with the page, or stays fixed at the top or bottom of the screen. The mobile bar contains your site title or logo, navigation icon, and tagline. 
  • Use Branding Position to set where the site branding and menu icon appear.
  • The shopping cart displays in the navigation menu.
  • The site title, tag line, navigation links, and shopping cart can all have separate mobile styles. To keep your branding consistent across devices, use the same styles as the Site section.
  • Set a mobile fallback image to appear if the video banner can't load on mobile. 
  • The ☰ always displays on mobile, even if the Main and Secondary Navigations are empty.

Keep in mind:

smartphong-and-tablet-view.png

Language options

York supports two language options: 

Was this article helpful?
40 out of 91 found this helpful