Keep Sections Ordered - Framer

Keep Sections Ordered in Framer

1. Open your project in Framer and navigate to the page you want to organize.
2. Open the Layers panel on the left to view the full page structure.
3. Identify each major section of the page (hero, about, services, gallery, contact, footer). These are usually Frames that span the full width of the canvas.
4. Drag each section Frame in the Layers panel to reorder them so they follow a logical top-to-bottom sequence:
   • Hero/Header section first,
   • Primary content sections next,
   • Supporting or secondary content after that,
   • Footer last.
5. Click each section Frame on the canvas and open the right-hand panel.
6. Check the Tag settings for headings inside each section:
   • Ensure each section starts with an H2 (or the next correct heading level),
   • Use H3–H4 for nested headings within the same section.
7. Verify no content is unintentionally nested inside the wrong section:
   • Look for Frames or text blocks that appear under a different section in the Layers panel,
   • Drag them back to the correct section Frame if needed.
8. For components used as section wrappers:
   • Select the component instance,
   • Ensure the component is placed correctly in the page structure, not inside another unrelated section.
9. Check responsive behavior by switching to Breakpoints (top bar):
   • Verify that on Tablet and Mobile breakpoints, the visual order still matches the layer order.
   • Adjust Auto Layout direction or spacing if mobile layouts shuffle elements incorrectly.
10. Enter Preview mode and scroll the page to confirm the reading flow feels natural and matches the structured order.
11. Publish or update the project once all sections follow a correct, predictable reading order.