Roundup: Squarespace List (Auto Layout) Inspiration & Code Resources
One of the workhorse sections of Squarespace 7.1 is the Auto Layout section. It’s taken over as the premier way to showcase testimonials (no more blog hacks, thank you). In this post, I’ll show you some examples of beautiful and creative uses AND give you some great places to find code to level up your own Auto Layout sections.
If you are looking for a way to style grouped items like services, teams, or testimonials, the Auto Layout section is super handy and versatile.
Getting Started with Squarespace Auto Layout Sections
You can add an Auto Layout section by Editing a page, clicking Add a Section, then choosing List, People, or Headlines. Auto Layout sections are denoted by an “i” icon in the top right corner. (Yes, I know this is painful, but it is worth it.)
Auto Layouts come in three design types:
simple lists (shows all your items and stacks on mobile)
banner slideshow (shows one item at a time and viewers click to scroll through)
carousel (shows your items in a rotating carousel, you set how many items display on desktop, displays one at a time on mobile)
A few current limitations are:
you can’t add a main description to the section as a whole, just a title and a button
images aren’t clickable / don’t have links (this is a big miss in my opinion, but keep reading for a code fix)
these sections can’t be added to the footer
there’s no auto scroll for banners and carousels (but see below for a code fix)
Limitations aside, Squarespace Auto Layouts have given us a lot more flexibility in our website design:
you can quickly reorder items
switching between design types is possible without rebuilding the sections (change from a list to a carousel in with one quick edit)
it’s a versatile way to showcase grouped items
you have granular control over styling this section including adding “card” backgrounds, forcing same height items (great for a clean look), and changing spacing and text size
Examples & Inspiration
I use two Auto Layout sections on my SPICE template homepage - the second and third sections in the image below; one a simple list to showcase packages, another a carousel for testimonials:
Meg Summerfield Studio also used an auto layout carousel to showcase testimonials. She kept the testimonials aligned at the top and added a lovely background image to the section on this site for Stonewater Architecture:
Alana Jade Studio uses the Banner Slideshow to display services on the Amber template. There’s also some custom code in play here… keep reading below for some great resources to customize your Squarespace Auto Layouts!
In another example of customized list sections, Ashley Brown adds borders to simple list items to highlight them on Kalisha Blair’s hompeage:
Sarah Moon Co. used the simple list to showcase testimonials with rounded corners to soften the design to better match the The House Shuffle’s hand drawn logo:
Let’s Go Studio uses the simple list with another take on borders to showcase the modules of their Canva Crash Course (which I highly recommend!):
Check out Squarespace’s official Auto Layout section guide for general info on setup and styling.
Code Resources to Level up your Squarespace Auto Layouts
Fortunately we have some talented developers in the Squarespace Community who are willing to share code to overcome some of the limitations and add some styling options to Auto Layout sections. Each of the tutorials and snippets below are completely FREE:
Make Squarespace List Items Clickable
One big miss is that the images on list items are not clickable. Fortunately, our friends at SF.Digital wrote some some to make the entire list item clickable - including the images and titles.
Get the code here.
Auto Scroll for Carousel & Banner styles
Will Myers walks through setting up changing the carousel or banner auto layouts so that they automatically scroll to the next item. Great if you don’t want to rely on users clicking arrows to see what’s next.
Arrow & Card Styles for Squarespace Auto Layouts
Ghost Plugins offers CSS code snippets to:
Creating a bold side-by-side slideshow in 7.1, using auto layouts
Beatriz Caraballo shows you how to add code to customize the slideshow option, setting the content side-by-side instead of stacked, and inverting the content placement.
Minimal testimonial carousel using an Auto Layout in 7.1
Another fantastic tutorial from Beatriz. In this walkthrough, she’ll code the carousel option, setting the content side-by-side, vertically centering the content, and styling the button as the client name.
Make List items clickable
SF.Digital has code that allows you to make the full list item clickable - a great workaround for when you want users to be able to click your image to visit another page.
