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

Skye template family

The Skye template family (Foundry, Indigo, Ready, Skye, Tudor) is ideal for bloggers, magazines, and news sites. With multiple striking layout options, you can highlight your content and share it with the world. Special features include a navigation overlay, sophisticated Blog Pages, and Advanced Store Pages.

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

Supported pages

Skye supports these page types:

Background

Use Site Background in Site to change the background color of your site. The background color displays behind the header, footer, and all page content. Skye templates don't support a background image.

Header

Visitors use the header at the top to navigate your site. In Skye, the header displays over the site background color and contains the following elements:

  • Navigation menu (☰) on the left
  • Branding elements (site title, logo, and tagline) in the middle
  • Shopping cart, search bar icon, and built-in social icons on the right

As you scroll down, the header remains as a fixed transparent overlay over your site’s content. To add a solid color behind the header on scroll, check the Header Background When Scrolled tweak in Site, then use Header Background Color to set the color.

Style the site title and tagline in Site Branding:

  • Layout - Display the site title and tagline next to each other, or stacked with the site title on top
  • Borders - Add a border above, below, or above and below the site title and tagline
  • Show Tagline - Uncheck to hide the tagline

If you’ve replaced the site title with a logo, use the Logo Height tweak to change its size. The tagline always displays below the logo. There aren’t border options when you’ve added a logo.

Use the following tweaks to style the rest of the header elements:

  • Change the appearance of the navigation, search, and shopping cart icons with UI Icon Color and UI Icon Weight in Site Navigation.
  • Hide or show the search and social icons with the tweaks in Header Right Side.
  • Style the built-in social icons, including using the icon’s standard brand colors, with the tweaks in Header Social Icons. If there isn't enough room for all social icons, they display as three dots.

Navigation overlay

The Main Navigation always displays in the header behind the ☰ menu. When you click the icon, it opens an overlay split into a right and left side:

  • On the left, you’ll see your navigation links. Folders have a + icon; when clicked, the links in the folder expand. Customize the area under the navigation with blocks.
  • On the right is an optional section called the sidetray. Use blocks to add content that sets the tone for your site.

Use these tweaks to style the overlay and navigation links:

  • Change the links’ font, color, and spacing with the tweaks in Site Navigation.
  • The overlay background color follows the Site Background in Site.
  • To hide the sidetray, check Hide Right Column in Site Navigation.
Tip: Open the navigation overlay before opening Site Styles to see your style changes as you make them.

overlayblocks.png

Footer

The site-wide footer contains a customizable content area and a footer navigation.

Text

Style the text on your site with the tweaks in Site-Wide Fonts and Site-Wide Text Colors. Text in some editable blocks areas follows the content inset.

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. Open Site Styles and scroll down to Site-Wide Fonts.
  2. Use the Heading 1 tweak to set the maximum font size, for example, 65px.
  3. Use the Heading 1 Min tweak to set the minimum font size, for example, 15px.

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

Content inset

Use the content inset feature to add white space margins on the sides of all your page content, or to create compelling layouts with a mix of site-wide blocks and indented blocks. Layout Pages, blog posts, and footers follow this feature.

Style the content inset in Site:

  • Change the column width with Content Inset. To remove the inset, set it to 0.
  • Check Full Bleed Images, Video, and Gallery to display Image Blocks, Video Blocks, and Gallery Blocks at the width of the main content area. All other blocks retain the content inset.

Line Blocks and columns of two or more blocks always display at site width.

Blog Pages

Skye Blog Pages feature a customizable layout of post thumbnail tiles.

On the landing page:

  • Blog posts display in a grid of post thumbnail tiles. If a post has a thumbnail image, that image displays above the tile text. If a post doesn’t have a thumbnail image, only the text displays.
  • Post titles and dates always display in the thumbnail tile text. Choose where and how the date appears with Date Style in Blog Options.
  • Add metadata (author or categories) to the bottom of each thumbnail tile using Promoted Meta in Blog Options.
  • Excerpts are text-only and display when you check Show Excerpt on Blog List in Blog Grid Options.

