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 the Style Editor.
This is a supplement to the guide Making style changes, which we suggest you read first if you're new to Squarespace.
Tips: In the Home Menu, click Design, then Style Editor. To access tweaks specific to a page, navigate to the Style Editor 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.
Templates in the Skye family support these page types:
- Blog - The Blog Page's features include thumbnail tiles, infinite scroll, and author profiles.
- Regular Page - A blank 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 - 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 tag line) in the middle. The right area of the header displays a shopping cart if your site has a Products Page, and can also display icons for the search bar and any connected social accounts. 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 the Style Editor, then use the Header Background Color tweak to set the color.
- Layout - Set whether the site title and tag line 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 tag line.
- Hide the tag line by unchecking Show Tagline.
If you’ve replaced the site title with a logo, use the Logo Height tweak to adjust its size. The tag line 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 the Style Editor 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.
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. This is a great place to add useful information and set the tone for your site.
- You can also add content below the navigation links.
- 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 the Style Editor.
- Folders display with a + icon; when clicked, the links within the folder expand.
Tip: Open the navigation overlay before opening the Style Editor to see your style changes as you make them.
Hover over the blocks and click Edit to replace them with your own content. For example, you might want to:
- Add information about your site with a Text Block
- Add a photo of yourself with an Image Block
- Include a list of new or featured posts with the Archive Block or Summary Block.
To hide the right side of the overlay, called the sidetray, use the Hide Right Column tweak in the Site Navigation section of the Style Editor.
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 the Style Editor.
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:
- Open the Style Editor 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.
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.
The content inset feature helps your content stand out. Regular 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 the Style Editor. To remove the inset, set it to 0.
- Columns of two or more blocks display at site width.
- Line Blocks display at site width.
- 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.
The content inset particularly emphasizes any floated blocks on the page. To learn how to float blocks, visit Moving blocks.
Banners appear above individual blog posts.
Share buttons allow visitors to share content to their social profiles 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 item pages:
- Use the Share Buttons section of the Style Editor 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 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. 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.
Note: 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.
The footer displays Footer Navigation links below the blocks area. The blocks area follows the content inset.
Create and style your blog landing page.