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

Music Credit: Arpenter // Audio Editing: Adobe Enhance

insidethesquare

Squarespace Circle Leader & Creator of InsideTheSquare.co

https://insidethesquare.co
Previous
Previous

16: How to sell anything on Squarespace

Next
Next

14: 5 tips for easier editing of a Squarespace website