Squarespace List Sections: The Ultimate Guide to People Sections in Squarespace 7.1

page section

Feb 11

Squarespace's list sections are a powerful yet often overlooked feature that can transform how you present content on your website. In this video, I'll walk you through everything you need to know about list sections in Squarespace 7.1, from basic setup to advanced customization. You’ll also find more details below.

Finding and Adding List Sections

List sections might seem hidden at first, but they're easy to spot once you know what to look for. When adding a section to your page, look for the auto-layout icon in the top right corner of the section preview. While these are often found in the "People" category, you'll find list sections scattered throughout other categories as well.

Three Dynamic Display Options

List sections offer three versatile layout options to suit your needs:

Simple List: Displays all items at once, perfect for team pages or service offerings
Banner Slideshow: Shows one item at a time with a full-width background image, ideal for portfolios or featured work
Carousel: Presents multiple items in a scrollable format, great for testimonials or product features

All list sections come packed with customization options that give you precise control over your content's presentation:

Content Controls

Section title and button options
Individual item customization (images, titles, descriptions, and buttons)
Easy drag-and-drop reordering
Basic text formatting options

Design Features

Adjustable image crop ratios
Infinite scroll functionality
Adjacent slides preview
Card backgrounds with customizable padding
Multiple size presets and spacing controls
Mobile magic: All changes you make automatically adapt to mobile views, ensuring a consistent experience across devices

Pro Tip: If you encounter glitches while reordering items (like incorrect titles or images showing), simply exit the content editor and re-enter. This quick reset usually resolves display issues in the editor.

Creative Codes for List Sections

In the tutorial video above, I used some custom code to change the look of my list section. Here are those codes, along with a few other ideas for your Squarespace site:

/* Hover effect for list items */
.list-item:hover {
    background: yellow !important;
}

/* Custom styling for bold text in list section titles */
.list-section-title strong {
    font-family: serif !important;
    color: red !important;
}

/* Button hover effects with shadow */
.list-item a:hover {
    background: purple !important;
    border-radius: 0 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
}

list section