How to Add a Subheading to A List Section in Squarespace

List sections are one of my favorite layout tools in Squarespace.

They’re clean, flexible, easy to edit, and they look great on both desktop and mobile. But there’s one limitation that trips up a lot of people:

Squarespace doesn’t give you a built-in option to add a subheading inside a list section.

In this tutorial-style post, I’ll walk you through a simple workaround that lets you add a subheading to a list section using a small snippet of custom CSS—without breaking your layout or overcomplicating things.

Before: Without the Subheading

After: With the subheading

What a List Section Is (and Why It’s Useful)

If you’re reading this post, you probably already know what a list section is—but let’s start with a quick refresher.

Squarespace list sections are modular content sections commonly used for:

• Team members

• Services or features

• Benefits or highlights

• Any content that works well in a repeated, structured format

One reason list sections are so popular is that they’re easy to reorder, quick to update, and consistently responsive across devices.

The catch? There’s no native way to visually separate a heading from a subheading within the list item title.

That’s where this workaround comes in.

Step 1: Add a List Section

To add a list section in Squarespace:

1. Go to Edit

2. Select Add Section

3. Search for a section that contains a list layout

Squarespace doesn’t label these as “List Sections,” so a quick trick is to select Team. List sections are identifiable by the small letter “i” icon in the upper-right corner of the section preview.

Choose the layout you want and add it to your page.

Step 2: Add Your Heading and Subheading (Using a Hard Return)

This is the most important part of the process.

1. Click Edit Content on your list section

2. Select Content

3. Click into the Title field

4. Place your cursor at the end of the line

5. Press Return (a hard return—not a soft return)

6. Add your subheading text on the next line

* Important: This will not work with a soft return. You must use a hard return so the CSS can properly target the second line.

At this stage, nothing will look different yet—and that’s expected.

Save your changes and exit the content editor.

Step 3: Add the Custom CSS

Now it’s time to style that second line as a subheading.

1. Scroll to the bottom of the page

2. Select Custom Code

3. Open Custom CSS

4. Paste the CSS code provided below  into the editor

5. Click Save

Once the CSS is applied, you’ll immediately see the second line styled as a subheading.

Code Snippet

/* Add subtitle to list section */

div.list-section-title p:nth-child(2) {
    font-size: 22px;
  font-family: lato;
    color: #000;
}

  

Optional: Customize the Subheading Style

You can easily tweak the CSS to match your site’s design.

Common customizations include:

• Font size (for example: 20px, 22px, 25px)

• Font family (remove the font-family line if you want it to inherit your heading font)

• Text color (use this if you want the subheading to visually differentiate from the main heading)

These small adjustments can make a big difference in hierarchy and readability.

Once you’re happy with the styling, click Save—and you’re done.

Final Thoughts

This workaround gives you more control over hierarchy inside Squarespace list sections without changing the structure or breaking responsiveness.

It’s a small tweak—but small tweaks like this can dramatically improve clarity, scannability, and overall polish.

And remember: web design is fun—but without strategy, even the most beautiful website will only get you so far.

If you want help building a clear, intentional content strategy for your website—or your client’s website—I invite you to explore The Heart-Centered Website Strategy Kit.

It’s designed to help business owners and web designers create websites that attract the right people, communicate clearly, and support real growth.

---

This page contains affiliate links