Squarestylist’s Guide to Selecting the Right Squarespace Sections & Blocks
A Squarestylist guide to selecting the right Squarespace sections and blocks to achieve your dream layouts, functional needs and long-term management requirements.
Selecting the Right Squarespace Sections & Blocks
a.
Squarespace
b.
Article
Squarespace website pages are built on the most clever engineering of sections and blocks—powerful and flexible components that we can tweak and customize to our liking, depending of course on each one's built-in functionalities and limitations.
Sections and blocks can have similar features, which is why those who are new to Squarespace, and sometimes even Squarespace experts, often find themselves asking: Which block or section should I use?
The truth is: There are many ways to approach builds.
Consider a team members page. You could:
① Add individual Images and Text blocks on a Fluid section to build your own layout
② Add a Gallery block (though this feature has spacing considerations and some aspects are limited to Squarespace Circle members) or
③ Use an Autolayout List section which lets you bulk upload images, add captions, and includes a Lightbox feature for enlarging images.
So which is the right choice for your project? It comes down to:
Functionality. What features do you need to prioritize for this layout?
Practicality. Is it simple to update and maintain?
In this post, we will explore the built-in features of Fluid sections, Autolayout List sections, Autolayout Gallery sections, Gallery blocks and Summary blocks, how they compare to each other, and my suggestions on which section or block to use depending on the layout and functionality you want to achieve.
List sections VS Gallery sections
Both the List section and Gallery section are types of Autolayout sections, just in different formats.
Autolayout sections are some of the most powerful tools in Squarespace, allowing us to quickly add content and switch layouts (between Carousels, Slideshows et al) without manually rearranging them. The content also reflows depending on the browser or device size, helping with long-term functionality and making updates much simpler.
List sections are ideal for making granular style tweaks to colors, sizing, spacing and alignments—all without using code.
Gallery sections are simple to edit and maintain for showcasing images, and can be further styled with code. If autoplay animations on certain imagery is a priority, I would use the Gallery section over the List section that has no animation nor Lightbox capabilities.
Autolayout sections are available in the Sections Catalogue with the Information ℹ️ icon.
Let’s first make a detailed comparison of the two different types of Autolayout Sections.
Autolayout List sections
Supports formatted titles and descriptions
Offers arrow navigation
Lack Lightbox and animations
Require code for clickable images
Don't support masonry layouts
Autolayout Gallery sections
Support simple captioning
Provide bullet or arrow navigation
Include built-in Lightbox and animations
Feature clickable images
Offer masonry layout options
Squarestylist’s recommendation: List sections are ideal for featuring branded content—from your services to testimonials—and similar informative content that requires images, titles, descriptions and buttons. Gallery sections are the better option for showcasing imagery with minimal captioning, with the option to activate Lightbox and animations. ✺
Autolayout List sections VS Summary blocks
Though they appear similar, List Sections and Summary Blocks have distinct features that make either one a much more ideal choice compared to the other, depending on your needs for functionality and practicality.
I recommend testing both on a sample website to better understand what makes each one unique and help you assess which one is best for your projects.
Autolayout List sections
Intuitive to edit and update
Easy to rearrange
Independent from collections
Cannot be added to product and blog items
Functions as an independent section—doesn't support Fluid Editor blocks
Summary blocks
Automatically pulls items from the blog, shop and events page
To add content, new items must be published on either your blog, shop or events
More challenging to rearrange—requires changing the publish dates of the blog posts or events
Can be added to individual product pages or blog posts
Can be placed anywhere within a Fluid section
Squarestylist’s recommendation: List sections are ideal for content that does not require syncing, such as your services list, team profiles or pricing options. For cases where we need to sync product items or blog posts on pages such as the homepage (as previews or related content), Summary blocks are the better option. ✺
Autolayout List sections VS Fluid sections
Fluid sections may seem like the more flexible option, especially for stylized layouts scattered around the page. For content that does not need to be updated regularly, like the team members in our example, working with a Fluid Section by adding individual image and text blocks could be a good approach. Style-wise, Fluid sections are easier to tweak without using code. However, Autolayout List sections are the better option for sections where content needs to be updated and perhaps even rearranged from time to time. Consider using List sections for showcasing your process, services or similar branded content.
Autolayout List sections
Easy to add new entries
Simple to rearrange
Automatically reflows based on device size
Can easily switch between layouts (Carousels, Slideshows, et al)
Requires additional code for styling
Fluid sections
Adding new entries is tedious
Time-consuming to rearrange
May appear too narrow on some devices
Cannot switch between layouts
Easier to layout and style
Squarestylist’s recommendation: Before building with a Fluid section, consider if a List section could work for your needs. While Fluid sections offer more styling flexibility without code, the ease of switching layouts and content that automatically reflows based on device size makes List sections the more sustainable option. ✺
Gallery blocks VS Gallery sections
These similarly named options can be confusing, but they serve different purposes. Gallery blocks offer the flexibility to incorporate videos with the option to add other blocks within Fluid sections. Autolayout Gallery sections function independently and are ideal for showcasing images, particularly with a masonry layouts.
Gallery blocks
May have spacing issues when added to Fluid sections
Can be styled alongside other Fluid blocks
Offer arrow navigation
Support videos
No masonry layout option
Gallery sections
Function as independent sections—not compatible with Fluid sections
Cannot combine with other Fluid blocks
Provide both arrow and bullet navigation
Don't support videos
Include masonry layout option
Squarestylist’s recommendation: Use Gallery blocks to showcase a combination of images and videos with the option to add other decorative elements using Fluid blocks. For classic gallery layouts with the option to activate Lightbox and animations, the Gallery section is a better option. ✺
Choosing the Right Building Blocks
When designing in Squarespace, the difference between a good website and a great one often comes down to selecting the right components for each job. Each section and block we've explored has distinct strengths:
List sections shine with highly-customizable, structured and adaptable content
Gallery sections create visual impact with clean image displays and interactive features
Summary blocks seamlessly connect your blog or shop content across your site
Fluid sections offer creative freedom for custom layouts that don’t require frequent updates
The key is understanding not just what each can do, but which will serve your specific needs for both functionality and long-term management. The best choice balances what looks good today with what will work smoothly tomorrow.
Armed with this knowledge of Squarespace's powerful building blocks, you're now better equipped to make intentional design decisions that enhance both aesthetics and functionality.
In our next post and video, we'll explore Collection pages—specifically Blog and Portfolio collections—comparing their features and identifying the best use cases for each.