Customizing colors on your website

A quick walk-through on how to add your brand colors & fonts to your Squarespace 7.1 website!

this video covers:

OVERVIEW OF BRAND COLOR PAIRING
changing site theme colors
using section themes
customizing colors in content

For more information, PLEASE see this documentation from Squarespace.

VIDEO TRANSCRIPT

 Hey there, it's Alana from Elo Creative Studio and in this video I'm going to show you how to upload all of your colors to 1 Fluid Engine site and how to use your site color themes strategically so you don't have to make too many edits to your color palette.

Let's dive into it.

So obviously for putting your colors onto your Squarespace website, the first thing you're going to need is to have your brand colors firmly established and decided upon before you start this process.

If you don't already have your color hex codes, I recommend using this little plugin for Google Chrome for pulling colors from anywhere on the internet. It's called ColorZilla, so you can just simply Google that and download it for Google Chrome as a plugin, and it lets you pick colors directly from the website.

So pick color from page, and then I can just select this blue, and it's already copied to my clipboard. So that's a great way of finding colors on webpages if you don't already have brand colors established.

The way that we want to use the colors on our website is by understanding our section themes. If we go into edit, And then our site styles with our little paintbrush icon go to colors. You'll notice that we have section themes that have been determined by all of the colors that we've plugged into our palette.

The names that Squarespace gives these colors are lightest, light, bright, dark, and darkest. So we have two themes for our lightest color palette, two themes for light, two themes for bright, so on and so forth. The biggest thing to know when you're plugging your colors into your Squarespace themes is that this first color, you'll want to set this as your primary site background color, which for most websites and most brands is going to be your lightest color or just a general white

your opposite color on the end of the spectrum, the darkest color, is going to be the color that you want to set as your primary text color.

So again, for most websites, this is going to be white or your lightest color, and then this is going to be black or a black alternative.

 It's important to note, too, that depending on your brand and your site design, this could actually be inversed. So if you have a darker, more moody brand where you're going to have a website background that's a darker color, your lightest theme is actually probably going to be your darkest color, because you want that to be your background color. Whereas your darkest color is actually going to be your light text color.

So for example, with this template variation, you'll see that in practice. So our lightest color, our background color, is actually this dark green, and our "darkest" color is actually going to be the lightest color on our palette because it's this light text color. So that is why it's important to pay attention to these themes and focus on that first color being your background color and the last color being your primary text color.

 For our other colors, this is where it gets really dependent on your colors that you have for your specific brand. You'll want to plug in your accent colors and don't worry if you have more than five brand colors, because you will still be able to manually customize and add colors to individual elements across your website.

 If you don't need multiple accent colors, you should treat this bright color, this middle color,

as your secondary text color for sections that use your secondary background color. For example, our whimsy template only has four brand colors, this off white, this yellow, this blue, and this white. So I actually duplicated the blue in two different spots because I knew that I wanted to have sections that had a yellow background with blue text.

Overall, you don't need to worry about this too much because you can manually change colors for all of your elements in each individual theme, but being strategic about where you plug in your colors to your palette is going to be helpful for creating themes that are already ready to go that you don't have to customize or tinker with too much.

To add a new color, we'll just click Edit Palette, and then click on the color we want to change. So if we want to change our background color, you can either enter your hex code here by just copying and pasting it, or we can actually select a color by just moving our cursor around. That's a fun bright yellow.

Then, same thing, just repeat the process for all these individual colors, remembering that this is going to be our primary text , and it's as easy as that.

You can always choose from presets that Squarespace has, but I'll be perfectly honest, they're not the best. And then you can also upload an image and play with picking colors from that image as well, which can be fun to play around with.

How do we change colors across our site? If we go back into our editor, we can actually click on any specific text element, and we can customize the color for each individual element. For example, let's say I want to change this to our yellow, I want to change this to blue.

It's really simple and easy to do. You can also add a custom color, as I was mentioning. So instead of choosing from our palette, we can go to custom, and we can choose any color, or we can plug in our hex code by copying and pasting as well. So that's really convenient. If you have more than five colors that you're using across your site, plug in the five colors that you'll be using most frequently, especially for backgrounds and text colors, and then you can customize individual sections with your individual custom accent colors.

If we want to add a new section that has a different background color using one of our section themes, we'll press edit. We'll go to the spot where we want to add a new section, click add section, add blank section.

And then if we go to Edit Section and Colors, we'll be able to choose a predetermined theme. So let's say we want this yellow section, and we want to add some blue text.

We'll set it to Heading 1 so it's nice and easy to see. And it already is defaulted to a blue text because that's what we have selected for our section themes. But let's say we have this section theme that has the yellow background, but we actually want to change it so that the text is white instead of blue. We'll go into the specific section theme, so you'll see when we pop into our colors for our site styles, each section will show you.

the individual theme that it has. So this is our light one. So let's say we want all of our light one sections across our entire site, not just this one section, but any section that we set to our light one theme, we want it to have white text. We'll go in here and press edit, and then we can actually see every single element that populates within Squarespace.

Don't worry about having to know what all of these are. I don't even know that because Squarespace makes it really easy to select the specific element that you're looking for. You can go ahead and just hover over the item and you'll see this little box populate around it. You'll just click it and it'll automatically take you to what that item is.

So we'll go ahead and change this to white. And we'll go back to show all so we can see all of our colors to see our changes. So we'll see that change has been made right here. If we want to make sure that every single time we're typing any text within our light one section, we want it to be white instead of blue, we can change these all here.

This is, again, why it's important to be strategic about what we're picking for our colors and where we're plugging them into the palette to begin with. Because ideally, we want to minimize the number of times that we're having to go in here and manually change all of the colors for all of our text, for example.

Buttons are another one that we can customize with colors. We'll go into Edit, Site Styles, we'll go back into Colors, and then the button colors are going to be individual for every single theme. For our button colors for our main theme, which is always going to populate as lightest one, you'll just click edit, and then you can scroll down past our text options to buttons.

And again, you can also just click on a button specifically, and it'll showcase the options for that specific button. In this case, I'll go ahead and change all of them so you can see how they operate. So the primary button background, that's button number one here. Let's say we want it to be yellow.

Now we can see it's been changed automatically. The button text is going to be the text color when it's visible on hover. So let's say we want it to be blue when we hover. Now you'll see the button text has changed. Same thing with all the rest of them, we can change the individual colors.

For more button customizations on how to create these hollow buttons versus these solid buttons, see my video on button customizations as well, because that's a separate lesson.

On some of my templates, there are custom features like this hover effect on this header, and the method for changing that coloration is a little bit different, so just make sure that you see the template specific tutorial videos for instructions on how to edit those pieces.

Squarespace is a trademark of Squarespace Inc. Elo Creative Studio is not affiliated with Squarespace.