The style and features of the 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 and the section they appear under in the Site Styles panel are bold.

Supported page types

York supports these page types:

• Album pages
• Blog pages - Standard grid/list
• Cover pages
• Events pages
• Gallery pages - Standard
• Project pages
• Index pages - Grid
• Layout pages
• Store pages - Advanced

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:

• Site title or logo ("branding")
• Tagline
• Main navigation
• Secondary navigation
• Shopping cart

Style the header layout with the Site: header layout tweaks:

• 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 with these Site: header tweaks:

• Set the site title font and color with Site title.
• Set the tagline 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 with the Site: navigation tweaks:

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

More help with headers

Tips:

• Set the line weight of the search and shopping cart icon with the Icons tweaks.
• The header background color follows the Site background tweak under Site.
• Many of these elements have separate mobile styles.

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
• Store pages
• Project pages

To enable these across your site, check Show page header and/or Show page footer in the Page section of site styles. Text blocks in the page header and footer follow the tweaks under Site: typography.

Keep in mind:

• Individual collection items, such as blog posts, don’t support page headers and footers.
• Hidden header or footer content may still appear when you share a page on social media. To prevent this, delete the content before hiding the header or footer.
• Pages in an index display navigation below the page footer.

Site-wide footer

To enable a site-wide footer, check the Show global site footer tweak under 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:

• Album pages
• Blog pages
• Events pages
• Gallery pages (images only)
• Index pages
• Layout pages
• Store pages
• Project pages

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

Keep in mind:

• These banners create a thumbnail navigation on index pages.
• If the page doesn't have a featured image, the banner displays a background color. You may need to change 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 of site styles.
• The page title and description can overlay the banner.
• Banners support animated page loads.

Homepage-only banner

You can display a banner on your homepage, but hide it for all other pages of that type. 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.

The page title and page description stay universal. 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 of site styles. These tweaks affect all page banners on your site.

• On pages with featured images, set the banner height with Height.
• Position the image in the banner with Image alignment.
• When Image alignment is set to right or left, fill the right or left half of the image with Crop image. 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 featured image itself. This is useful for illustrations and images that have a single dominant background color, as the image appears to extend out to the edges of the banner.
• To extend the banner to the edges of the browser, check Full bleed banner.
• Index navigation banners have their own style settings under Index in site styles.

The Background color displays:

• On banners that don’t have featured images
• While a banner image or video loads
• Behind featured images that don’t fill the whole banner, if Auto color background is unchecked

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.
• Hide or display the text with the Title, description, and category tweaks under the Page section.
• 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

You can assign different style options for when the text displays over a banner or over the page. The site styles section you use depends on whether your page has a banner:

• Banner text - Any page with a banner
• Index: intro text - Index pages without page banners
• Page: intro text - Any other page without a page banner

Style the text with Title, Description, and Category.

Pages without banners have 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:

• Position text in the banner with Alignment.
• Set the side margins for the text with Width.
• Add a color behind the text with Highlight tweaks. Set the background color's width with Highlight text indent.

Blog pages

The York template family uses a standard grid/list blog page. To learn more about the unique features and style options of this type of blog, visit Standard grid/list blog pages in version 7.0.

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 visit different pages.

• The navigation grid displays page featured images. Even if a page has a video banner, its featured 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.

Supported pages

You can add the following pages to an index:

• Album pages
• Blog pages
• Gallery pages
• Events pages
• Store pages
• Project pages
• Layout pages

Featured images

Add a featured image or video URL to a page's settings to display it in the index navigation thumbnail. Style the thumbnails with the Index: item image tweaks:

• Align the featured image in the thumbnail with Image alignment.
• Fill the right half, left half, or entire thumbnail using 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.
• Change how much the image fades when visitors hover over it with Hover opacity.
• To fill the whole thumbnail, select Image alignment: center and check Crop image.
• To set thumbnails to automatically pull a background color from the featured image or video, check Auto color background.
• Choose an Item background color to display in thumbnails that don’t have featured images or videos. This tweak appears when Auto color background is unchecked.

The thumbnail background color displays:

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

Thumbnail layout

Index navigation thumbnails can display as banners or in a grid. Set the style in the Index: layout section of site styles.

• Display the thumbnails as banners with Item width. Choose either full or half to display one or two banners per row.
• Set the height of the banners with Item height.
• To display the thumbnails in a grid, select Item width: grid. Style the grid with the Columns tweaks and Thumbnail ratio.
• Set the space between banners or thumbnail tiles with Item spacing.
• To extend thumbnails to the browser’s edge, check Full bleed index. When unchecked, thumbnails follow the site padding. This also affects the page header banner.
• To alternate between rows that display one banner and two banners, check Alternate widths. This option appears when banners are set to Image alignment: center and Index width is set to full or half.
• To alternate the side that the image displays on, check Alternate sides. 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.

Change the font, color, and size of the text with the Index: item text section of site styles.

