The Style Editor is basically the design control panel for the whole website. There’s a list of options for things like fonts, navigation colors, background colors, hover styles and colors for links, widths, button styles, and more depending on your template. These options are called style “tweaks”.
Any changes you make here will be carried throughout the site. If you want to change the color for just one word or element on a page we’ll cover that later.
To access the editor you’ll click on Design from the home menu, then Style Editor. The left side of the screen will show all your options, while the right side shows a preview of the site. Any changes you make while in the Style Editor will show up immediately for you in the site preview, as long as what you’re editing is visible. When you’re finished you’ll need to click Save before the changes will appear on the live site.
You can find and select different elements to edit by either clicking them in the preview pane with the Style Editor open, or by choosing a style tweak from the list. You’ll notice as you hover over different options thin blue boxes appear around that element on the preview.
Quick tip: Different page types may have different style tweaks available that only show up when you’re on that page. This is especially true for blog and product pages. If there’s a specific element you want to edit you can navigate to that page before clicking Style Editor to see any page specific options.
Because each template has it’s own set of style tweaks would take way too long to go over each and every possibility. Instead we’ll talk about the different types of tweaks you’ll see, that way you’ll be prepared for anything.
You have control of so many colors from this panel! If you’ve just gotten to the editor from the Home menu you’ll usually find that the options are laid out in categories, starting with Colors at the top. Otherwise you’ll find color tweaks sprinkled through each Module.
For color tweaks the circle on the right is a preview of the current color. Clicking on it will bring up a color picker with a few different ways to select a new color.
First, you can use the slider across the top of the box to pick a base color, then adjust the shade by clicking around the different variations in the square in the middle. Then you can make it more or less transparent by moving the slider in the strip below the square. Changing the transparency is totally optional.
Alternatively, if you know the HEX, RGB, RGBA, HSL, HSLA, or HTML color code you can type that into the text area at the bottom of the color picker. If you don’t know what any of these mean, that’s okay. There are links in the resources Module for help finding these codes if you need them, or you could Google something like “Hex color codes for light fuschia”.
Quick tip: When you use the color picker a color code will automatically generate at the bottom of the popup box. To reuse this exact same color in other style tweaks just copy it *in its entirety* and paste it into another color picker.
It can be easy to get overwhelmed while choosing colors, so try to keep it simple. When I create a color palette for a client I usually stick to no more than 5 colors. There will be one or two main colors that coordinate with each other, then one or two neutral colors to be used for backgrounds and fonts, and an accent color or pattern if the palette feels bland. If you have a logo design already you can use that to pull colors from, or go to Google or Pinterest and search for color palette inspiration for colors that work well together. As with most other parts of design, if you’re unsure what you’re doing stick with the less is more philosophy.
There are lots of options when it comes to changing fonts. You can change the font family, weight, style (bold, italic, etc), size, and spacing between the letters. You can add underlines and strike through lines, and transform the text to uppercase, lowercase, or capitalized.
To change font settings you’ll click on the page Module or style tweak you want to edit and a box will pop up with a list of the options for that font. Each of these can be clicked on to either show a list of choices or a slider for changing size.
Squarespace has Google Fonts automatically integrated into the font choices, so you have well over 600 different font to choose from. The font menu that appears when you click to change a font has a search bar at the top if you know the name of the font you want, or they’ve curated some of the most popular fonts in different categories to choose from. Between the search bar and the curated fonts you’ll also see a Module labeled Font On Site which keeps you from having to hunt for the same fonts over and over.
Typography can have a huge impact on the feel of a website. While I recommend you change the fonts to fit your own brand and customize your template, I also advise you do some research before getting started if you aren’t well versed in font pairings. Again Google and Pinterest will be your best friends… head over there and search for best ________ font pairings for web, where the blank is whatever best describes how you want your site to feel. Some examples might be: classic, elegant, minimal, fun, playful, warm, friendly, or sophisticated.
Sizes and values
You have the ability to change the width or padding for lots of different site elements. Width is pretty obvious, but let’s talk about padding for a minute.
Padding is simply the cushion of blank space around an element, but it plays a very important role in making the design comfortable, usable, and clean. If there were no padding everything on a website would just stack right on top of everything else and end up looking like a cluttered mess. Padding gives us somewhere for our eyes to rest.
You can add padding around individual elements by using the Spacer content block on a page, and you can add padding to things like the footer, header, sides of the page, and navigation right here in the Style Editor. To change the values of these style tweaks hover over them and move the slider left or right. As long as whatever you’re editing is visible on the screen you’ll be able to see your changes in real time on the right-hand side.
Most templates have just the right width and padding right out of the box, so you shouldn’t have to make any changes here unless you want to. One exception is the width of the logo and possibly the mobile logo. You may need to play with these to get your header just right.
Some style tweaks will have a drop down menu with different options to choose from. This might include an option to change your header layout to right, left, or center. You might have an option to show your sidebar on the right or left or hide it altogether. There may also be options to change the style or shape of something like a button or newsletter block. Clicking the down arrow beside a style tweak will show you the available options with the current one highlighted.
Other tweaks will have a checkbox to the right side that you can check or uncheck by clicking it. These are things that just require a yes/no or on/off answer.
One of the nice things about Squarespace is you can immediately see the result of changing a style tweak. If you don’t know how a specific option might look there’s no harm in playing with these choices. You can always cancel and not save your changes!