Page sections

Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Page sections

Last updated June 01, 2022 14:24

You'll build your site's pages and footers with customizable sections stacked vertically. You can add, delete, and move sections to arrange your content. In this guide, you'll learn about what you can do with page sections and how to use them to create unique page layouts.

For help creating a new page to add sections to, visit Adding pages to your navigation.

Tip: This guide is for version 7.1. For a similar effect in version 7.0, use a stacked index.

Watch a video

Add and edit sections

How you add and edit sections depends on whether you're editing on a computer or in the Squarespace app.

Computer
Squarespace app

When you add a new page, it starts with at least one pre-built section, unless it's a blank page. To get started editing sections, go to the page, then click Edit in the top-left of the page preview.

Hover over a section to review its options:

To add a section, click Add section.
To duplicate a section, click the duplicate icon. Collection page sections can't be duplicated.
To move a section, click ↑ or ↓.
To style a section, click the pencil icon.
To delete a section, click the trash can icon. After saving, sections can't be restored. Collection page sections can't be deleted.
Click Save to publish your changes. Changes don't auto-save.

There's no limit to the number of sections you can add, but we recommend adding no more than 20 sections to a single page, as pages with lots of content take longer to load. To learn more, visit My site is loading slowly.

When you add a new page, it starts with at least one pre-built section, unless it's a blank page. You can also add more sections to an existing page. Currently, the app only supports some sections.

Tap Edit or the pencil icon in the top-right corner to open the page for editing, then add or edit sections:

To add a new section, tap + above or below an existing section, then choose a section type.
To move a section, tap ↑ or ↓ in the toolbar.
To style a section, tap the pencil icon in the toolbar.

Tap Done or ✓ in the top-left corner to save your changes.

Add content to sections

How you add and style content depends on the section. There are three types:

Block sections - Customize a layout with blocks.
Auto layout sections - Add sets of content and arrange them automatically into lists or galleries.
Collection page sections - Display collection items. For example, blog pages have a collection section that displays blog posts.

You can add block and auto layout sections to any page. Collection page sections are unique to their pages.

Note: The Squarespace app supports editing the content in a supported section, but you can't use the app to add new blocks to a section. For areas of your site that you can't edit in the app, edit your site on a computer.

Block sections

Blocks are features you can use to add content to your site, like text, images, buttons, and forms. All sections are block sections, except auto layout and collection page sections.

To add and style content in block sections:

Add or move blocks to customize the layout.
To add content to a block, double-click it.
To delete a block, hover over it and click the trash can icon. After saving, blocks can't be restored.
To change the section styles, click the pencil icon.

Auto layout sections

Use auto layouts to add sets of content, like images and text, in visually striking layouts that update automatically when you add more content. These sections display an Auto badge in the section picker.

To learn more, visit Auto layouts.

Gallery sections

Gallery sections are a type of auto layout good for showcasing images without a lot of text. To learn more, visit Gallery sections.

Collection page sections

Use collection pages to display a collection of items, like blog posts or events. Blog, events, portfolio, and store pages are all collection pages. To learn more, visit Collection page sections.

Footer sections

Create your footer using block sections. Hover over the footer, and click Edit footer to add and edit its sections. You can add blank block sections or footer-style sections with pre-built block layouts. It's not possible to add other section types to your footer.

To learn more, visit Editing footers.

Change section styles

You can make sections follow your site-wide styles in the site styles panel, or you can edit an individual section's layout, background, and color to give your pages more variety or contrast.

To style individual sections, click Edit on the page, hover over the section, and click the pencil icon. Block sections include three tabs: Format, Background, and Color.

Format

In the Format tab, you can change these details:

Section Height - The height of the section. Sections with more content may display at a taller height than your setting. This also affects the amount of padding above and below your section's content.
Content Width - How much of the section's width your content spans.
Content Alignment - How the content aligns with the section borders, along the top, along the bottom, or equidistant from the top and bottom

Background

In the Background tab, you can add a background image, video, or art. Background content can appear at full-bleed or inset from the edges of the section. To learn more about your options, visit the following guides:

Color

In the Color tab, you can select and customize a color theme for the section. Keep in mind, any changes made to a color theme will affect all sections of your site that use that theme. To learn more, visit Changing colors.

Other sections

To learn more about styling options for auto layout sections and collection page sections, visit these guides:

Move content between sections

To move content:

Block sections - Drag blocks to move them from one block section to another on the same page.
Auto layout sections - Reuse a list or gallery image to add it to different list or gallery section.
Collection sections - Move blog posts, events, and products from one collection to another of the same type. It's not currently possible to move portfolio sub-pages.

Was this article helpful?

93 out of 384 found this helpful