Layouts define page structure and provide zones for placing content. Compass simplifies layouts with fewer zones and relies on content components for layout control.
Key Takeaways
Layouts
- Full Width (Includes page attributes for hero content, ideal for landing pages)
- Standard (Constrains content to standard width, ideal for pages with core blocks)
- Details (Includes built-in table of contents, ideal for pages with multiple paragraph-style sections)
- Left Sidebar (Core Layout)
Zones
- Announcement Banner (Content Channel Driven)
- Nav
- Main
- Footer
- Cookie Notice (Compliance for Data Collection)
Deeper Dive into Layouts
Best Practices
- Follow heading hierarchy: one H1 per page; start content sections with H2
- Use Full Width layout for maximum flexibility.
- Avoid long line lengths to improve scanning.
- Use background colors strategically to break up sections.
- Keep block names clear to support table of contents navigation.
- Use the Announcement Banner for global messaging when needed.
- Test layouts across screen sizes to ensure consistency and usability.