How to Add More Text to a List Section (Auto Layout) in Squarespace

How to Add More Text to a List Section (Auto Layout) in Squarespace
 

If you are using Squarespace 7.1, you have probably encountered the magic that is a List Section (also known as an Auto Layout section).

This section lets us set up some beautiful testimonial sliders (say goodbye to that wacky blog post workaround), use card blocks to showcase steps or pricing, and is such a welcome update to the platform.

You can see some examples of List Sections here in my Spice template:

Squarespace List (Auto Layout) Section with cards
Squarespace List (Auto Layout) Section with slider

For more inspiration, I’ve also written a full Roundup Post on Squarespace Auto Layout Inspiration & Code Resources.

But, one question I hear more than any other is (drumroll please)…

How can I add subtext (or more text than just a title) to a Squarespace List Section?

The short answer is you can’t (but stay tuned!). You can’t add a text block to a List Section. And you can’t add a List Block below a Text Block because Lists come as Sections only - not blocks.

While you can turn on/off a title for the List Section, that’s the only built-in option for adding text at the top of the List Section. But there’s a workaround.

But the better answer is YOU CAN ADD ALL THE TEXT YOU WANT WITH A QUICK HACK! In this video, I’ll show you the easy steps I use to add full text and subtext to the top of a List Section.

Basically, I “cheat” by adding another section up against it with the text and use the same background color as my List Section. I typically make the height of the text section the minimum (10) and place a spacer block or two above the text.

Then configure the List Section with no text on top and set the top & bottom padding so it looks right (details on where to find those settings are in the video).

If you’re on Fluid Engine you’d do something similar but no spacer block (also in the video).

Was this helpful? Subscribe to my YouTube Channel for more tips like this.

Previous
Previous

Behind the scenes: July 2022

Next
Next

Fluid Engine - Squarespace 7.1 walkthrough