How to Master List Sections Within Squarespace
Welcome to another blog where I share the latest tips, tricks, and features within Squarespace. Today, I’m going to explore List Sections—a powerful feature that keeps your content organised and visually appealing.
An example of a List Section within Squarespace.
Why Use List Sections?
List Sections are incredibly versatile. They’re perfect for displaying services, team members, testimonials, or even setting up an image gallery. One of their biggest advantages? They're fully responsive, meaning you don't have to worry about tweaking the mobile view—they’ll automatically adjust for you.
Another great feature is that you can effortlessly switch between layouts to see what works for you without having to manually move individual content blocks. However, List Sections do work a bit differently compared to standard Squarespace sections, especially when it comes to editing because there’s no drag and drop grid system here. Don’t worry though, I'll walk you through everything step by step.
Make sure your mouse is hovering over a section to reveal the "Add Section" button.
To add a List Section, select one of Squarespace's pre-built section which has an "i" in the top-right corner.
Adding a List Section
Let’s start by learning how to add a List Section. While in the backend of Squarespace, simply click Edit to enter edit mode. Scroll down to where you want to add a section, hover over an existing section, and click Add Section. You’ll see a variety of default section options.
To find a List Section, check for a small icon in the top-right corner of each option—this indicates it's a List Section. Once you’ve selected a section, you’ll notice the editing process is slightly different. I recommend taking a section from the People section.
Select "Edit Content" from the section menu popup in the top-right to make updates to your List Section.
This is the next screen you'll see with 3 tabs for "Elements", "Content" and "Design".
Editing Your List Section
Here’s where things might seem confusing at first: in a List Section, you can’t directly click on text, images, or titles to edit them like you would in standard sections. Instead, when you hover over the section, you’ll see the option to Edit Content.
Once inside the content editor, you’ll see two groups of settings: those for the entire section and those for individual list items.
Section Settings: You can edit the section’s title and add a button at the bottom. A button is useful if, for example, you want to link to a full portfolio or other related content.
Individual Item Settings: Here, you can update each item’s image, title, description, and button. You can also remove elements like images or titles if they’re not needed (e.g., for a testimonial without images).
The Content view allows you update the text and alignment for each individual item.
This is what you'll see when you click on an individual item in your list.
Managing Content Within List Sections
Editing content in a List Section is straightforward. For example, to change the image for a team member, simply click on the image and upload a new one or select from your existing library. You can also add alt text for SEO purposes and link buttons to internal or external pages.
Need more list items? Just click Add Item to create a new one. You can also easily reorder items by dragging and dropping them into place.
The "Design" options available to you in a Squarespace List section.
Customising the Design
Now, let’s talk design. While List Sections are already visually appealing, Squarespace gives you additional tools to customise the layout:
Align Content: You can choose to align content left, right, or centre.
Max Columns: Control how many columns you want to display in a row, which is helpful for larger lists.
Image Aspect Ratio: Don’t like the default circular image crop? You can change the aspect ratio to better fit your content.
Card Design: One of my favourite features—this adds a card layout to each list item, giving the content a more polished, professional look.
Padding and Spacing: Fine-tune the padding and spacing to ensure everything looks clean and balanced.
When Not to Use List Sections
While List Sections are great for many uses, they’re not always the best solution. For instance, if you’re listing products or blog posts, it’s better to use the built-in Summary Block. Also, List Sections don’t allow additional content blocks like video embeds, so if you need to add something extra, you’ll have to add a new section.
Another limitation is that you can’t duplicate list items, which can be frustrating if you need to reuse the same layout multiple times. You also can't move blocks freely within the section without using custom CSS or third-party plugins.
Final Thoughts
And there you have it—a deep dive into Squarespace List Sections! While they may take a little getting used to, once mastered, they’re a fantastic way to display organised content on your website.
Need a hand?
If you need some assistance with any of the above, or you want to work with me on anything else, please don’t hesitate to get in touch with me.
