How to make Auto List items fully clickable in Squarespace (7.1)

• 00
• 01
• 02
• 99

September 2024: the clickable customization version for the Carousel layout has been added to the bottom of the post!

If you searched for this post, you probably know what I’m talking about.

The native Auto Layout Simple List section in 7.1 only allows us to add a button to allow visitors to go to a page related to our offers/packages/work/whatever it is we’re showcasing through that part of the site.

However, I’ve gotten this question several times inside the Club because many clients would rather have the WHOLE Auto List item fully clickable, to make their visitors’ experience a little bit easier.

So, if this is something your client has requested – or it was your idea in the first place – today’s tutorial will show exactly how to achieve it with a sneaky CSS trick!

Take a look…

Tutorial

Overview & timestamps

This tutorial is pretty straightforward, but it’ll require us to be very precise about the selector(s) we’ll be using and will include additional tweaks to one or two additional containers for the final result to work the way we want it to:

1. 00:00 - Intro

2. 01:00 - Overview of the Auto List section options needed
   First of, we’ll take a minute to look through the different settings that need to be in place to make sure this customization works once the code is in place. There’s not much to it, but it’s important to set everything correctly.

3. 02:06 - Breaking down the CSS trick to make the whole Auto Layout items clickable
   Next, we’ll jump into the code. We’ll look at the logic behind what we’re doing (spoiler alert: we’ll be creating a clickable overlay with a pseudo-element) to be able to build a selector that works for what we need.

4. 04:06 - Creating the clickable overlay
   Once our selector is all set, we’ll create the actual overlay and tackle a very common positioning/sizing issue that 80% of the time pops up when working with absolutely positioned elements.

5. 08:55 - Fixing thumbnail image issue
   Last but not least, we’ll take care of a weird issue that the thumbnail will suddenly develop once the overlay is on top of it.
   

That’s all there’s to it!

Until next time,

B.

---

Full code

Auto Layout Simple List

/*HOW TO MAKE AUTO LAYOUT SIMPLE LIST FULLY CLICKABLE IN SQUARESPACE 7.1*/
//To create the overlay
.user-items-list-simple .list-item-content__button::after {
  content: '';
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  visibility: visible;
  z-index: 10;
}

//To adjust the position of the overlay
.user-items-list-simple .list-item-content__button-container {
  position: static;
}
.user-items-list-simple .list-item {
  position: relative;
}

//To avoid the thumbnail issue
.user-items-list-simple .list-item-media {
  pointer-events: none;
}

//(Optional) To hide the button
.user-items-list-simple .list-item-content__button-container {
  height: 0;
  visibility: hidden;
}

Auto Layout Carousel

/*HOW TO MAKE AUTO LAYOUT CAROUSEL ITEMS FULLY CLICKABLE IN SQUARESPACE 7.1*/
//To create the overlay
.user-items-list-carousel .list-item-content__button::after {
  content: '';
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  visibility: visible;
  width: 100%;
  z-index: 10;
}

//To adjust the position of the overlay
.user-items-list-carousel .list-item-content__button-container {
  position: static;
}
.user-items-list-carousel .list-item {
  position: relative;
}

//To avoid the thumbnail issue
.user-items-list-carousel .list-item-media {
  pointer-events: none;
}

//(Optional) To hide the button
.user-items-list-carousel .list-item-content__button-container {
  height: 0;
  visibility: hidden;
}