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.
These templates supports these page types with template-specific features:
- Blog - The Blog Page's features include thumbnail tiles, infinite scroll, and author profiles.
And these standard pages:
- Regular Page - A blank page you can customize with blocks
- Album - Add music and cover art to your site
- 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
Tip: If you're new to Squarespace, we suggest you read Understanding the Pages panel and Adding pages to your navigation for an overview of how pages and content work in Squarespace.
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.
Navigation and overlay
Your site supports two navigation areas: the Main Navigation, which displays in an overlay, and a Footer Navigation.
The Main Navigation always displays in the header behind a menu icon, also known as a hamburger icon. When you click the icon, it opens a customizable overlay. The overlay takes the same background color as the site.
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.
The navigation overlay contains two areas you can can customize with blocks. These are a great place to add useful information and set the tone for your site.
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, or include a list of new or featured posts with the Archive Block or Summary Block.
You can hide the right side of the overlay, called the sidetray, with the Hide Right Column tweak.
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 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.
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.