A NEW PAGE SECTION TYPE IN SQUARESPACE 7.1

List Section Tutorials

List sections are a brand new type of page section available in Squarespace, and they can do so many cool things! Learn how to create and customize them using the free training videos and codes below.

What are
list sections?

A list section is a type of auto layout page section that organizes list item content based on your design settings and automatically restructures the content based on screen size.

Squarespace released them as a list sections category in early 2023 and renamed the category as People later that year. They are currently found under the People section, noted by the ⓘ icon on the top right hand side.

 

 Now that you know what they are, let’s customize them with code!

 
Custom Code
How to customize Squarespace list item fonts

Squarespace list sections have limited options when it comes to fonts, unless you use custom CSS! In this tutorial, you’ll learn how to update your Squarespace list section style by changing the font for individual parts of a list item.

Read More →
How to use custom images for Squarespace list section arrows

Squarespace list sections are a great way to showcase content, but the default arrows might not always match your website's unique vibe. You can change the color using the design settings in Squarespace, and you can do even more with custom CSS!

Read More →
How to create a multi color list section in Squarespace

Discover how to create stunning multicolor list sections in Squarespace with this comprehensive tutorial. Learn how to use CSS to customize the background of individual list items, odd and even items, and even create repeating patterns. Watch the video and explore the provided code snippets to enhance the design of your Squarespace website. Perfect for Squarespace tutorial enthusiasts!

Read More →
How to create list item hover effects in Squarespace

In this tutorial, you’ll learn how to create two unique list section hover effects in Squarespace.

Read More →
How To Create A Split Page List Section in Squarespace 7.1

This tutorial will teach you how to use CSS to create a split page list section in Squarespace, showing the banner image on one half of the screen and the content on the other.

Read More →
How to use multiple fonts in a list section title in Squarespace

In this tutorial you’ll learn how to use custom code to target the bold and italic font styles in your list section header so you can combine multiple font styles on one line!

Read More →
How to create a two column list section on mobile

In this tutorial you’ll learn how to use custom code to target the bold and italic font styles in your list section header so you can combine multiple font styles on one line!

Read More →
How to create list image hover effects in Squarespace 7.1

In this tutorial you’ll learn how to create custom hover effects for list item images in Squarespace 7.1

Read More →
How to customize list section cards in Squarespace

In this tutorial you’ll learn how to create custom styles for list item cards in Squarespace.

Read More →
How to customize list section buttons in Squarespace

In this tutorial you’ll learn how to create custom buttons for individual items in a list section in Squarespace.

Read More →

Want to learn something else about customizing Squarespace?