Brand new to Squarespace? Start here → https://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!
https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff
– – –
💸 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 → https://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 👉 https://insidethesquare.co/css
– – –
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
– – –
🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → https://www.instagram.com/thinkinsidethesquare
👍 FACEBOOK → https://business.facebook.com/insidethesquare
📌 PINTEREST → https://www.pinterest.com/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 ♥
