How to use Squarespace's NEW shape block (Fluid Engine update)

This post may contain affiliate links. We may receive a commission for purchases made through these links (at no cost to you, of course! πŸ™‚)

By now you're probably familiar with Squarespace's Fluid Engine, which is the new editor for Squarespace 7.1 websites. Ever since the launch of Fluid Engine in June 2022, Squarespace has been rolling out updates that make the customization and design of your website easier.

Most recently, they launched the Shape block feature! Shape blocks are a great way to add fun graphic elements to your site that you previously either needed to code or build separately in a graphic design program.

There are so many ways you can use the Shape blocks: you can use them as standalone graphics to add something extra to your layouts, overlap them with other blocks to create a more dynamic and customized look, use them as a background for text, and many more!

 
How to use Squarespace's NEW Shape Block (Fluid Engine update) example Maya Angelou quote
How to use Squarespace's NEW Shape Block (Fluid Engine update) example
How to use Squarespace's NEW Shape Block (Fluid Engine update) example drop shadow
 

In this tutorial, we're going to walk you through how to add a Shape block to your website and how you can customize it to match your site.

Note: Shape blocks only add a solid color shape to your website. If you want to crop an image into a fun shape, you'll need to use an image block.

Let's get started!


How to Add a Shape Block

Note: Shape blocks are only available in Fluid Engine sections.

You can add a Shape block in the same way you add any elements in Squarespace Fluid Engine. You'll start by going into Edit mode using the button in the top left corner.

 
How to use Squarespace's NEW Shape Block (Fluid Engine update) edit mode
 

Hover over the section you want to add a Shape block to and click Add Block.

 
How to use Squarespace's NEW Shape Block (Fluid Engine update) add block
 

In the pop-up block menu, scroll down until you find the Shape block and click it to create a new shape.

How to use Squarespace's NEW Shape Block (Fluid Engine update) add shape block


How to Customize a Shape Block

Now that you've added a Shape block to your page, let's dig into the customizations Squarespace's Fluid Engine offers!

First, you'll need to open the Shape block editor by hovering over the Shape block you've created and click the pencil icon.

 
How to use Squarespace's NEW Shape Block (Fluid Engine update) edit shape block
 

This will open up the design editor menu. The first design choice you can change is the Shape. Click the drop-down menu under Shape and select the shape you want to use.

 
How to use Squarespace's NEW Shape Block (Fluid Engine update) edit shape block design
How to use Squarespace's NEW Shape Block (Fluid Engine update) choose shape block design
 

If you're looking for a rounded rectangle you can use the default square shape and change the corner radiuses to achieve the look you want.

By selecting the first option and inputting a radius value, you'll round all four corners of the shape the same amount. You can also change the individual corners by choosing the second option and inputting separate values for each corner.

 
How to use Squarespace's NEW Shape Block (Fluid Engine update) add rounded corners
How to use Squarespace's NEW Shape Block (Fluid Engine update) rounded corners radius
 

The next design option is Stretch. Switch the Stretch toggle on to make the shape fill the block. This will change the shape's proportions as you resize the block by clicking and dragging its boundaries.

How to use Squarespace's NEW Shape Block (Fluid Engine update) stretch
 
How to use Squarespace's NEW Shape Block (Fluid Engine update) stretch
How to use Squarespace's NEW Shape Block (Fluid Engine update) stretch
 

If you disable the Stretch option, the shape will maintain its original proportions when you change the size of the block.

 
How to use Squarespace's NEW Shape Block (Fluid Engine update) stretch off
How to use Squarespace's NEW Shape Block (Fluid Engine update) stretch off
 

You can also change the color of the shape block without any custom code. Click Color to open up the color menu. Here you can choose a color in your website's palette or you can click on the Custom tab to find another color.

How to use Squarespace's NEW Shape Block (Fluid Engine update) change color
 

The last customization is adding a drop shadow. Switch the Drop Shadow toggle on to add a drop shadow to your shape. Play around with the Angle, Distance, Blur, and Color settings until you find a look you like.

 
How to use Squarespace's NEW Shape Block (Fluid Engine update) drop shadow
 

The Shape block is another way Squarespace continues to make it super easy to customize your website layout without the need for any custom code.

Be sure to follow us for more Squarespace content and to learn about new features as they are released, like this one!

Check out more Squarespace tips here πŸ‘‡

How to resize and crop images in Squarespace 7.1 Fluid Engine
How to edit your button design in Squarespace 7.1
How to create a β€˜featured post’ slider in Squarespace 7.1 & 7.0
How to animate your links on hover in Squarespace 7.0 & 7.1
How to create a dropdown FAQ in Squarespace

 

If you liked this post, Pin it to Pinterest! πŸ‘‡πŸ»

 
How to use Squarespace's NEW Shape Block
 
Previous
Previous

How to add a chatbox to your Squarespace site for FREE (2022 Facebook Messenger update!)

Next
Next

How to monetize your Squarespace site with Google AdSense