Prefer to watch?

Here’s the step-by-step video!

Mentioned in the video:

Rather read about it instead?

Here are those steps written down…

In part 1 of this mini style editor series we talked about how to use the site styles editor to customize your fonts.

We also covered some pretty important info on the difference between making changes locally vs. site-wide, which we will be referencing lots in tutorial, so if you didn’t catch part 1, I def recommend starting there!

Ready for part 2?

We’re tackling everything you need to know to quickly and easily customizing your color themes and button settings to get your site looking on brand!

Customizing your website colors using the Squarespace 7.1 Site Styles Editor

Remember that moodboard page we threw together in part 1? You’re going to want to pull that up!

Once, you have it open, head into your Design Panel, and choose Colors.

SQuarespace 7.1 color themes (A.K.A section themes)

When you are designing your site, you want to break up your content into easy to digest sections so your visitor doesn’t see wall to wall text and get overwhelmed and bail.

The easiest way to indicate the start of a new section, and to draw the eye to the place you want your visitor to see next is to use contrasting section colors or backgrounds.

So you might have one section with a light or white background, followed by a section with a dark or contrasting colored background.

But since the text or button color you chose for your light background, probably won’t stand out too well on the dark one, Squarespace 7.1 allows you to set multiple section themes to give you greater control over the design!

You set those section themes globally, here in the Design Panel.

Then when you go to actually build your site, and you want a section to look different (read: you want to make a change locally) you just use the on-page style icon to apply your preferred theme to that individual section.

Creating your first section themes

We will start by creating two simple section themes. One with a white or light background, and a contrasting section theme with a colored or dark background.

Duplicate your moodboard section so that you have two moodboards on one page and can preview how your different themes will look side by side in one place.

To be able to your section theme edits in real time, make sure to first go into your on-page Section Settings by clicking the Style Icon, and apply a light theme you plan to style to that first section, and then apply a dark or contrasting theme you want to style to your second section.

If you already know your exact color palette and which colors you plan to use for every last detail of your site, just open your light or dark theme by going to Design Panel > Color > Section Theme. Then select the element you want to change from the huge list of settings, and paste your color codes into that element’s color picker window.

If you don’t know the exact color code, you can also play with the color sliders until you find just the right shade.

How many color themes/section themes can I create?

You can create up to 10 individual themes using the steps above! So for every new theme you want to create, just duplicate your moodboard section, apply the theme you plan to style locally first, and then get to tweaking its colors globally in the design panel.

You’ll notice there are a tonne of other options inside your section themes beyond just customizing just what’s on your moodboard page.

Chances are you won’t end up using all of these elements on your site, so you really only need to customize those you are currently using.

If later you go to add in a new type of content you haven’t used before like an announcement bar or blog, you’ll know that those colors get updated here inside each color theme in your site style editor.

Pro-tip: your site Header & Footer act like any other section where you can apply any one of your 10 created themes. You also have the option to make the Header Transparent or “blend in” with whatever is directly below it. To do this, go to Edit > Edit Site Header > Colors then toggle on the transparent button.

Designing a custom color palette from scratch in Squarespace 7.1

What if you don’t already know your color codes, and you need a hand-holding when it comes to designing a color palette?

Squarespace 7.1 makes it super easy to get started!

Rather than picking your colors one by one for each element, you can use Squarespace’s handy color palette generator, found by going to Design Panel > Colors and then clicking Edit on Color Palette.

When you use this feature to pick an overall color palette, Squarespace will instantly create you 10 different themes, using design best practices to automatically apply your colors to all those millions of little settings as it sees fit.

(Don’t worry, you still have the option to go back into each section and make tweaks to specific details as needed!) 

3 ways to create your custom palette:

  • Use a designer palette.

    If you have zero idea where to start, and don’t have any prior branding to go off of, these pre-built palettes from Squarespace’s pro designers can be super handy. So just click one and watch as your site updates in real time.

  • Use the image color picker.

    Have a photo you love that you feel speaks to your overall brand vibe? Drag and drop it into the image color picker and Squarespace will pull together a palette from colors it finds in your image!

  • Choose your main accent color.

    Just open the From Color option and use the sliders pick one color you’d like to use as your main accent color. Squarespace will then suggest several color palette options to choose from.

Btw, with any of these 3 methods, you have the option to further customize your overall palette color choices by opening the drop down and clicking Custom Colors under Advanced.

Styling your buttons using the Squarespace 7.1 Site Styles Editor

Ok there’s one last thing we need to touch on in our style editor series, and that is button styles!

We’ve already changed the font of our buttons in part 1 of the series, and the color of our buttons were set earlier in this video, but if you want play with the shape or style of your button, here’s how you do it!

Head back into the site styles editor in your Design Panel and click Buttons.

These settings will apply site-wide, because Squarespace knows it’s probably best to keep your button styles all looking similar for brand consistency.

So the options you have for customizing your buttons are to choose from:

  • Style: solid or outlines

  • Shape: square, rounded or pill shaped

  • Padding: how much space you want between the edge of the button and the button’s text.

So there you have it! You’re well on your way to being able to customize the fonts, colors, and buttons of your site!

Happy styling!


/


/


You’ll Also Love…

Squarespace tutorial: a guide to using the new style editor (7.1) PT 2