How to create a clickable list item in Squarespace // People Section Click Entire Item 

Squarespace list sections - sometimes referred to as people sections - have four main elements you can display.
An image, title, description, and a button, unique for each item. Unfortunately, the only clickable thing is the button! That was not good enough for a new website layout I’m working on, so I figured out a way to make the clickable area the entire list item, and that’s exactly what I’ll be teaching you in this tutorial.
To be clear - this is for a SIMPLE list section, and the button won’t be visible anymore but it is clickable, and yes, we can still create hover effects!
There are a few values you’ll want to change in this code - the height and the margin-bottom. You also might want to change the transformation, so be sure to watch the video so you can see how this code works and what you’ll want to adjust so it fits the content on your own site.
.list-item-content__button{
opacity:0;
width:100%;
transform:translatey(-95%);
border-radius:0!important;
height: 28rem!important;
margin-bottom:-28rem!important
}
.list-item-content__button:hover{
opacity:0
}
.list-item {
background:#fff
}
.list-item:hover{
background:#e5f5f6
}
🔗Links to Related Content 🔗
→How to install CSS in one page on your Squarespace site: insidethesquare.co/squarespac...
→How to target one section on your Squarespace site with CSS
insidethesquare.co/squarespac...
→Overview of list sections: insidethesquare.co/list
→Squarespace Length Values Guide
insidethesquare.co/resources/...
→ Free Training: Squarespace CSS Basics: insidethesquare.co/learn
- - -
❤️ Like this tutorial? Buy me a coffee to say thanks! ☕ buymeacoffee.com/insidethesquare
- - -
📑 Get access to my collection of CSS codes for Squarespace at insidethesquare.co/css
- - -
⭐ NEW: List of my top 7 FREE Squarespace tutorials: insidethesquare.co/top7
- - -
🙋 Need some help? Visit ​insidethesquare.co/code-help​ to see my current support options.
- - -
💻 WEBSITE → insidethesquare.co
📧 NEWSLETTER → insidethesquare.co/email
🤳 INSTAGRAM → / thinkinsidethesquare
👍 FACEBOOK → / insidethesquare
📌 PINTEREST → / insidethesquare
- - -
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code INSIDE10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 INSIDE10 → insidethesquare.co/inside10
- - -
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 ♥