Creating Shapes in Squarespace

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

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.

Plus I’ll show you a CSS trick you can use to add a border and rotate the shape, making your site even more unique!

→ This is specific for Fluid Engine page sections in version 7.1 This feature is not available in classic sections or auto layouts.

→ I use this free Chrome extension to grab block id’s; not affiliated - just a fan!

Here are the codes for this tutorial:

The main selector is:

.sqs-shape

This is the code I used to create a border and rotation:

#block-1234567 .sqs-shape {
border:5px solid red;
transform:rotate(10deg
)}

And this is the code I used to change the background and border color on a hover:

#block-1234567 .sqs-shape:hover{
Background-color:pink;
border-color:purple
}