Adjusting your layout in Guidelines
In this tutorial, we'll explore how to adjust page layouts in Guidelines using built-in grids, padding controls, and mobile previews to ensure your brand guide looks great on every device.
Sections and Blocks
In Guidelines, content is arranged in sections (rows that stack vertically) and blocks (individual elements within a section).
Each section can be styled and adjusted using the toolbar, making it easy to control layout, alignment, and design.
Styling a Section
From the section toolbar, you can:
- Change the background color using the color fill dropdown.
- Adjust padding either through numeric controls or draggable handles.
- Set a fixed height, such as ensuring the section always fills at least 80% of the screen.
- Align content to the top, middle, or bottom within the section.
Using Grid Settings
Each section also includes grid settings that control spacing between blocks.
For example:
- Set spacing to
0for no gaps between blocks. - Increase spacing (e.g.,
12px) for a more open, balanced design.
You can adjust grid spacing on a per-section basis, giving you fine-grained control over the look and feel of your layout.
Desktop and Mobile Grids
Guidelines provides two grid layouts:
- Wide screens (desktop view)
- Narrow screens (mobile view)
To preview layouts, use the control near the publish button.
Changes made in the mobile grid affect only the mobile layout, while shared properties (like background color and alignment) remain consistent across both views. This ensures your guide can be optimized for both desktop and mobile experiences.
Best Practices
- Use built-in templates as a starting point, since they are already optimized for mobile and desktop.
- Always preview your guide in mobile mode before publishing to confirm the layout is user-friendly.
- Adjust spacing, alignment, and padding per section to create polished, professional results.
Conclusion
By customizing sections, adjusting grids, and previewing for mobile, you can fine-tune your page layouts in Guidelines. These tools ensure your brand guide looks consistent and professional across all devices.