How to create list item shapes in Squarespace // Custom List Item Shape Tutorial

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.
- -
This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: insidethesquar...
- -
In this Squarespace tutorial, we’ll use some clever CSS to change the shape of a list item and reset the shape specifically on mobile.
---
Squarespace just released a brand new feature for page sections in version 7.1 called Section Divider. I created a NEW tutorial where you'll learn how to access these new design options and what your settings are. → • New Squarespace Featur...
---
All the codes from this tutorial are below, BUT there are a few things you need to know:
→ This is specific for list page sections in version 7.1, an auto layout found under the people section.
→ There is more than one way to do this! Code is super customizable, and this is my technique.
Here are the codes from this tutorial. This first set is for changing the shape of the list item on every device.
.list-item {
border-radius: 25%
}
.list-item{
border-radius: 35px 0
}
.list-item{
clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
}
This code changes the shape of the first and last list item on desktop:
@media only screen and (min-width:640px){
.list-item:first-of-type{
border-radius: 35px 0 0 35px !important
}
.list-item:last-of-type{
border-radius: 0 35px 35px 0 !important
}
}
- -
I use this free Chrome extension to grab data section and block id’s; not affiliated - just a fan!
chrome.google....
- -
💸 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 → insidethesquar...
- -
🤩 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 👉 insidethesquar...
- -
🙋 Need some help? Visit ​insidethesquar... to see my current support options.
- -
🥰 SUPPORT MY CHANNEL → paypal.me/insi...
💻 WEBSITE → insidethesquar...
📧 NEWSLETTER → insidethesquar...
🤳 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 ♥