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

Skye structure and style

Skye, Foundry, Indigo, Ready, and Tudor 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 Skye, Foundry, Indigo, Ready, and Tudor 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.  
Note: This guide discusses site-wide style options. To learn how to style your blog, visit Blog Pages and blog posts.

Supported pages

Add pages to your site to create your site's underlying structure. Pages can appear as links in your site's navigation.

Templates in the Skye family support these page types:

  • Blog - The Blog Page's features include thumbnail tiles, infinite scroll, and author profiles.
  • Layout Page - An open page you can customize with blocks.
  • Album -  Create a page with playable music tracks and cover art.
  • 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.


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


The header displays a navigation hamburger icon on the left, and branding elements (site title, logo, and tagline) in the middle. The right area of the header displays a shopping cart if your site has a Products Page, and can also display a search bar icon and built-in social icons. The header displays over the site background color.

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 Header Background When Scrolled in Site Styles, then use the Header Background Color tweak to set the color.

Use the Site Branding section to adjust the appearance of the site title and tagline.

  • Layout - Set whether the site title and tagline display 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.
  • Hide the tagline by unchecking Show Tagline.

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

Adjust the appearance of the navigation hamburger, search, and shopping cart icons with the UI Icon Color and UI Icon Weight tweaks. 

  • Use the tweaks in the Header Right Side section of Site Styles to hide or show the search and social icons.
  • Adjust the appearance of the social icons, including using the icon’s standard brand colors, with the tweaks in the Header Social Icons section.
  • 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 a ☰ icon, also known as a menu or hamburger icon.

When you click the icon, it opens an overlay and shows your navigation links.

  • The overlay takes the same background color as the site.
  • On the right is an optional section called the sidetray, which you can customize with blocks. This is a great place to add useful information and set the tone for your site.
  • You can also add blocks below the navigation links.
  • The ☰ icon always appears, even if the overlay is empty.
  • For inspiration as you customize your overlay, see our different styling examples.


Styling the links

The left side of the overlay contains the Main Navigation links.

  • Adjust the links’ font, color, and spacing with the tweaks in the Site Navigation section of Site Styles.
  • Folders display with a + icon; when clicked, the links within the folder expand.
Tip: Open the navigation overlay before opening Site Styles to see your style changes as you make them.

Adding content

Hover over the blocks and click Edit to replace them with your own content. For example, you might want to:

To hide the right side of the overlay, called the sidetray, use the Hide Right Column tweak in the Site Navigation section of Site Styles.

Footer Navigation

Footer Navigation links display below the editable blocks area in the footer. Folders display with a + icon and create menus when clicked.

Adjust the link font and color with the Footer Nav tweaks in the Site Navigation section of Site Styles.


Adjust the text styles throughout your site with the Site-Wide Fonts and Site-Wide Text Colors sections of Site Styles.

Add an underline to body text with the Underline Body Links tweak. Text in certain editable blocks areas conforms to the content inset.

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:

  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.

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.

Content inset

The content inset feature helps your content stand out. Layout Pages, blog posts, and footers follow this feature.

You can use the content inset to add white space margins on the sides of all your page content, or to create layouts where you mix site-wide blocks and indented blocks to add visual interest.

Adjust the column width with the Content Inset tweak in Site Styles. To remove the inset, set it to 0.

The content inset particularly emphasizes any floated blocks on the page. To learn how to float blocks, visit Moving blocks.


Blog posts display a sidebar. These templates don't support a sidebar on any other page. To learn more about sidebars and the templates that support them, see Editing sidebars.


Post thumbnails create banners above individual blog posts.

Tip: The Skye family doesn't support page banners.

Share buttons

Visitors use Share buttons to share content on their social accounts in one click. To learn how to choose which buttons display or to hide them all, visit Adding Share buttons.

Special customizable Share buttons display on blog posts and product details pages:

  • Use the Share Buttons section of Site Styles to adjust their size, spacing, color, and style (icon only, solid, outline, or raised). Depending on which style you choose, more tweaks will appear to add labels and adjust the button options.
  • Product details 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. You can use Device View to see how your site looks on different devices.

On smartphones, the navigation, search icon, and shopping cart display at the bottom in a navigation bar. Social icons display as a three dot “more” icon. The navigation, social icons, and search display as an overlay when tapped.

Sidebar content displays beneath page content on mobile. 

Tip: Unlike some other Squarespace templates, you can’t disable mobile styles for Skye, Foundry, Indigo, Ready, or Tudor. This ensures your site always follows best practices and stays mobile-friendly.


Customize the footer at the bottom with any content using blocks. The footer is site-wide, meaning the same footer content displays on all pages. To learn more, visit Editing footers.

The footer displays Footer Navigation links below the blocks area. The blocks area follows the content inset

Next step

Create and style your blog landing page.

Was this article helpful?
12 out of 26 found this helpful
Skye structure and style