Page sections in version 7.1

In Squarespace version 7.1, 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: For a similar effect in version 7.0, use a stacked Index.

Watch a video

Add and edit sections

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 see 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.

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.
Gallery sections - Add galleries of images and choose their layouts.
Collection page sections - Display collection items. For example, Blog Pages have a collection section that displays blog posts.

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

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 gallery 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.

Gallery sections

Use gallery sections to display images in striking layouts. To learn more, visit Gallery sections in version 7.1.

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 in version 7.1.

Footer sections

Create your footer using sections. Hover over the footer, and click Edit Footer to add and edit its sections.

Change section styles

You can make sections follow your site-wide styles in the Design 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 or video. The image or video can appear at full-bleed or inset from the edges of the section. Learn more below.

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 gallery sections and collection page sections, visit these guides:

Section backgrounds

Most sections support adding a background image or video. This can add a contrast to text or other content overlaying the section, or create a banner when the section is at the top of the page.

Blog, Events, and Store sections don't support background images or videos, but you can add a background color.

To add a section background:

In the Home Menu, click Pages, then click the page with the section you want to edit.
In the top-left corner, click Edit.
Click the section's pencil icon, then click Background.
Add an image or video:

To add an image, click Image. Click Add an Image to upload an image, or click Search Images to reuse an image or add a stock image. If you've already added an image and want to change it, click Replace to upload a new one, or click Delete to search for an image. After adding an image, you can also add image effects.
To add a video, click Video, then add a Vimeo or YouTube link. For detailed steps, visit Adding background videos.

Set the Background Width and Overlay Opacity.
Click Format to adjust the section height, content width, and content alignment.
Click Colors to select a color theme for the overlay and any content added. To learn more, visit Changing colors. If you remove the image or video, the overlay becomes the section's background color.

After making changes, hover over Done and click Save.

Add background image effects

If your section uses a background image, you can add image effects to give the background a more stylized look. Some effects add an animation so the image is always moving, while others only appear as the visitor scrolls through that section of your site.

To add an image effect:

After adding a section background, in the section editor, click Background.
Scroll down to Image Effect and choose an effect from the drop-down menu. The effect will appear on your site preview.
Hover over Done and click Save to apply changes.

Keep in mind:

Image effects only appear on browsers and devices that support WebGL, a tool that works with your device's graphics processor. To test whether your browser supports this, visit get.webgl.org. If a browser doesn't support WebGL, the section background will remain static.
Image effects don't appear over background videos.

Move content between sections

To move content:

Block sections - Drag blocks to move them from one block section to another within the same page.
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.
Gallery sections - Reuse a gallery image to add it to different gallery section.