Designing in Style Editor in SquareSpace
Lesson 14 from: Squarespace 101: Build a Site that Shows off Your WorkYvonne Perez Emerson
Designing in Style Editor in SquareSpace
Lesson 14 from: Squarespace 101: Build a Site that Shows off Your WorkYvonne Perez Emerson
Lessons
Class Introduction
08:14 2Add Settings Tab and Basic Info in SquareSpace
07:41 3Create a new page in SquareSpace
06:07 4Make a Page with a Slideshow in SquareSpace
14:35 5Add a Rule on a SquareSpace Page
08:07 6Edit SquareSpace Gallery Layouts
05:18 7Arrange Text on the SquareSpace Page
06:47 8Questions on Setting Up SquareSpace Pages
08:23Make Your Portfolio Better with Descriptions
05:48 10Add About Page in SquareSpace
09:59 11Add Blog Pages
10:42 12Connect Social Media Accounts to SquareSpace
05:07 13Additional SquareSpace Site Tools
02:20 14Designing in Style Editor in SquareSpace
09:05 15Typography in SquareSpace
12:23 16Announcement Bar in SquareSpace
03:25 17Add Social Media Feeds to SquareSpace Pages
13:58 18Cover Pages in SquareSpace
15:05Lesson Info
Designing in Style Editor in SquareSpace
so that brings us into design and the style editor, Um, I want to show you so you can see that it might be. Let's try it here. That's not much bigger. But so on this one, you can see that I went in and got hex color. So you want to use a hex color for on the Web and Photoshop will help. You are Are any of the illustrator you can get your hex colors through that? And they are a pound sign with, like, six numbers attached to it. So if you have a certain PMS color Pantone matching system color, there's always hex, a matching hex color, that you can get it for the web. So I went ahead and did, like all of my hex colors for everything my h one h two and then typography and go for it so forth. Um, so under design, we have the logo and the title. Um, and you can upload a logo. I'm not gonna up a little logo for this site, but you can upload one, and it will be in place of this. Okay, um, and you can upload a fab icon and you can have a new image that you put on your like a watermark that you ...
put on your images. If anybody wants to do social sharing, if you enable social sharing of your images, so when they share it, he would always have, like, something on top of that. And you can learn more about that in the section here. But we'll go ahead and upload a fabric on here. So I have it, Um, a peeing RJ Peggy doing photo shop. I made this at 100 by 100 pixels wide, and I'm just gonna put it in there and eventually will see it up there. And then all you do is hit, Save. Um, there's a lot more, but we're going to start with the style editor. Actually, I want to go to so one thing about being in the style editor is you can't, um, once you get in there, you can't switch pages. So, you see, I had to go back, so I wanted to be at the homepage, so I could really kind of look at something, maybe actually want to be in flora because it's more of a page with typography and everything. Um core. Cora's better one because it hasn't. Yeah, um, So I'm gonna go into the style editor and because I already made my handy dandy cheat cheat. I could come in here and change all of this through that. So And this is great, because then you've already got your colors and you can start copying and pacing, so site color. Um, and I just go through. I don't want to change the background. You can add an image to the background if you want Teoh. But I'm just gonna go through and And I think I've already set up the document for you. So it's already like, here's of the site color. Here's everything. So you see, the hex color comes on, you can move around and find different. This will changes, but I have my color already, and I'm just going to paste it in. And that's it. Um, that is not my color. Um, and have her color. Same color. Subtitle color Just got to go through it. Navigation color doing it. Oh, I know what? There we go. Got to make sure that that sign is in there like my colors aren't changing. Um, again, the quirkiness of squarespace. I like it, though. Keeps you on your toes. Here we go. So the important thing about color, um, this out. I have this happen all the time. People will come to me and be like I tried it, and it it seems all easy. But no matter what, I can't make it look the way I wanted to look. Well, you are a plumber, and you're not a designer, right? That's why designers, you know, no typography and color a little bit and other people. And so I get people coming to me all the time. There's a big there's a lot of work to put into typography and color and branding and everything. So even though they have this stuff here, you do still need that kind of critical eye and that on navigation. Um, so my point was earlier that you, um, want to make sure that you're not using too many different colors. Um, how that I want this to be car, um And you can go in, and it certainly you can not. Maybe you don't know. You know, you don't know hex colors or anything. So what you could do is go in and figure out your coloring here and then just copy and paste with just like I did that. But then you have a lot more things that you need Teoh get to as well. So this has got a little invisible scrolling bar here, but it's their, um and you can see that I've got my top one, but I have a lot more coloring to change, so I'm just quickly go through and grab all So rather than going opening up one copying it, opening and pasting in each of the one. If I just have this document, it's just a lot faster. And we like fast, um, and usually, um, sometimes, um, the colors are the same. Sometimes they're not, because I want to show depth and, um hierarchy. So I'll do that with color. And I'll do that with typography in the design. Bobby a loves anybody. Copy. Okay. Good stuff here on day, also like links. You know, for me, a link color is Anak Shin item. So you know, whenever you're doing some kind of action, try to keep consistent with what your link color is. So, um, that's nice to do. Okay, social like on color in this. Um, And this template also lets you do, like a page border color starting at the light Grand. I'm leaving at that. You can choose to change it. You can change your background, everything, um, in an under settings.
Class Materials
Bonus with Purchase
Ratings and Reviews
user-8b437f
I have watched other Squarespace webinars that haven't given me the confidence to tackle building my digital portfolio like this one has. Yvonne is easy to understand and provides just what a designer needs to know to get started. This course was exactly what I needed to get me going!