Keep Sections Ordered - Squarespace

Keep Sections Ordered in Squarespace

1. Open your Squarespace site and navigate to the page you want to organize, then click Edit to activate inline editing.
2. Hover near the left edge of any section to reveal the Section Controls, then click the ⋮⋮ drag handle.
3. Drag each section up or down until the page follows a clear top-to-bottom reading order:
   • Hero or header section at the top,
   • Main content sections in logical sequence,
   • Footer at the bottom.
4. Click into each section and open the Settings (gear icon).
5. Scroll to the Accessibility or Advanced section (varies by version) and check the Section Label:
   • Add a short descriptive label (e.g., “Hero Section”, “About Section”, “Contact Section”).
   • These labels help screen readers identify each section but are not displayed visually.
6. Ensure major sections are not nested inside one another. If a block needs grouping, insert a Spacer or Layout Block inside the section rather than stacking sections within sections.
7. Review headings inside each section:
   • Each major section should start with an H2,
   • Subcontent uses H3–H4 as needed,
   • Avoid multiple H1s across the page.
8. Switch to Mobile preview and scroll through the page to confirm the order remains correct. Adjust section positions if mobile layout visually shifts content.
9. Click Preview and test the full page to ensure content flows logically from top to bottom without unexpected jumps.
10. Save and publish your changes, then open the live site and verify with your browser’s accessibility inspector that the DOM order matches your intended reading order.