15: Creative Ways to Use Squarespace Color Themes
You have 10 color themes to work with in a Squarespace website - and honestly? that seemed like way too many when I first started using Squarespace 7.1
It took me a few months to get the hang of it, but these days, I regularly utilize at least 6 of the 10 in every site I build and in this episode of thinkinsidethesquare I’ll tell you how - and why.
-
0:00:05
When you wanna change the color of something on your Squarespace website,
0:00:08
it can be a little overwhelming these days. Inside your design menu,
0:00:13
you have a color palette, and then you have 10 different color themes and a huge list of things inside
0:00:17
those color themes. Honestly, it seems like way too many options compared to our older version of Squarespace version seven.
0:00:25
It did take me a few months to get comfortable using these colored themes,
0:00:28
but these days I regularly utilize at least six of the 10 in every site I
0:00:33
built. And in this episode of Think Inside The Square,
0:00:35
I'll tell you how and why.
0:00:42
Welcome to Think Inside The Square,
0:00:43
a podcast full of quick tips and tricks to help you create a Squarespace website
0:00:47
that you're proud of. I'm your host, Becca Harpain,
0:00:50
creator of Inside the square.co. And in this episode,
0:00:53
I'm sharing my techniques for using Color Themes and Squarespace to create a
0:00:57
cohesive and branded look on the websites that I built For a transcript of this
0:01:02
episode, along with the links to any resources mentioned,
0:01:04
visit Inside the square.co/podcast.
0:01:08
The term Squarespace is a trademark of Squarespace Incorporated.
0:01:11
This content is not affiliated with Squarespace Incorporated.
0:01:18
Back in the olden days of Squarespace, version five and even version seven,
0:01:22
we had a big old list of all the things on our Squarespace website,
0:01:25
and we can change the color of each one individually. It was a lot of work.
0:01:29
If you wanted to update something like an accent color for a client,
0:01:33
you had to hop in there and click on every tiny little circle and make every
0:01:36
tiny little change that you could Color palettes completely got rid of that in
0:01:40
version 7.1. When you click on site styles and click into your color options,
0:01:45
you have five colors in your color palette. Now,
0:01:48
I recommend having two light colors, one accent color, and two dark colors.
0:01:52
That's kind of the design standard that Squarespace has built our color options
0:01:56
around,
0:01:57
and you should definitely do that before you adjust anything inside a color
0:02:01
theme. You'll notice as soon as you change a color in your palette,
0:02:05
it's going to update everywhere. Everywhere. That accent color,
0:02:08
maybe it used to be blue and you change it to purple. Well,
0:02:11
now it's purple in every single color theme,
0:02:14
but you're not limited to this color palette.
0:02:16
If you click end to any color theme,
0:02:18
you'll be able to manually adjust individual items.
0:02:21
But I'm getting a little ahead of myself here because this is a podcast after
0:02:25
all, nothing visual happening here.
0:02:27
So let's pull back a little bit and talk about these color themes. In general,
0:02:31
I had to have a big mindset shift to be able to use them properly,
0:02:35
and I want you to have the same aha moment.
0:02:37
When you look at this list of color themes, you'll see that they're named,
0:02:40
we've got light one, light two bright, one bright two dark one dark two darkest,
0:02:45
one, darkest two. At first,
0:02:47
I thought it was just a little lack of creativity by the team at Squarespace,
0:02:52
but I'm sure you get the idea pairs. They want us to think in pairs.
0:02:57
What this means is you can have two different page sections right next to each
0:03:01
other. Let's say one of them is bright one and one of them is bright two.
0:03:06
Both of these page sections can have the same color background,
0:03:09
but each one can have a different color primary button.
0:03:13
This gives you the option,
0:03:14
add some contrast to your design in just a few clicks.
0:03:17
But when someone looks at that page, it still looks like a cohesive section.
0:03:21
So I want you to have that mindset shift. Start to think in pairs.
0:03:25
Once you're comfortable with that, I want you to throw in a wild card.
0:03:29
I like to create two wild card sections in my website,
0:03:33
one with a dark background and one with a light.
0:03:35
But this is where I use a more creative color accent,
0:03:38
like maybe an orange list section arrow,
0:03:41
where a button that really pops with a more vibrant color than anything else in
0:03:45
that color theme. So once you have your pairs of color themes,
0:03:48
your too light and you're too dark,
0:03:50
I want you to create one wild card for both of those that really kicks things up
0:03:54
a notch. Now,
0:03:55
the last tip I wanted to share with you was about using these color themes
0:03:58
strategically. Now, to be super clear,
0:04:01
not all the websites I create need this additional theme I'm about to share with
0:04:04
you, but I want you to consider it because it can be really helpful.
0:04:08
The header of your website can be set to adjust dynamically.
0:04:11
You can take the color settings from the first page section on that page.
0:04:14
It's kind of cool, but sometimes kind of not.
0:04:17
So I like to create a color theme that's reserved for my main navigation.
0:04:23
In that color theme, I focus specifically on background, site title, navigation,
0:04:28
link, color settings.
0:04:29
And I also like to use this same theme for at least one main section of my
0:04:33
website footer.
0:04:34
Keeping a high contrast and changing the default color for the active Link.
0:04:38
I've also had clients who had a completely different style for the mobile
0:04:42
version of their website inside Squarespace. That's called the menu overlay.
0:04:46
And you could change the background color,
0:04:48
the link color than the button color as well.
0:04:51
And it only changes the mobile menu of your site and doesn't affect anything
0:04:55
else. So again,
0:04:56
I like to reserve one color theme specifically for my main navigation,
0:05:00
a footer section, and the mobile menu. Now, I did say that was the last tip,
0:05:04
but I've got one more and I can't believe I almost forgot about it.
0:05:07
This is an editing tip.
0:05:09
When you're working in Squarespace and you wanna change the color of something,
0:05:13
I want you to hop into that site styles menu and click on colors.
0:05:16
Click into a color theme, and if you click on something on your website,
0:05:20
it's gonna narrow down that gigantic list of elements to the one
0:05:25
to what you're trying to change. Give it a try.
0:05:30
Next time you're editing Squarespace inside that Keller theme,
0:05:33
click on something in the site preview and watch that humongous list shrink down
0:05:37
to just the options for what you're trying to change.
0:05:41
Now if you do click that by accident, click show all at the very top,
0:05:44
and it'll go back to that big old list of all the items.
0:05:47
But that's a super helpful thing when you're editing and you don't know what
0:05:50
something is called or you can't find it in the list. So there you have it.
0:05:56
Creative ways to use color themes, think in pairs.
0:05:58
Utilize a wild card for some eye-catching contrast.
0:06:02
Don't feel limited by your color palette.
0:06:04
And consider creating a color theme specifically for the global elements of your
0:06:09
site, header, mobile menu, and an important section in the footer.
0:06:12
And if you're brand new to Squarespace and want a little more help setting up
0:06:16
your site styles,
0:06:17
check out my course on creating a website with squarespace at insidethesquare.co/start
That's hinsidethesquare.co/start.
0:06:26
Thank you so much for joining me for this episode. I truly hope you enjoyed it.
0:06:30
For a transcript of this episode along with the links to any resources
0:06:33
mentioned, visit inside the square.co/podcast.
0:06:37
Thanks again for listening, and most importantly,
0:06:39
have fun with your Squarespace website. Bye for now.
-
Learn how to use Squarespace: insidethesquare.co/start
Color Theme Overview: https://www.youtube.com/watch?v=8kxX0WlzL20
