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 and the section they appear under in the Site Styles panel are bold.
Skye supports these page types:
- Album pages
- Blog pages - Grid
- Cover pages
- Events pages
- Gallery pages - Standard
- Layout pages
- Store pages - Advanced
Use the Site background tweak under 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.
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 under Site, then use Header background color to set the color.
Style the site title and tagline with the Site branding tweaks:
- 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 the UI icon color and UI icon weight tweaks under 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 under Header social icons. If there isn't enough room for all social icons, they display as three dots.
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 Site navigation tweaks.
- The overlay background color follows the Site background tweak under Site.
- To hide the sidetray, check Hide right column under Site navigation.
Tip: Open the navigation overlay before opening site styles to see your style changes as you make them.
The site-wide footer contains a customizable content area and a footer navigation.
- The content area follows the content inset layout and site-wide text styles.
- Footer navigation links display below the content area. Folders have a + icon and create menus when clicked.
- Choose the link font and color with the Footer nav tweaks in Site navigation.
Style the text on your site with the tweaks under 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:
- Open Site Styles and scroll down to Site-wide fonts.
- 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.
We recommend setting each header’s minimum font size larger than your body text font size. For more information, visit Scaling fonts.
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 with these Site tweaks:
- 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.
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 the Date style tweak under Blog options.
- Add metadata (author or categories) to the bottom of each thumbnail tile using the Promoted meta tweak under Blog options.
- Excerpts are text-only and display when you check Show excerpt on blog list under Blog grid options.
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 under 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 the Date style tweak under 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 under 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 under 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.
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 under 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 under 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.
Author profiles can display in the sidebar, or below the post and Share buttons. Use the Author profile tweak under 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.
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 tweak under Blog post options.
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 Share buttons tweaks to change their size, spacing, color, and style.
- Style product share buttons with the Products: details tweaks. 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.
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.
My post title doesn’t fit in its thumbnail tile
Although text wraps in blog post thumbnail tiles, individual words don’t break when they reach the edge of a container. Depending on your style settings, longer words may be cut off or break through the edge of the tile.
There are certain style options you can use to help prevent this from happening. We recommend going to your blog page, opening site styles, and experimenting with these options:
- Reduce the minimum size of your titles - Reduce the List title and List title min sizes in the Site-wide fonts section of site styles. Use List title size no image tweaks for posts that don’t have thumbnail images.
- Increase the width of the tiles - Change the Minimum column width in the Blog grid layout section.
Why are my blog post thumbnails so small?
To display blog page thumbnails at the width of the tiles:
- Open your blog page and navigate to site styles.
- Scroll down to Blog grid layout.
- Uncheck Inset images.
To edit the images at the top of a blog post:
- Open a blog post and navigate to site styles.
- Scroll down to Blog post options.
- Adjust the Banner image width.
I can’t edit my sidebar’s content
Blog posts in these templates support a sidebar. While on a blog post, hover over the sidebar and click Edit to customize it with blocks. Here are some tips:
- If your author profile is in the sidebar, hover over the sidebar content below the profile to activate the Edit annotation.
- Remove the author profile from the sidebar with the Author profile tweak under Blog post options.
- You can't edit the sidebar while editing the blog post.
Learn more about the blog post sidebar.
How do I recreate the navigation links in the Skye demo site?
How do I recreate the sidetray in the Skye navigation overlay?
The Skye template mimics the look of an author profile in the sidetray of the navigation overlay. To recreate this, add an image block, cropping the image with third-party software to make it a circle. Below that, add a text block and a social links block.