A beginner’s guide to squarespacePage Sections
The content of this article is specific for Squarespace version 7.1 and doesn’t apply to website built on version 7.0
Squarespace page sections allow you to organize your website content into distinct areas.
These sections can be customized to include text, images, videos, and more, letting you create a structured and visually appealing layout for each of your pages. Every page section type has unique display settings and features. Each page section can be assigned one of your 10 color themes allowing you to create unique layouts on every page.
By choosing the right type of page section to display your content creatively, you can build beautiful and engaging website pages that capture your visitors' attention and keep them coming back for more.
Squarespace offers four main section types, each with its own strengths. Each one of these pages sections has unique settings and display options.
An Overview of Page Section Types
-
Fluid Sections
These ultra-flexible sections allow you to arrange any combination of content blocks, like text, images, and videos, in a responsive grid layout. You can create layers of content, and change the alignment of content inside blocks both vertically and horizontally. Fludi engine sections also allow you to alter the layout of content blocks specifically for mobile devices, making fluid engine sections the most flexible page section available in terms of design!
-
List (People) Sections
Think of these as perfectly organized lists, ideal for showcasing present content in a clear and concise way. This section is an example of a list section! You can customize the layout to display titles, images, and short descriptions for each item, making it easy for visitors to find what they're looking for. List sections have three main layout styles, and the content layout will automatically adjust for smaller screen sizes.
-
Gallery Sections
As the name suggests, these sections are designed to showcase a gallery of images. They let you create beautiful galleries of images or videos, with customizable layouts and options to add captions or titles. You can choose to display a caption for image and you can attach a link to each individual image in the gallery. Gallery sections have six main layout styles, and the content layout will automatically adjust for smaller screen sizes.
-
Classic Sections
Similar to fluid engine sections, classic editor sections offer a structured layout for your content. You can add content blocks to a 12 column grid and adjust the height of the content blocks. Classic sections are not as flexible as a fluid engine section; you can not create layers of content or edit mobile separately. The content layout of a classic section is automatically adjust for smaller screen sizes.
How to add a page section to Squarespace
Page sections can be added to standard pages, lesson pages, project pages, and above or below a collection list.
Page sections can not be added to blog posts, product pages, individual events, or videos inside a video collection.
For more information about page types, check out the beginner’s guide to Squarespace page types.
Select edit on the top left-hand side of the website preview for a page section compatible page.
Click the Add Section option at the top of the page.
Choose a premade layout or select a blank section. Here are a few pro tips for selecting the correct section type:
Blank sections are fluid engine sections.
Any section with a ⓘ symbol on the top right-hand side is an auto-layout section. In the people category, this indicates a list section. In the images category, this indicates a gallery section.
Depending on the page section type you’ve selected, you’ll have different options for page settings and editing the content.
An overview of Squarespace page section settings
Once you've chosen your perfect page sections and filled them with engaging content, Squarespace lets you take things a step further with page section settings. Here's how you can customize the look and feel of your sections:
Color Themes: Match your website's overall design by choosing a color theme for your sections. You can select from pre-made themes or create your own custom color scheme to ensure everything looks cohesive and on-brand.
Background Settings: Set the stage for your content! Squarespace lets you choose from a variety of background options for your sections, including solid colors, gradients, or even image backgrounds. This is a great way to add visual interest and personality to your website.
Design Options for Auto Layouts (List & Gallery Sections): While auto layouts like list and gallery sections offer a structured format, Squarespace empowers you to personalize them further. You can adjust settings like spacing, alignment, and the display of titles and descriptions, giving you more control over the overall look and feel of your content presentation.
Where you can learn more about customizing your Squarespace website
Squarespace Made Simple
This mini course for beginners will teach you how to create your first Squarespace website. Lesson four includes information about page types and page section types.
Squarespace Support Article
Learn more from the official Squarespace support blog