• Choose how the titles display with Title display.
• To hide the category text, check Show categories.
• To add customizable background colors behind the text, check Use title background and Use category background
• Set where the text displays with Text alignment.

Navigation

To style Index navigation, go to a page in the index, then open site styles.

Navigation displays at the bottom of all pages in an index. To hide it, uncheck Show index navigation. To style it, use the Index: navigation section of site styles:

• Set Link style to list to display all pages in 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.

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

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

Structure and style

Share buttons

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

• Set their size, spacing, color, and style in the Share buttons section of site styles. Depending on the style you choose, more tweaks appear to further customize the buttons.
• Choose the product item share buttons display in the Products: details section. Hide the icons for product items by unchecking Show share buttons.
• Use the Share icons tweak under Blog: item to choose if share buttons display above or below the content on individual blog posts.
• The Pinterest share button only displays on pages with featured 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 of site styles:

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

Fonts

Style the fonts on your site with these site styles options:

• Navigation links - Site: navigation
• Main content - Site: typography
• Page titles and descriptions - Banner text, Page: intro text, and Index: intro text

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. To learn more, visit Scaling fonts.

Sidebar

York templates don't support a sidebar on any page. For a list of templates with sidebars, visit Sidebars in version 7.0.

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 of site styles:

• Choose if the mobile bar scrolls up with the page or stays fixed at the top or bottom with Mobile bar position. The mobile bar contains your site title or logo, navigation icon, tagline, and shopping cart.
• Set where the site branding and menu icon appear with Branding position.
• The site title, tagline, 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:

• Unlike some templates, you can’t disable mobile styles.
• If your site isn’t displaying correctly on mobile, enable scaling fonts and experiment with reducing the font minimums.
• Page descriptions may overlap thumbnails on mobile. Use device view to see how your site looks on mobile, then shorten the page description if needed.

Language options

York supports 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 York

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.

Banner text background highlight color has gaps

This can happen when your title or description is very short, and you've set a large custom highlight indent.

To fix this, add more text to your title or description, or use the Banner text section of site styles to either:

• Reduce the Custom highlight indent tweak.
• Use the Text highlight indent tweak to choose either the small, medium, or large preset options.

Dropdowns in navigation don't display properly

There are two different ways dropdowns in the navigation might not display as expected and each one has a specific fix:

• Not all of the pages display - When expanded, the dropdown doesn't list all of the pages it contains. To fix the list, add a new dropdown and move some of the pages into it.
• Some of the dropdown's title is missing - Dropdowns with long titles don't show all of the words in the dropdown's title. This might also affect the titles of the pages inside the dropdown. To fix the missing words, shorten the title of the dropdown or the affected page it contains.

"Page description" text displays

This placeholder text appears on layout, project, and store pages while you're logged into your site. Visitors to your site won't see this text.

To fix this, replace the text in the page's settings, or hide all page descriptions in site styles.

Project page disappeared after switching templates

If you switch to a template outside of the York family, project pages convert to gallery pages.

After switching back to a York template, you can recreate your original format by moving the images from a gallery page to a new project page:

1. Open the Pages panel, then add a new project page.
2. In the Pages panel, click the gallery page with the images you want to move.
3. Click the items you want to move.
4. Click Move in the action bar that appears below.
5. In the Select destination collection window, select the Projects Page and click Move items.

Random text appears when sharing on social media

Squarespace can’t control exactly what appears on social media when you share content. However, sometimes text from a page header or footer displays, even if it’s hidden on your site. To fix this, delete content from headers and footers when they’re hidden.

To delete header or footer content:

1. In the Pages panel, and open the page with hidden header or footer content.
2. Open site styles, then unhide the Page header or Page footer in the Page section of site styles.
3. Click Save.
4. Return to the header or footer and click Edit.
5. Delete the content.
6. Return to site styles and uncheck Show page header or Show page footer.

Text breaks in the banner

If your text isn’t displaying correctly on mobile, enable scaling fonts and experiment with reducing the font minimums.

Note that long words won’t wrap when they reach the edge of a container. For best results, use shorter words in your titles and headings.

Text misaligned in a grid index

If your index page layout is set to grid, text may appear off-center over the thumbnail image in smaller browser windows.

To fix this, experiment in Site styles with reducing the number of Tablet columns in your grid layout or making the Title font smaller. You can also change the layout to Half or Full instead of grid.

Trouble adding content to a page header

If you’re not seeing the Collection header content annotation in the page header:

1. Open site styles.
2. In the Page section, check Show page header.
3. Click Save and exit site styles.
4. Refresh the page.

The annotation should now appear on the page.

Videos don't display on project pages

Every video on a project page must have a thumbnail image. Videos without thumbnail images display in the Pages panel with a diagonal line. To add a thumbnail image:

1. Open the Pages panel.
2. Click the project page.
3. Hover over the video and click the .
4. To add a thumbnail image manually, switch the Video thumbnail toggle on, then click Image.
5. Click Save.