nothumb.png

On individual posts:

  • Post thumbnails can create a banner at the top of the blog post. To hide the banner image, uncheck the Show Banner Image tweak in Blog Post Options.
  • Use the Banner Image Width tweak to set the thumbnail’s size to Normal or Narrow. The height is set by the original image, proportional to the width.
  • Post titles and dates always display above the post. Choose where and how the date appears with Date Style in Blog Options.
  • Categories, tags, comments, Likes, and share buttons display below the post. Use the Promoted Meta tweak in Blog Options to choose which element (author name, category, and tags) displays below the post title instead.
  • On hover, the navigation arrows display post dates and titles. If you've checked the Show Banner Image tweak, it also shows the post's thumbnail image.
  • On mobile devices and narrower browsers, the arrows, title, and dates display on the page below the post content. Thumbnail images don't appear.
  • If you enabled Related Posts, three posts display at the bottom of the post. Only the thumbnail, date and post title display, and they inherit the style of your Blog Page thumbnail tiles.

Style Blog Pages and posts using the tweaks in Blog Grid Options, Blog Options, and Blog Post Options:

  • Use Date Color to change the text color of publish dates on Blog Pages and posts. If you choose Date Style: Callout or Callout Circle, the text auto-adjusts to either black or white, depending on the Date Color.
  • The Image Cropping tweak sets the shape of the all thumbnail images on Blog Pages.
  • Use the Grid Alignment tweaks to change how thumbnails display on Blog Pages.
  • Thumbnail tile text can display over a background color, or “card,” on Blog Pages. Use Card Background Color to change the color. Uncheck Card Style to display the text over the site background color instead..
  • A divider line appears below the post title on both the landing page and individual posts. To hide this line, uncheck Show Divider. Style the divider line with the Divider tweaks.
  • Use the tweaks in Share Buttons to customize the size, spacing, color, and style of the Advanced share buttons on blog posts.
  • Blog post text follows the content inset.

Sidebar

Blog posts support a site-wide sidebar. Customize it with blocks.

  • The sidebar scrolls up with the page.
  • Set the width and choose if the author profile appears in the sidebar using the sidebar tweaks in Blog Post Options.
  • On mobile, the sidebar displays below the page content.
  • You can’t edit the sidebar while the blog post editor is open.

Disable the sidebar by unchecking Show Sidebar in Blog Post Options. If you’re going to hide the blog sidebar, delete the demo content first. Even when hidden, text from the sidebar may get pulled into posts when sharing on social media.

sidebar.png

Author profile

Author profiles display authors names, website links, and bios. Click the author name to view a filtered results page for that author’s posts.

Author profiles can display in the sidebar, or below the post and Share buttons. Use Author Profile in Blog Post Options to change where they display, or to hide them.

The author name won't display below the post when the author profile appears on the page. The author name metadata always displays when the author profile is hidden.

author-bio.png

Page loading

A progress pie tells visitors how far into the post they are. The progress pie appears in the bottom-left corner as you scroll.

To change the color of the progress pie, use the Progress Indicator Fill Color in Blog Post Options.

progresspie.gif

Banners

Post thumbnails create banners above individual blog posts. The Skye family doesn't support page banners.

Share buttons

You can add customizable Share buttons to blog posts and product pages. Visitors use these buttons to share content to their social profiles.

  • Use the tweaks in Share Buttons to change their size, spacing, color, and style.
  • Style product share buttons in Products: Details. Hide the icons for products by unchecking Show Share Buttons.

A Share link with popup Share buttons also appears on Album Pages and Events Pages. These Share buttons don’t take on the customized styles.

Mobile

With Squarespace's built-in responsive design, your site adjusts to look great on any device.

  • The navigation, search icon, and shopping cart display at the bottom in a navigation bar, and open as an overlay when tapped.
  • Social icons display as a three dot “more” icon.
  • Sidebar content displays beneath page content.
  • You can’t disable mobile styles.

Was this article helpful?
13 out of 28 found this helpful
Skye template family