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
}