NEW - How To Create Shapes in Squarespace // Squarespace Shape Blocks 

Brand new to Squarespace? Start here → insidethesquare.co/start
- - -
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.
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
}
- - -
I use this free Chrome extension to grab block id’s; not affiliated - just a fan!
chrome.google.com/webstore/de...
- - -
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
🔗 PARTNER10 → insidethesquare.co/partner10
- - -
🤩 Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 insidethesquare.co/css
- - -
🙋 Need some help? Visit ​insidethesquare.co/code-help​ to see my current support options.
- - -
🥰 SUPPORT MY CHANNEL → paypal.me/insidethesquare
💻 WEBSITE → insidethesquare.co
📧 NEWSLETTER → insidethesquare.co/email
🤳 INSTAGRAM → / thinkinsidethesquare
👍 FACEBOOK → / insidethesquare
📌 PINTEREST → / insidethesquare
- - -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