Squarespace New Features Spotlight: Auto Layouts

Squarespace has been busy lately. Starting at the tail end of June and going through Q3 and Q4 they rolled out an impressive number of updates, 11 in fact. If you’re interested in my roundup of all of the updates with examples of how I’ve implemented several of them on our Sisu Site Shop website check out this post: Squarespace New Features Roundup: Fall & Winter 2021-22. Today, I wanted to take a deep dive into one of these new features, Auto Layouts.

What are Auto Layout Sections for List, Gallery and People?

You’ll find this feature as a new option when adding a new section to any page on your Squarespace website. This new section type allows you to add information, style the overall section so each item included is consistent (you do not need to style individual items) and easily rearrange them by dragging and dropping. 

These sections are perfect for lists of services, testimonials, reviews, and team members. Items that you want to be styled the same way but easily add/delete items and rearrange them at the click of a button.

This new section type gives you a number of newly predesigned auto-layout section templates.

Where to find the new Auto Layout Sections for List, Gallery and People?

From your Squarespace Account Dashboard, click on the thumbnail (the small picture) of your website.

At the top left of your screen, you’ll want to click on the Edit button to enter the backend of your website.

On any page hover your mouse between sections until you see the blue line and the add section button. Click “add section.”

In the Add Section Pop Up scroll down the left hand menu. There are three section options where you’ll find the auto layouts available: List Section, Gallery Section, and People Section. You’ll need to scroll all the way to the bottom to find the People section. 

Auto Layouts-List Section

The list section offers 26 new pre-designed auto-layout section templates. You’ll find a great diversity of layouts combining photos with titles, subtitles, text areas, and buttons. Additional layouts include 3 that automatically mask photos to a circle, 5 sections with text only, and 11 slideshow layouts. 

An additional 20+ traditional block layout options follow the new auto-layout options. They do not have the AUTO Badge with an info icon ⓘ (i with a circle) on the upper right corner and do not have the auto-layout features. They are still great options but all the elements will need to be arranged manually. 

To get started with a new auto layout just click on your desired layout. To add content click on the Edit content button in the upper right corner. Here a Design panel opens up with three tabs: Elements, Content, and Design. 

List Section-Elements Tab

The Elements tab has 2 Section toggles: Title and Button and 4 Item toggles: Show Image, Show Title, Show Body, Show Button. If you want to keep the layout exactly as the template you chose simply leave these options as selected and move to the Content tab. Feel free to play around with the design options here too if you want to try out different looks!

If you ever can’t find a design option for something, go back to the Elements tab and ensure the element is toggled on.

List Section-Content Tab

Section elements include Title and Buttons. To add or edit these options click on the corresponding arrow on the far right. 

For the Title, you can change the alignment (left, center or right justified) and add/edit text.

The Button options include adding or editing text, adding a link, adjusting the size (S, M, L) and aligning (left, center or right justified).

Items elements allow you to add and arrange your content. To add content items click on the arrow to the far right. You can add, replace and edit images, add an alt text, a title, and a description. To delete an item click on the trash can. To rearrange grab the six-dot icon to the left of the image thumbnail and drag it up or down.

List Section-Design Tab

The design tab gives you a number of design elements to choose from. The first choice is the main design option. Choose between a Simple List, Banner Slideshow and Carousel by clicking on the down arrow to the right.

List Section-Design Tab-Simple List Menu Options:

Alignment: design options initially just give left, center or right justified options. If you want more, click on the three dots to open up additional options for title and body text alignments (left, center or right justified).

Content Order: allows you to toggle between Content First or Media First

Next, you can select the Max Columns you want to appear by selecting “-” to decrease or “+” to increase the number of columns.

Image Crop: gives a number of options by selecting the down arrow to the right. Crop to 1:1-square, 3:2, 4:5, 16:9, 2.4:1-horizontal, 2:3, 3:4-vertical, circle and original.

Two more design options can be found by scrolling down on the far right of the main design menu.

Access Style options by clicking the arrow to the far right. This menu allows you to choose the Text Size (S, M, L, XL). For even more, select the three dots icon on the far right to open the responsive slider for Item Title and Item Description.

Toggle Card: on/off. When on, this opens up options to select S, M, or L padding options or manually select the padding size for the top, bottom, right, and left individually.

Finally, the Size & Space options can be accessed by clicking the arrow to the far right. You can choose Layout Width (toggle Full or Inset), Media Width, and Content Width (S, M, L) or select the three-dot icon for a slider bar for full control of the media width. 

Content Placement (Left, Center, or Right) or select the three-dot icon for additional options for Title and Body placement individually (Left, Center, or Right) 

Space Between Items (S, M, L) or select the three-dot icon for additional options for Space Between Columns and Space Between Rows (0-300px)

Scroll down on the right side of the Size & Space menu for even more options.

Space Between Elements (S, M, L) or select the three-dot icon for the sliders for Space Below Section Title (px), Space Between Image and Text (%), Space below Item Title (%), and Space Above Section Button (px).

Vertical Padding (S, M, L) or select the three-dot icon for the sliders for Padding-Top and Padding-Bottom (vmax)

Position (Top, Center, Bottom, Spread)

List Section-Design Tab-Banner Slideshow Menu Options:

Layout Width toggle for Full Bleed, Full, or Inset

Vertical Padding (S, M, L) or select the three-dot icon for the sliders for Padding-Top and Padding-Bottom (vmax)

