.png?table=block&id=219105a2-9d95-81a1-bc53-d68f4945adac&cache=v2)
Last Edited Time
Jun 25, 2025 09:35 PM
Do not index
Do not index
Suggested Tag
Squarespace
squarespace customization
website design
Tags Synced
Tags Synced
AI summary
Learn to add, edit, and style sections in Squarespace for effective page layouts, utilizing both Fluid Engine and Classic Editor, while maintaining performance and consistency across your site.
Last edited by
Platform
Category
Topic
How to Add and Style Squarespace Page Sections
Learn to add, edit, and style Squarespace sections for diverse layouts.
Building effective Squarespace pages is all about understanding how sections work. Whether you're using the Fluid Engine (7.1) or Classic Editor (7.0), sections are the building blocks that stack vertically to create your page layout.
Getting Started with Sections
Every new Squarespace page starts with at least one section. This can be a pre-designed template or a blank canvas, depending on what you choose when creating the page.
Here's how to add and manage sections:
Adding a new section:
- Click 'Edit' in the top-left corner of your page
- Choose 'Add Section' above or below an existing section (or in the centre if your page is empty)
- Browse the categories for pre-built sections or pick a blank section to build from scratch
Pixelhaze Tip: Plan your page layout before you start adding sections. It'll save you time rearranging things later.
Working with Fluid Engine vs Classic Editor
The editing experience depends on which Squarespace version your site uses:
Fluid Engine (7.1 sites):
- Look for an 'Add Block' button when editing - this confirms you're using Fluid Engine
- Drag blocks freely within sections for flexible layouts
- More control over spacing and positioning
Classic Editor (older 7.0 sites):
- Identified by the '+ icons' that appear around blocks
- More structured, grid-based layouts
- Still uses spacer blocks for positioning (these aren't needed in 7.1's general layout)
Moving and Organising Sections
Changing the order of sections is straightforward:
- Hover over any section to reveal the up/down arrows
- Click to move sections higher or lower on the page
- Use the duplicate option to copy sections you like
- Delete sections you no longer need
Saving sections for reuse:
Click the heart icon when editing a section to save it. You can then add this saved section to other pages, which is brilliant for maintaining consistency across your site.
Styling Your Sections
You have two main approaches for section styling:
Individual section styling:
- Each section can have its own background, colours, and design settings
- Access these through the Design tab when editing a section
- Add section dividers, background images, or videos for extra impact
Site-wide styling:
- Use the site styles panel to apply consistent formatting across all sections
- This approach keeps your design cohesive and saves time
Pixelhaze Tip: Mix both approaches - use site-wide styles as your foundation, then customise individual sections when you need them to stand out.
Performance Considerations
While you can technically add unlimited sections, keep these guidelines in mind:
- Aim for fewer than 20 sections per page for optimal loading times
- Consider combining related content into single sections rather than creating multiple small ones
- Test your page speed regularly, especially on mobile
Common Questions
Can I add sections to my footer?
Yes - hover over your footer area, click 'Edit Footer', and add sections there just like you would on a regular page.
What's the difference between block, auto layout, and collection sections?
- Block sections: For custom layouts using individual content blocks
- Auto layout sections: Pre-designed layouts that automatically arrange your content
- Collection sections: Display blog posts, portfolio items, or other collection content
How do I maintain consistent designs across pages?
Use saved sections and your site's style settings. This combination lets you replicate layouts quickly while keeping your design consistent.
Quick Reference
- Add sections: Edit page > Add Section
- Move sections: Hover and use up/down arrows
- Save sections: Click the heart icon while editing
- Style sections: Use the Design tab or site styles panel
- Performance: Keep under 20 sections per page
Understanding sections is fundamental to building effective Squarespace sites. Once you get comfortable with adding and styling them, you'll find it much easier to create the exact layouts you want.