How to create a clickable list item in Squarespace
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About this tutorial
This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
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.
Video tutorial
Code Example
.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
}