Alignment design options initially just give left, center or right justified options. If you want more, click on the three dots to open up additional options for title, body, and button alignments (left, center or right justified).

Infinite Scroll and Show Adjacent Slide give you on/off toggle options.

Get the Style options by clicking the arrow to the far right. 

Text Size (S, M, L, XL). For even more, select the three dots icon on the far right to open the responsive slider for Item Text, Item Description, and Item Button.

Toggle Card on/off. When on, this opens up options to select S, M, or L padding options or manually select the padding size for the top, bottom, right, and left individually.

Navigation options include Arrows or None (select choice with the down arrow to the right). and Center or Bottom toggle for arrow placement.

Navigation Offset (S, M, L) or select three dots to manually select offset (vw).

The Size & Space Menu offers numerous styling options including:

Slide Padding (S, M, or L) padding options or manually select the padding size for the top, bottom, right, and left individually.

Minimum Slide Height (S, M, or L) options or select the three-dot icon to manually select (0-100) vh.

Slide Content Width (S, M, or L) options or select the three-dot icon to manually select (350-2000) px.

Space Between Elements (S, M, or L) options or select the three-dot icon to manually select Space Below Section Title (px), Space Below Item Title (px), Space Above Item Button (px), and Space Above Section Button (px).

Space Between Slides (S, M, or L) options or select the three-dot icon to manually select (0-300) px.

Vertical Position (top, center, bottom)

Horizontal Position (left, center, right)

List Section-Design Tab-Carousel Menu Options:

Carousel Design options combine elements from both previous menus.

The possibilities are almost endless and the amount of control over design allows you to customize nearly every aspect of these layouts to your specific desire.

On the Sisu Site Shop Website, I’ve added auto-layout sections in a few places. First, I added a list carousel near the bottom of my home page. I included an iPhone mockup image of each client's website with the name of the client and their testimonial below.

Auto Layouts-Gallery Section

The gallery section has 7 auto layout options. To select one simply click on the desired layout. Add images by clicking on the + at the top center of the pop-up menu. To delete, hover over the image thumbnail on the left side and click the trash can icon.

To edit the image click on “edit image” on the right side. You may also add a description and a link here. Click on the left and right arrows to scroll through your images.

Unlike the List Section, there is no way to change the display options for the layout. If you don’t like what you’ve done, you’ll have to add a new gallery section layout and start over adding content.

On the Sisu Site Shop About page, I added a gallery carousel that houses the full version of “our story.” I included 13 slides with images, titles and descriptions. I love that I can house a large amount of information without taking up a lot of vertical real estate. This easily gives the user the option to read more or quickly scroll past. 

Auto Layouts-People Section:

To add a people section, scroll nearly to the bottom of the Section Menu. You’ll find it second to last between Music and Pricing. 5 of the 7 layout options have the new auto-layout feature. Adding team photos and short bios will be a breeze with this new feature. 

This update will be very useful for our own website as well as my clients. I can’t wait to explore many more use cases and design possibilities with Auto Layouts! Remembered if you ever can’t find a design option for something, go back to the Elements tab and ensure that specific element is toggled on. If you’d like to learn more about the other new features and updates Squarespace has rolled out you can read my post: Squarespace New Features Roundup: Fall & Winter 2021-22

Here’s Squarespace’s Auto Layout Help Center Guide

Dubsado Series Posts:

Dubsado CRM—the right choice for my creative small business—maybe yours too!

Getting Started with Dubsado CRM | Part 1 ~ Essential Brand Settings

Getting Started with Dubsado CRM | Part 2 ~ How to Embed Your Lead Capture Forms in Squarespace 7.1

Dubsado New Pricing Plans, 6th Birthday Sale and More!

Goals Series Posts:

How to Set Goals for Your Life & Business

2021 Goals Review

2022 Life Goals

2022 Business Goals

Behind the Scenes | February 2022 - Business & Life Goals Review

Know someone who could benefit from this article? Please share it with them:

Hej! Thanks for stopping in! Sisu Site Shop is an online business strategy + custom brand and web design studio. We sell Squarespace 7.1 templates, offer VIP Days for brand + web design + Dubsado setups for small businesses including Artists, Educators, and Hospitality Professionals. We serve clients worldwide from our current home base in Montana. We help you start, organize, and modernize your business, brand, and website so that you can sell, serve, and stand out online. If you have a project in mind we’d love to learn more about it!

When you’re ready here are three ways we can help you:

1. Template Shop & Semi-Custom Website Design: Our custom Squarespace 7.1 templates provide a professionally designed foundation for you to build upon and customize! You can even upgrade to a semi-custom service and we’ll customize the template with your brand and photos.

2. Online Business VIP Day: Our Online Business Intensive can help you create a strategy, build a simple website, or knock out admin to-dos!

3. Custom Brand Identity, Website, & Automation Design: Truly elevate your online presence & processes
   for Squarespace 7.1 & Dubsado. We will partner with you to craft a brand & website you can’t wait to share!

We also have many tips and resources about strategy, design, and starting an online business. If we were chatting face to face, we’d offer you some tea and invite you to hang out for a while. Please consider this invitation to explore our site and learn more about our journey with the same intention!

When you’re ready to start your journey, build your business, and find your freedom, fill out our application to get started!

Related Posts…

You’ll Also Love…