Add and customize the vertically-stacked content sections that create the structure of each page.
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
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. How you add and edit sections depends on if you're editing on a computer or in the Squarespace app.
To get started editing sections, go to the page, then click Edit in the top-left of the page preview.
To add a new section:
- Click Add Section above or below an existing section. If the page is blank, this button appears in the middle of the page.
- Click a category in the left panel to find pre-built sections. You can also click Add a blank section to add a blank block section, or click My saved sections to add a section you've saved previously.
- After choosing a category, click a section. Most sections use blocks, which you can rearrange or update with more blocks. If the section has an i icon, that means it's an auto layout or gallery section, which automatically arranges content in preset layouts.
- The section is added to the page, where you can edit and style it immediately. After making changes, click Save to save your changes and keep editing, or click Exit and then Save to close the editor.
Tip: Collections, like blog posts or products, can't be added as individual sections. Instead, when you add a collection page, it includes a collection page section.
Hover over an existing section to review its options:
- To style a section, click Edit Section.
- To duplicate a section, click the duplicate icon. Collection page sections can't be duplicated.
- To save a section, click the heart icon. Collection page sections can't be saved.
- To move a section, click ↑ or ↓.
- 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 or click Exit and then Save to close the editor.
It's not possible to add or edit blocks, including making updates to the page text, in Fluid Engine sections. However, you can move a section, add a new section, or style a section. For areas of your site that you can't edit in the app, you can edit your site on a computer.
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.
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.
- 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.
Block sections
Blocks are features you can use to add content to your site, like text, images, buttons, and forms. 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, click it, then click the trash can icon. After saving, blocks can't be restored.
- To change the section styles, click Edit Section.
Generally, most sections on your site will be block sections. Block sections use one of two editing experiences: Fluid Engine or classic editor.
Fluid Engine
Fluid Engine is Squarespace's latest content editing experience. When you add a new blank section or a block section with a pre-built layout, it uses Fluid Engine. If you're not sure if a section uses Fluid Engine, check the top-right corner while editing for an Add Block button.
In Fluid Engine, you'll arrange and resize blocks by clicking and dragging on a flexible grid. Blocks can overlap one another to create unique layouts.
Classic Editor
If you added block sections before the release of Fluid Engine, they use our classic editor, which is also used in other areas of your site, such as blog posts. If you're not sure if a section uses the classic editor, hover over blocks on the page to check for + icons above or below each block. These are insert points.
To add a new block section with the classic editor:
- Click Edit on the page, then click Add Section.
- Scroll down to the bottom of the list of section types.
- Click Add Blank [Classic Editor].
To upgrade a classic editor block section to Fluid Engine, click Upgrade. To learn more, visit Fluid Engine, Squarespace's latest content editing experience.
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 i 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 Edit Section or the pencil icon. Block sections include three tabs: Format, Background, and Color.
Format
In the Format tab, you can change these details:
- Content Alignment - How the content aligns with the section borders, along the top, along the bottom, or equidistant from the top and bottom.
- Content Width - How much of the section's width your content spans.
- Section Height - How tall the section appears on the page. 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.
- Styling - How the section's bottom border appears. Switch the Divider toggle on to add a unique section divider.
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:
- Auto layouts
- Gallery sections
- Blogging with Squarespace
- Events pages
- Fluid Engine, Squarespace's latest content editing experience
- Portfolio pages
- Store sections
Section dividers
In the Format tab of section styles, switch on the Divider toggle to add a border to the bottom of your section. You can add dividers to block sections, auto layouts, and gallery sections.
To customize your section divider:
- Shape - Click the Shuffle icon to randomize the settings, or click the Settings icon to select a shape and change the settings manually.
- Stroke - Select a solid line border, dotted line border, or no border for your divider.
- Color - Select a color from your site-wide palette for the border's line.
- Thickness - Set the thickness of the border using the small, medium, or large options. Click the ... to manually change the divider's thickness.
After creating your site's first section divider, the settings for that divider apply to dividers you create later. If you want your section dividers to differ, customize each one using the settings listed above.
Sections without dividers
If your page includes a section that doesn't support section dividers, such as a blog, events, portfolio, or videos section, you can replicate the look of a section divider with a blank block section:
- Click Edit on the page with the section that doesn't support section dividers.
- Hover over Add Section below that section.
- Click Add a blank section.
- Hover over the blank section and click Edit Section.
- Set the Height to small and switch on the Divider toggle.
- Style the divider as you want. Don't add any blocks to this section.
Keep in mind, this section divider won't interact with the section above in exactly the same way as built-in section dividers. For example, if the unsupported section has a background image, the divider appears below the image rather than bordering it directly.
Save sections
When you create a page section layout you want to reuse, hover over the section and click the heart icon to add it to your saved sections.
Saving a section creates a "snapshot" of the layout that you can add whenever you want. This is great for websites where you need to reuse a particular layout on multiple pages.
To use a saved section:
- Click Edit on a page, then click Add Section.
- Click My Saved Sections.
- Select the saved section you want to add.
- Make any changes to the layout.
Keep in mind:
- You can have up to 50 saved sections on your site.
- Saved sections aren't linked to the original section. Updating the original section won't update the saved version or anywhere else you've added it.
- It's not possible to save collection page sections or footer sections, and it's not possible to add saved sections to your footer.
Remove a saved section
To remove a section from your saved sections:
- Click Edit on a page, then click Add Section.
- Click My Saved Sections.
- Check the box in the top-left corner of one or more sections.
- Click Remove. It's not possible to undo this.
Move content between sections
To move content:
- Classic editor block sections - Drag blocks to move them from one block section to another on the same page. It's not possible to move blocks between Fluid Engine block sections.
- 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.