Using and Customizing Squarespace's New 'Shapes' Block
Fun New Feature
Today I'm going to be sharing with you how to use the new fun shape block in Squarespace.
Transcript below!
-
00:03 Hello, it's been a while. For me at least, I have been a little bit under the weather. So if you don't know me, I am Ellie and I am obsessed with halting Squarespace and all things systems.
00:15 Today I'm gonna be talking to you a bit about how to use the new fun shape block and score space.
00:21 So let's get started. I'll make myself tiny now. There we go. Okay, so this is just a little like demo.
00:28 I've done it, but I'm gonna, let's recreate this and let's see what else we can explore. So first things first, If you go to the bottom of this section, you'll see a new section here that says a new block here that says shape.
00:39 Go ahead and give that a click. It shows up here like a big square, big gray square. It shows up as gray for mine because that's in my branding colors.
00:50 It's sort of the like muted one in my branding colors. So if you go ahead and hit edit, you can see you can change, and I put this over here.
01:01 You can start by just changing actually before you can change the corners. So you can say I want to add a 30% border radius to this, or, or, sorry, I did 300 there, which is why it's a lot.
01:18 Or you can make all of the different corners different inside of it's stretch or square. So this is square, that's a rectangle obviously.
01:27 And you can decide on the color. So let's make this yellow like the other one. And I added a drop shadow.
01:33 It will automatically you can change the angle, the distance, the blur. So right now you can see it's quite small.
01:41 I'm gonna make it a lot more obvious for our reference here. And then I'm also gonna make it burgundy. And then I'm gonna make it, you can see I can increase how blurry that is.
01:55 And then I'm gonna make the burgundy a little more transparent. So this isn't exactly the same as this one, but it's similar vibe.
02:04 And then we're gonna go ahead and change the shape. So we're gonna again, change it up a little. So it's not exactly the same as this other one we're doing, but similar.
02:12 So you can see there's all these different shape options. You can decide if I want that square or not. I'm gonna go with this four point star.
02:22 I'm not gonna stretch it and I'm gonna make it a lot bigger here. And then I'm gonna add an image over it.
02:32 So I'm gonna add an, add an image. I'm going to make that image a circle. I'm going to make that circle a little bit bigger and I'm going to see if I can keep it from getting stretched out into an oval.
02:53 It won't really let me, if I want this to be centered I can obviously fix that. If I wanted to make, make this one line bigger that I could probably stretch this out into a regular vault, still doesn't wanna be a circle.
03:10 The way that I would probably fix this is it's probably set to fit. I could set this to fit and then we will take a look.
03:20 So it'll be a little bit easier once we select an image. I have way too many images on my in my library already, so I'm not gonna bother with another and gonna let that upload for a second.
03:38 While it's thinking, let's go back, It's set to shape. There we go. Now that circle is round again. It sometimes just can get a little bit and you can turn an offer on that stretch.
03:50 Obviously in reality, if I were doing this, I'd probably want that image to be a lot closer to my face.
03:55 Because, so if I wanted to do that, you can always edit the image directly in Squarespace. It is a little bit slow to do but it's totally doable.
04:06 You can crop, I could crop that into a square, bring that way down and focus in on my face. And it saves that as a new file in your image library, your asset manager.
04:17 So I'm just gonna discard that for now cause I don't really care. So let's see what else we can do with this.
04:22 Let's add another block. So let's start with the shape block and put it just right now. It's down here. Obviously you can do it in your palette.
04:37 So I can make this burgundy, which is nine times outside of what I would do with my website design. Or you can change it to any color you want.
04:45 So you can drag this around or you can, if you know the rbg most people, you would probably be more likely to know the he code for whatever you want to be designing for.
05:00 So let's see. Let's just go with this blue. Let's create a really fun arch here. We're going to then make this bigger.
05:13 I'm gonna add a little drop shadow. I want it to be down on this end. So I'm gonna make it just a little bit further away.
05:21 And you can see it there kind of hiding there. I want it to be probably at 45 degrees. So let's go with that.
05:32 So it's kind of down there. I want the color to be a little more obvious. So I'm gonna go with the black and then I'm gonna make it a little more transparent.
05:40 <affirmative>. Now what I'm gonna do is add an image block and I'm going to make the shape the same which is in the two by three.
05:57 So they have the same shape going to add an image. So select that for my library and I'll just scroll down until I find one of me that one will do.
06:12 So I'm gonna let this, I'm gonna make this fit. So it's quite a similar size. Okay, so it's trying to, here we go.
06:28 I'm gonna set it to stretch. So now it will be, play a little bit more by our, our rules here.
06:36 Now I'm gonna put this Just like that one box up in each direction. Now, I don't really like the way that looks.
06:47 What I would probably actually do is see if I can play around with the gap here to get it just right or with the sizing of these.
06:57 So maybe if I made it a little bit bigger, it would look a little less funny the way that I want it to, right?
07:07 Or I could make it just a smid smaller and get it to sort of be centered in there. Now that's a lot of work, unfortunately, to sort of center things in fluid engine.
07:16 It's a nightmare when you're trying to customize, but it's definitely doable. So, okay, so just playing around with that. Like, it's not perfect, but it's kind of the vibe.
07:29 And then, and then, or we can go a little bit over to the side here maybe not quite that far over to this side.
07:42 And what I'm gonna do is just mimic this, make this a little bit bigger. And then, I don't know, I'm just playing around here.
07:53 But what I could do essentially is what I'm getting at is that I can then add other blocks onto it.
07:57 So it's at a block. I've got some text And we'll move that over here. Mm, I've had an idea. So let's make this go a little bit further down.
08:14 We're gonna drag this to just here. So we got now about this text block. You can write a caption for this photo section, and then you can make that text bigger and Bold and white.
08:33 So it's really easy to read. And what I would probably do obviously then is bring this to be centered in the graphic and then to be centered in the block itself.
08:47 This is trying to be Google Translate for me. And that's actually, it's relatively cute. Like it's not perfect. I would wanna play with this a lot more to get it to my own, like obsessive tendencies.
09:01 The other thing is, is I think it's quite big. It takes up a lot of my screens. So what I would actually probably do is now as I'm gonna hit shift and I'm gonna click, or I'm gonna select all three of these, you can just do that by clicking and dragging, I think.
09:15 Or is it command? There's a couple. There is a way to drag. There we go. There's a way to hit to hold onto more than one of these things and move them around.
09:26 I've just done this. Oh goodness, I've done it recently. There we go. So I just clicked that all in, all those and dragged.
09:36 And then also, while they're all selected, I could probably bring them all down one size just to Help it be a little bit less big on the giant screen.
09:51 The other thing is, is obviously I change my focal point here, so my face is actually centered and then I can do anything I want with this space over here.
10:00 Probably some more texts. And that's just a little fun section that I've just created. So this is, you can do like anything with these.
10:09 You're gonna see a lot of really interesting things happening in Squarespace with these people are getting really creative with them.
10:15 You know, I've centered these ones. I've centered this one too, but you don't have to center them. You know, they can sit behind your image or behind text, behind a video, really behind any one, Squarespace, other blocks, you know, they can sit behind a form, like they literally can do anything.
10:32 So my forms and Squarespace are they have to sit all the back with dark backgrounds. So I can see that there's no form fields.
10:49 Interesting. It's not giving me even the possibility to add form fields. So I would probably need to hit save and restart that.
10:55 But lots of different things. Any block in here, you can layer these and as we can as a reminder with fluid engine.
11:03 Oh, there goes, there it goes, right as I got impatient. You can move things to the back, move things to the front, like you can layer these in any way that you want.
11:16 So Get to having fun. Let me know what you think. Let me know if you have any questions. All right, talk.
