Join Brian Wood for an in-depth discussion in this video Make basic template style changes, part of Squarespace 7 Essential Training.
- We can also make changes to the overall site by editing the styling of the template and that includes generic formatting like colors and fonts as well as specific styling for each template. And this definitely something we'll want to do to customize our site. So, if you logged into your trial site and you click on Design over here, make sure you're in the Design area, that's where we left off last time, the last video, you'll see what's called the Style Editor. There are a lot of styling choices that we can do in here. If you scroll down in here, I'm not gonna cover all of these 'cause there's just too much, but it breaks it down into different sections.
We have the header, we have navigation, the banner section which is typically kinda the center area out here, coming in towards the top. We have the main content which is obviously the content that's the main area. We have a Blog, if you have a blog. We have Prefooter and we have Footer. Now, if you scroll all the way down on the site here you should be able to see that we have, like, here's the footer down here. Sometimes you'll see, like, this could be the prefooter. It really depends on the template itself. Now, what I love about Squarespace, once you scroll all the way down here you're gonna see this button, is we can always reset to the defaults.
If you pick a color, you don't like it, and you wanna go back to the template default, just click this button, I love that. Scroll all the way to the top. Let's start at the top here with the header. I'm gonna scroll all the way up. And you're gonna see that we have what's called the Header Background Color and we have Transparent on Banner Images. All these settings, at least a lot of these settings, are gonna be a little different depending on the template you're in. That's why I told you to pick the template I chose. Now, if you turn off this option right here you're gonna see that the bar up there, if I scroll down, is actually not transparent.
So, we can say, make it transparent or not. You're also gonna see a logo container right here. This is important 'cause if we put a logo in there that was a little bit too, maybe it was really wide, for instance, we wanna make sure that it's about the width of the logo. So, I'll say 300 or something like that, okay? That makes it so that, look at that, beautiful, okay? It works and it fits in there. It looks great. You also see Header Background Color. If we turn off Transparent and you come to Header Background Color here you're gonna notice that a lot of colors that you can choose will have this type of interface.
You can go in and make a change. You can see something like this. And it will just change it for you. We have a color wheel and we can kinda work that way, okay? All right, and you can click to get rid of it. Now, the thing I love too is that you're gonna notice that there are little dots to the left over here. This tells you that you've changed something. If you don't want to change anymore you can always click on the X that shows and it will remove what you did and replace it with the default. Love that. You will also notice if you come out here, hover over things, like, let's say you hover over the main header up here.
If you click on this when you see a blue highlight show up it's gonna focus on just those formatting options. This is really cool. Scroll down a little bit. Anything within that container now, Site Header, Site Navigation, will show up. The rest of it has been filtered. If you wanna show it all again you can click Show All. So, click Show All and you'll see everything again. Go on ahead and scroll down a little bit and you're gonna see that we have our site navigation over here on the right and we have this orange-y color right there. I'm gonna change that color. So, if you come over here you're gonna see Nav Link Color, Nav Link Font.
If we wanna change the font, click on the arrow there, and we can go in and pick a font. There's a bunch in here. There's not a bunch of fonts and formatting styles and things like that. If you wanna change the actual font family you can click on the arrow to the right of, let's say, Freight Sans Pro, and there's a lot. You scroll down you're gonna see that there is Typekit in here with integrated with Google Fonts and there's a ton of fonts you can work with. I'm gonna leave it alone. I'm gonna let you do what you want. You can also search for a font, type it in. We can change the font size if we want to.
I can go a little bigger, a little smaller, and you'll notice that we have a little slider here to be able to change that, which I love. We can do transformations, letter spacing, which is kinda neat. You can change the distance between the letters. A lot of these are just kinda, you just kinda mess around a little bit and see what they do. Now, as far as the color is concerned, go on and click on Nav Link Color, click on the circle there, and it's gonna ask us to pick a color. I want us to choose a specific color. You're gonna see here that we actually have transparent, which is this little slider right here.
You can make it somewhat transparent. And we have what's called the hexadecimal value down here. Now, I'm gonna go over to Illustrator, and I've got Illustrator open, I've got this color picker here. We wanna type in this value: E27E1B. I'm gonna be lazy and copy paste it. So, I come down here and I'll just paste it in there if it lets me. There we go. We want that color. That's what I really like. So, what I want you to do is make sure that you copy that. So, you can hit cmd + c on Mac or ctrl + c on Windows, and we're gonna go out and change it for, like, the button color and different things like that.
Anything that has that yellowy color. We're gonna kinda make the change. So, if you click on this button color right here, come down here, and just cmd + c on Mac, or ctrl + c on Windows, and paste it in, or just type it in, doesn't really matter. We wanna make sure that pound sign is in there and if you scroll down a little more you can see Banner Text Color we can do the same thing. Yes, this is kind of annoying. Going in and making sure, and changing all of these colors here but it's something that we need to do if we want to make them all consistent.
Now, this is gonna be a little bit hard to read. We might need to change that a little bit later but we can see that. You're gonna see down here that we also have as far as navigation, for instance. Go up to the top, go up towards the top here. We have what's called a Nav button. The Nav button is something that shows up on the far right over here and it's a button that you can click to go to automatically, and you can set up, I guess you could say a page to do that. We can say I want different styles for that. It can be raised, it can be solid, it can be outlined. We can set it corner, like a pill, we can make it rounded.
We can do different things there. And that's making it so that's there's a Nav button. Typically this Nav button is an action button. It's something you want somebody to do. You want somebody to sign up. You want somebody to buy. You want somebody to, well, in this case RSVP. That type of thing. We can change the font. All things, you can go in and go nuts with this. Scroll down a little more you're gonna see the banner section and we could go out there and hover and click on the banner and just see those options, and change those colors, and kinda work the way we want. Right now we're just gonna keep it as is.
We might need to change this orange-y color a little bit later on. If you wanna try changing the font, for instance, go ahead and click on the font here and you can pick another font. Go for it. In another lesson coming up here we're gonna show you how to work with Typekit fonts more specifically but for now, go ahead and try adjusting some things a little bit. You can see, like, Page Link Color. We need to change that color to match. I can paste in that color. We also have, like, Heading Color. We wanna change that color too. I'm pasting in that same orange-y color.
If you scroll all the way down you can also see that we can go in and do things for the footer like the background color, we can change Text Color, the Font, Info Color, and this is one of my favorite features here. You're gonna see Hide Site Info. If you scroll all the way down to the footer you're gonna see, there we go. You can see center of the navigation. First of all, you can turn that off, and you can see Hide Site Info if you want. Now, that's not gonna show that content out there if we wanna change that. The powered by Squarespace down here.
That's a little different. We're not gonna deal with that right now but we could get rid of that if we wanted to. All right, go ahead and save this. It should save your content and go back to Design by clicking the arrow, and you can see that Squarespace lets us easily makes these changes to the overall site styling like fonts and colors. That includes generic formatting as well as specific styling for each template. Definitely something, once again, we will want to do to customize our site.
- Editing your profile, site logo, and site title
- Changing the template
- Adding custom CSS and Typekit fonts
- Setting up pages
- Understanding site navigation
- Editing content: banners, footers, text, images, and more
- Adding a gallery block
- Adding a blog
- Upgrading your Squarespace plan
- Creating a custom domain