Basics of setting up Squarespace 7.1 Color Palette and Themes
Purpose of this tutorial:
Learn how to set up color palettes
and themes in Squarespace 7.1 easily.
It’s so easy to set up your color palette and themes in Squarespace! This 5-minute video will show you how:
to choose a starting preset color palette based on the “pop” color
to view four more versions of the starting preset inside Squarespace
the ten color themes work together
A few notes about Color Themes in Squarespace 7.1:
Themes ending in “1” will default to text and headings being black or white (if the background is dark, then text and headings would be white, if the background is light, then text and headings would be black)
Themes ending in “2” will default to the “left” side of the palette being applied to text and headings; unless contrast isn’t high enough in which case it will default to black or white depending on background color.
Basic Tutorial for Setting Up Squarespace 7.1 Color Palettes
Video Transcript with Time Stamps
0:01 We get a lot of questions sometimes about Squarespace's color palette and themes. So today I'm demonstrating some of the basics for setting up and editing your color palette in Squarespace 7.1.
0:14 For purposes of this demonstration, all sections you see on this page are using fluid engine. Here I've started a page in a trial site to determine the color palette settings so you can more easily see how elements change in comparison.
0:29 So to get started, we're gonna click edit here at the top left, and then this paintbrush icon in the top right.
0:38 And then on colors, as you can see, there are ten total themes available. But before we start diving into those, I wanted to show you how to access the color presets.
0:54 All right, so click on edit palette. And here you can see all the color presets. We recommend choosing based on the middle color, aka, the “pop” color, because once you've chosen a preset, you can then click on from color to access four versions of that palette based on the middle or pop color.
1:16 So let's do that now. Right now we've got this set to the black and white theme, but I'm really loving this blue tone.
1:29 As you can see, the background of this section changed over to match this light gray. I'm gonna scroll back up and go to from color.
1:42 And now Squarespace is giving me four versions of this palette based on the middle pop color. For this demonstration, I'm gonna click on complimentary because I really like this brown color.
1:55 Ooh. And the background of this changed over to this warm neutral shade, which matches this color right here. At this point, I highly recommend that you save your changes.
2:15 I know my changes took because this button is now taking on that blue color. So we're gonna go back to edit > paintbrush icon > colors.
2:32 And again, we're gonna see all ten themes listed. I'm gonna demonstrate the differences between these themes. So as you can see, we have five themes ending and the number one and the other five ending in number two. Number one will default text and headings to black on a light background or white on a dark background.
3:01 So as you can see, this is Lightest 1, and all of the text is appearing black on a white background.
3:11 Themes ending in 2 will default texts and headings to the left side of the palette. So when I'm viewing the color palette, I imagine a line drawn down the middle of this pop color. So that means your pop color can be used for this just as easily as the other colors on the left.
3:29 Here you can see with the section Lightest 2, that the header text is pulling from the pop color, whereas Lightest 1, all of that was black.
3:44 Next we have the Bright themes. So the background is going to default to your darkest color with Bright 1 while the text is gonna be pulling from the pop color.
3:59 And then Bright 2 is gonna do the exact opposite of that with the pop color filling the background and the text defaulting to your lightest color — in this case, white. Next, we have our darker themes. Dark 1 and Dark 2 are gonna have backgrounds pulling from the right side of the color palette in this case.
4:17 The second from the darkest being the deep brown shade. Just like the light themes, Dark 1 will have text defaulting to white since the background is so dark, while Dark 2 will have text pulling from the pop color. In this case, you can see the header text is the blue shade.
4:39 The same goes for Darkest 1 with all white text and Darkest 2 with just the header text changing from white to the deep blue shade.
4:48 I hope this helps demonstrate the basics of setting up your color palette. The blog post will have additional links for Squarespace support articles containing more information.