Choosing and customizing a template

Squarespace 5 offers a variety of templates you can use on your site to change your site appearance.  You can easily switch to a different template at any time, using this guide.

Step 1 - Access the Style Mode

Switch to Style Mode by clicking the paintbrush icon in the upper right corner of your screen.

Step 2 - Access Template & Styles

Navigate to the Template & Styles tab in Style Mode, and click the More Templates button in the lower left of the appearance editor.

Step 3 - View and Select a Template

The templates will be listed in a horizontally scrolling list on your screen, represented with a title and image.  Click the desired template to select it and view individual styles associated with that template.

Creating custom styles

Alter your site appearance with a custom style, using the Style Mode to edit your elements.

Step 1 - Choose Base Template Style

Click the a default Squarespace templates as a starting point.

Note: You are actually creating a custom style based on a pre-built template, not a custom template.  In fact, our core templates are actually just styles of the one true Squarespace template that defines the HTML containers as well as the identifiers and classes for each (View the primary template containers - PDF file)

Step 2 - Create Your Custom Style

After selecting a deafult Squarespace style as a starting point, click any of the editing options (Banner & Navigation, Fonts, Colors, and Sizes, Custom CSS, or Advanced) and you will immediately be prompted to name and create your new custom copy of the default style.  Type your desired style title and press Enter or click the Create Style button to make an editable copy of the default style.

Step 3 - Edit Your Templates Styles and Layout

You can enter Style Mode at any time and use the options there to customize your new style.

Step 4 - Apply Your Changes

You will need to Enable the style to apply all your new changes to your site appearance.

STEP 5 - Copy Your Custom Style (Optional)

To make a copy of your custom style, access Style Mode and click the Templates & Styles option. Hover your mouse over the style you wish to copy and click the copy link to duplicate the selected custom style within your template.

What is saved in my custom template?

Basically, styles are saved, but content is not. Everything you do in the Style Mode is saved, but the pages, widgets, and content is not saved. To clarify, the pages, widgets, and content on your site will stay the same no matter what template you feel free to try out different styles as much as you want without worrying about losing your content.

Can I save a copy of my template on my computer? Can I share them with others?

Yes. First, access the Templates & Styles section in Style Mode. Hover your mouse over the desired style and click the Export link to download an XML file that contains all of your style information.

How do I import a style file I have exported?

To import a saved template file you previously exported, navigate to the Templates & Styles area in Style Mode and click the Import Style link under the Style title. Then follow the prompts to upload your template style file.

Creating a minimal Custom Style

You can easily break down any of the existing templates within the system in just a few simple steps. This allows you to create a minimal site design with heavy emphasis on content. This strategy will work well for studios, artists, and individuals that need to display a portfolio. See the above video for more information.

Customizing template settings

The Settings area in Style Mode provides you the opportunity to configure various settings for your website style.

Step 1 - Access Style Mode 

Click the paintbrush icon to access Style Mode.

Step 2 - Configure Settings

In the Settings area, you can easily change your Style Name, icon sets and various other options for your custom template style.

  1. Style Name -- This is the title of your style that will appear in the Templates & Styles area.
  2. Style Author -- This is the name of the author of your style.
  3. Icon Sets -- These are the default icons that will display with various elements in your site, most notably on journal pages next to the Post Display elements (author, category, date, etc.).  There are a number of options at various sizes which you can configure in this area.  You can also use the Opacity slider to control how transparent or solid the icons appear.  This option allows you to easily adjust your chosen icon set to blend with your style.
  4. Edit Customizable Elements -- You can review our separate guide specifically for adding and modifying your style elements.
  5. Edit Style Variables -- This is an advanced area that is similar to the Edit Customizable Elements area. You can use these variables in your own Custom CSS to match site element widths or match elements to an error color on your site, for example.
  6. Complete CSS Override -- Checking this box will override all Squarespace Core CSS styling for your template.
  7. Equal Column Heights -- This option forces your Content and Sidebars to extend to the same height, regardless of the amount of content either one contains.

Step 3 - Save Changes

Once you have made changes to the Style Name, Style Author, Icon Set, Complete CSS Override or Equal Column Heights settings, you must click the Save Changes button to save those changes to your custom style.

  1. Setting the Opacity slider for icons to 0 will result in completely transparent icons. Setting it to 1 will result in completely solid icons.
  2. Checking the Complete CSS Override option will remove ALL default CSS for that template style. Be prepared for the style to look very different if you select this option. Keep in mind you can uncheck that option as well if you change your mind.
  3. When editing the Style Variables, note that checking the read only option for any variable will cause that variable NOT to appear in the Banner & Navigation or Fonts, Colors & Sizes areas.

Can I share my styles with others who may also want to use them?

Yes. Access Style Mode.  From there, hover your mouse over the style you wish to share and click the export link to export your custom style. This generates a XML file which can then be imported into another Squarespace website.  

To then import a style into your site, navigate to the Templates & Styles tab within Style Mode, and click the import style link at the left of your screen. 

Can I preview a style without changing my current layout?

Yes. By default, when clicking on styles in the Appearance manager of your site editor, styles are previewed and do not affect the way visitors see your site. To enable a style for your visitors, you must click Enable Style in the lower right while previewing. As a note, any structural changes you make (moving pages, widgets, etc.) will be immediately applied.

Was this article helpful?
0 out of 1 found this helpful
Choosing and customizing a template