How to Use The Squarespace Shape Block

Heads up: this post may contain affiliate links. In other words, if you make a purchase using my link, you won’t pay a dime more but I’ll earn a small commission. My chips and salsa fund thanks you from the bottom of its heart… er stomach?

I'm back today with another tutorial about Squarespace. And this time I want to talk about the shape block. Now, shape block has been around for a few months. But I wanted to record this tutorial just to show you how you can use it, if you still haven't discovered it; or if you haven't had a chance to play around with it.

In this video tutorial, I want to show you the options that you have available for the shape block and a couple of creative uses for how you can use it on your website. If you haven’t used the Shape block yet, it allows you to add a variety of geometric shapes to your site. Let’s take a closer look at how it works.

Prefer to watch? Hit play on the video below.

How to Add a Shape Block in Squarespace

I'm here on a demo a blank website and I have a blank section where I'm going to show you how to work with the shape block. So, again, this is something that is available for Squarespace 7.1 and, more specifically, for the Fluid Engine editor.

So I'm going to click add block, and then you can either search for it by typing in shape or you can just scroll down simply on the right hand side. Click on the shape block, and that will immediately add a rectangle shape. Now, as you add the shape block to your page, you’ll notice that there are only a few options here.

You can edit the shape or you can duplicate it to reuse it on other parts of your site, or page. So I'm going to click edit, and this is where we have all the options for controlling how the shape block appears and what it does.

Which Shapes Are Available in the Shape Block?

So, first of all, there are several options to choose from. You can choose between square, rectangle, circle, triangle, diamonds, stars, and others.

Once you’ve selected your shape, if you toggle the stretch option, then the shape will fill out the entire container that it is in. As you resize that container, it'll adjust to fill that container .

Immediately below, you have the option for rounded corners. So if you select this first option, then any number that you type in here will round out all the corners. But if you select the second option, then you can control the roundness of each corner separately.

You can undo this by simply typing in zero four each value. This allows you to create some more custom looking shapes.

Customizing the Shape Block

Then, you have the color option, which allows you to choose any of the five colors that are in your palette. Or you can go with a custom color and choose another color from your palette that isn't currently on your site.

And then, finally, we have the option for drop shadow, which allows you to add shadow behind the shape. You can change the angle, which essentially controls where the shadow is positioned. You can control the distance, which is essentially the distance from the original shape. You can make it a smaller, which will make the shadow up here smaller, or you can make it bigger, which will make the shadow appear bigger.

And then you can play around with the blur, which essentially just makes it more blurry, which gives it this kind of like a soft glow behind the shape. Or you can remove the blur completely, which essentially gives the illusion that there is another shape behind it, which can be used to create a layered effect.

Creative Uses for the Squarespace Shape Block

Now that you know how to add and style the shape block in Squarespace, let me show you a few different things that you can actually do with this shape block.

In our first example, you can add like the shape behind the image to make it appear like the image itself has a drop shadow, which currently is not an option for the image blocks in Squarespace. So the shape block allows you to create this sort of illusion, or you can create this layered collage type effect here.

You can also position the shapes behind the text. So as you can see here, I have added a simple shape behind this text. And then by overlaying it over the image here, I have this cool looking effect, similar to the old-style image blocks in the Classic Editor in Squarespace.

Another thing that you can do is you can play around with the placement of the shape block and the text block to create more complex layouts with images with shapes and text overlaid on top of each other. For example, you could overlay several star shapes on the image or create a full row of star shapes to signify testimonials of reviews.

You can also add shapes instead of images in individual sections for a more unique and custom look than what is available in the pre-made sections that Squarespace offers.

Final Thoughts

And there you have it. Those are just some examples for how to use a shape block to spice up your Squarespace website but I hope this video gives you an idea of how you can use them and different ways you can apply them for a more custom look.

For more tips and tricks, check out these articles: