A Beginner’s Guide to Squarespace Shape Blocks

Get creative with your design using customizable Squarespace shape blocks!

Squarespace shape blocks are like your website's colorful building blocks. They let you add fun geometric shapes (think squares, circles, triangles, and more!) in all sorts of sizes and colors.

These shapes are a fantastic way to add a decorative touch, break up text, or even highlight specific areas of your content.

They're super versatile; you can customize them to perfectly match your website's style and personality!

How to add a shape block to Squarespace

Here are a few examples of shape blocks with different design settings:

  1. Select edit on the top left-hand side of your website preview.

  2. Click the add block option on a fluid engine page section; shape blocks are not available in classic editor.*

  3. Select the shape option form the list of content blocks.

  4. Double click on the shape block, or click once and select the pencil icon to open the content block edit options.

  5. The design tab is where you will change the style of the shape block.

  • Select the shape you want to use; at this time we can’t upload custom shapes.

  • Chose to have the shape stay in proportion or stretch to reach the content block edges.

  • You can use the styling section to change the color of the individual shape, apply a blend Mode, add a border (stroke) a drop shadow, or use a blur effect.

*Classic editor is used by blog posts, additional product details, individual events, and sites built on version 7.0 Learn more inside Squarespace Made Simple*

Squarespace shape block design settings

  • Many of the design settings for a shape block can be found on the design tab for the individual block.

  • You can use the styling section to change the color of the individual shape. This is where you can select a blend mode, add a border (stroke) a drop shadow, or use a blur effect for the shape or content behind it.

  • You can also layer shapes with other content blocks, including other shapes, to create even more unique designs!

How to customize the Squarespace shape block with CSS

These tutorials will teach you more about the shape block, including how to customize the style of it using simple CSS code.

Featured
How to add a drop shadow to a shape in Squarespace

In this tutorial, you’ll learn how to create more dynamic layers in Squarespace by adding custom shadows to shape blocks! This tutorial will teach you how to create the code, add it to your site, and customize it so it’s uniquely yours.

Read More →
Creating Shapes in Squarespace

In this Squarespace tutorial, you’ll learn all about the brand-new Shape content block in Squarespace! I’ll show you how to add it to a page section on your site, how to change the shape and color, how to add a drop shadow, and how to layer it with other content.

Read More →
How to create list item shapes in Squarespace

Just because it’s built with Squarespace, doesn't mean a list section has to be square ;) In this step-by-step tutorial, you’ll learn how to create a unique shape for a list item using custom CSS.

Read More →

Where you can learn more about Squarespace content blocks

Squarespace Made Simple

This mini course for beginners will teach you how to create your first Squarespace website. Lesson seven includes information about content blocks.

LEARN MORE →

Squarespace Support Article

Learn more from the official Squarespace support blog

Squarespace

made simple

Get all the info you need to confidently

launch your Squarespace website ASAP.

Previous

Scrolling Block
Next

Social Links