York, Artesia, Flores, Harris, Jasper, Jones, Lange, 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, Flores, Harris, Jasper, Jones, Lange, Shibori, and Taylor site. These options are available in Site Styles.
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 Site Styles. To access tweaks specific to a page, navigate to Site Styles when on that specific page.
Templates in the York family support these page types:
- Project - Create a sophisticated layout of images, titles, and captions.
- Index - A landing page of clickable banners or thumbnails that makes a great homepage.
- Layout Page - An open page you can customize with blocks.
- Album - Create a page with playable music tracks and cover art.
- Blog - Style the blog landing page as a grid or a list.
- Events - Create a calendar or list of events.
- Gallery (Standard) - 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.
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:
- Site title or logo (“Branding”)
- Tag line
- Main Navigation (“Primary Nav”)
- Secondary Navigation
- Shopping cart
Adjust where each of these elements display (left, center, or right) in the Site: Header Layout section of Site Styles. 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 after 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
- 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).
And these tweaks in the Site: Navigation section:
- 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 Site Styles to set the line weight of the shopping cart icon.
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.
Use Site Styles to adjust the font, color, and size of your site’s text:
- Navigation links - Site: Navigation section
- Main content - Site: Typography section
- Page titles and descriptions - Banner Text (pages with banners), Page: Intro Text section (pages without banners, except the Index), or Index: Intro Text (Index Pages without banners)
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:
- Open Site Styles and scroll down to Site: Typography.
- Ensure the Scale Heading 1 tweak is checked.
- Use the Heading 1 tweak to set the maximum font size, for example, 65px.
- 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.
You can display a banner image, banner video, or background color at the top of these page types:
- Layout Page
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. 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 Site Styles.
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.
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 Layout Page set as the homepage, you'd follow these steps:
- Go to the Layout Page homepage.
- Open Site Styles.
- Scroll down to Page.
- Uncheck Show Page Banner. This hides the banner on all Layout Pages.
- Check Show Homepage Banner. This displays the banner on the homepage Layout 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 Layout Pages. The text has different style settings when not displaying over a banner.
Style all banners
- 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 description from Page Settings at the top of any page, including Index and Project Pages. (To use different text for search results, add an SEO title and description.)
Project Pages and Gallery Pages can also display the categories you add to individual images.
- 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.
- You can hide an individual page's title or description by deleting it from Page Settings. If you do this, ensure you add an SEO title or description. This won't display on your site, but is helpful for SEO.
Text on banners 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 Site Styles 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:
To enable these across your site:
- Open Site Styles.
- Scroll down to the Page section.
- Check the Show Page Header and/or Show Page Footer tweaks.
- Save and exit Site Styles, then refresh.
- 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 Site Styles.
- Individual collection items, such as blog posts, don’t support page headers and footers.
- Layout Pages don’t have separate page header and footer areas. You can create a header or footer on a Layout 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.
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.
Visitors use Share buttons to share content on their social accounts 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 Site Styles 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.
Because Squarespace templates are built with responsive design, your site adjusts on mobile devices to better fit the format of that device.
York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, and Taylor have advanced mobile options, letting you customize your visitors' mobile browsing experience. Use the Mobile sections of Site Styles 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 on mobile. You may want to keep your branding consistent across devices by using the same styles as the Site sections of Site Styles.
- Video banners sometimes won't display on mobile, depending on the visitor's connection speed and browser version. Set a mobile fallback image to appear when the video banner can't load.
- The ☰ always displays on mobile, even if the Main and Secondary Navigations are empty.
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.
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.
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 sophisticated layouts for your site with Project Pages.