Style changes are edits to the look of your site, like fonts, colors, backgrounds, and spacing. You can make and preview style changes in the Style Editor.
Each template's Style Editor has different options called "tweaks." This guide covers how to use the Style Editor to perfect your site's design and explains tweaks found in all of our templates.
We recommend experimenting with the Style Editor as you build your site. By testing your template's tweaks, you'll get a grasp of what's possible in your template and reach a design you'll love.
Open the Style Editor
In the Home Menu, click Pages. Open a page where you want the changes to apply. This tells the Style Editor to show options relevant to the page you're seeing and allows you to preview your changes. (If you're changing a site-wide feature like navigation menus or a footer, open any page.)
Once on the right page, double-click Pages at the top of the panel to return to the Home Menu. Click Design, and then click Style Editor.
The Style Editor will open with a list of editable style tweaks.
Tweaks are grouped into sections like General, Site Header, and Main Content. Tweaks unique to your template are usually under Options.
Click any tweak to make changes.
Note: Site editing is disabled when the Style Editor is open. To add or remove content, close the Style Editor and open the Pages panel.
View page-specific styles
When you preview a page type below in the Style Editor, you'll see a section of tweaks specific to the page type. To view these tweaks, first open the page, and then navigate to the Style Editor.
- Cover Page (See the note below)
- Blog Page
- Events Page
- Gallery Page
- Index Page
- Products Page
Any changes to these tweaks will apply to all pages of that type across your site. For example, if you have multiple Products Pages and make style changes specific to the Products Page, the same change will apply to all Products Pages. This creates a consistent look for your site.
Note: When a Cover Page is open in the Style Editor, you'll only see Cover Page tweaks. To learn more, visit Styling a Cover Page.
Find a style tweak
When in the Style Editor, click an area of a page to display only the style tweaks available for that area and hide the rest. This shortcut is available in most templates and for most areas on your site.
For example, to change the appearance of your navigation menus, click a navigation menu in the preview. The style tweaks that control the navigation menu will display in the Style Editor. The other style tweaks will be hidden.
Or, in the example below, clicking on the Newsletter Block reveals its relevant tweaks.
Return to all options by clicking Show All.
Common style changes
While each Style Editor has dozens of tweaks, there are some common trends between them.
To change fonts and sizes, use the Typography or Font tweaks. To learn more, visit Changing fonts.
To change colors, select any tweak with a color circle next to the label. To learn more, visit Changing colors.
Sizes & values
Many style changes are related to size, like padding, spacing, width, and borders. These tweaks may be found under the Sizes & Values heading. Depending on your template, they can also be in other sections. Sizes are usually measured in pixels (px).
To make this style change, hover over a size tweak. Use the slider or enter a number in the field.
An image's aspect ratio is its width to height ratio expressed as a number, like 3:4. When you choose an aspect ratio tweak the image will crop to that shape (such as 1:1 Square), usually around the focal point.
If the aspect ratio is set to Auto, images will rearrange to create the best fit on the page. They may display in a different order than how they were uploaded.
Some templates feature a site-wide or page background image added via the Style Editor. To add one, click the Background Image tweak or the corresponding image icon within the Style Editor. You can upload your own image or license one from Getty Images for $10.
To learn more, visit Adding a background image.
Some templates feature a site-wide banner image you can add from the Style Editor. Click the Banner Image tweak, Header Image tweak, or the corresponding image icon within the Style Editor.
For per-page images, open the page's settings, click the Media tab, and then upload an image.
To learn more, visit Adding a banner image.
If your template includes a sidebar, you can change its appearance in the Style Editor. For example, in some templates, you can move the sidebar to the left or right. To find the sidebar style tweaks, click on the sidebar in the page preview or look for the Sidebar heading in the Style Editor.
Here's an example of how sidebar tweaks may look for your template:
Hiding and showing
In some templates, you can hide design features like your site description, page titles, social icons, borders, banners, and footers. These tweaks are usually checkmarks found in the Options section.
Undo a style change
When you make changes to any tweak, a dot displays next to it. Click the dot to undo the change.
Note: If you make a style change, then undo it, you won’t see a Save option at the top of the panel. The Save option only appears if you change a tweak and keep it.
Once you’ve made all changes and like what you see, click Save. The changes will appear on your live site.
Note: This change isn't reversible. While you can revert to the template's default styles, you can't restore previous style changes.
Reset to default styles
To start over, you can reset your site's style to the template's defaults. This allows you to revert to the original fonts, colors, and padding on the template.
- Scroll to the bottom of the Style Editor and click Reset Styles to Defaults.
- Review the confirmation message, and click Reset.
- After saving the Style Editor, your template will reset to its default styles.
Note: After saving the Style Editor, this change isn't reversible.
Add custom CSS
The Style Editor controls your site's CSS without custom code. However, if you're familiar with CSS and you can't find a change you need in the Style Editor, you can add CSS in the CSS Editor.
Custom CSS may interfere with your site's functionality, and all custom code falls outside of the scope of Squarespace support.
Explore your template's style
Each template has its own unique style options and default settings. To learn about the tweaks for a particular template, visit the "Structure and style" guide for your template. This list groups templates by family:
- Aviator, Aubrey, Encore
- Bedford, Anya, Bryant, Hayden
- Brine, Clay, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne
- Farro, Haute
- Marquee, Adversary, Alex, Eamon, Shift
- Montauk, Julia, Kent, Om
- Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi
- Skye, Foundry, Tudor
- Tremont, Carson, Henson
- York, Artesia, Harris, Lange, Jasper, Shibori