Most elements on your Squarespace site can be styled from the Fonts, Colors & Sizes tab within the Style Mode . However, you can also add elements of your own to the list, for easy customization.
Step 1 - Access your Style Settings
Click the Settings tab within Style Mode to open the style settings options.
Step 2 - Access Customizable Elements
Click the Edit Customizable Elements button to open the list of customizable style elements.
Step 3 - Add a Customizable Element
Scroll to the bottom of the customizable element list and you'll see two text input fields.
- New Selector Name - This is the name of your selector as it will appear in the Fonts, Colors & Sizes drop down menu. The format for a selector name is Heading | Element Name.
- New CSS Selector - This is the actual CSS Selector for the element you wish to style in the Fonts, Colors & Sizes area. You will need CSS coding knowledge to locate and add the correct CSS selector. You can view our Code Help Site CSS Guide to learn more about custom CSS in Squarespace websites.
Add your Selector Name and CSS Selector to the appropriate fields.
Step 4 - Save the Change
Click the Update/Add Element button to save your new customizable element so that it will then be selectable within the Fonts, Colors & Sizes area.
Note: Adding customizable elements will require coding knowledge and Squarespace cannot provide our customers with code-based support.
Note: Use caution when making changes to your Customizable Elements. We strongly recommend that you not make changes to already existing style elements. Changing the CSS Selectors for existing style elements may cause them not to function as intended. Proceed with caution as you edit.
Edit Style Variables
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.
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.