Squarespace 7.1 Page Section Types
This article was so popular that I made it into an episode on my podcast, Think InsideTheSquare! You can read the highlights below, or listen to the episode:
Page sections are used on standard pages, collection list pages, and project pages inside a portfolio. There are 4 types of page sections in Squarespace and this article will explain the differences so you can be sure to pick the right one for your website needs.
All page sections can have a background image or background video, and they can be assigned a color theme. But that’s where the similarities stop! Keep reading to learn more about the four types of page sections in Squarespace and what makes them unique.
Classic Editor Sections
Fluid Engine was released in July 2022, but some 7.1 sites still have access to the classic editor. Classic editor sections can have blocks of content, but they stick to a 12-column grid. They can only be resized horizontally or vertically with the help of spacer blocks. You can not edit the layout of a classic section separately for mobile devices.
List Sections
List sections are a collection of list items that are displayed in a specific layout automatically. You can’t add blocks of content to a list section.
List sections can have a title and a button for the entire section. List items can have an image, title, description, and button. At this time, only the individual button for a list item can have a link; the image and text cannot.
List items can be displayed in one of three ways: simple, banner, or carousel.
In a simple list, list images can be cropped to a specific size, including a perfect circle. All of the list images will have the same crop ratio, regardless of the size of the image itself.
To create a list section, select people and pick a list that has the ⓘ on the top right-hand corner of the section preview. That symbol means it’s an auto layout section, specifically a list section when selected from the people layouts.
Gallery Sections
Gallery sections display a collection of images. These images can have descriptions/captions and they can each have their own link.
There are six options for displaying the images in a gallery:
Grid: Simple, Grid: Strips, Grid: Masonry, Slideshow: Simple, Slideshow: Full, and Slideshow: Reel
Grid layouts will display all of the images on the page. Slideshow layouts have a featured image; simple allows for thumbnail display, and reel will display multiple images to the left and right with the featured image in the middle.
You’ll find gallery sections in the premade image section layouts. Look for the ⓘ on the top right-hand corner of the section preview.
Fluid Engine Page Sections
This is the most versatile page section available in Squarespace. You can add content blocks to these sections, resizing and even layering them using the Fluid Engine editor.
You can also adjust the layout of these blocks on mobile, rearranging and resizing them until it looks perfect for smaller devices.
Fluid page sections have a 24-column grid with an adjustable grid gap.
Content in a fluid engine section can stretch all the way to the edge of the screen horizontally, and to the edge of the section vertically.
What happens when you upgrade a classic section to a fluid one?
Well, sometimes nothing, and sometimes a LOT! Classic image block layouts don’t exist in Fluid Engine so you’ll need to rearrange the image and block until it looks perfect. We also have more alignment options, like centering a horizontal line across a vertical axis. There are a few other changes, and without seeing exactly what’s in your classic section, it’s hard to know what clicking that upgrade button will do. To see some sections upgraded, check out the replay of my Fluid Engine Workshop, available at insidethesquare.co/fluid
