Learn how to use sections, containers, and grid systems to create professional web layouts that work across all screen sizes.
Understanding Web Layout
Web layouts in Sites Mode are built using a hierarchy of containers:
- Page - The top-level container (full browser viewport)
- Section - Full-width horizontal bands that stack vertically
- Container - Centered content area with max-width
- Grid/Flexbox - Layout systems for arranging elements
- Elements - Individual design components
The Blocks Panel
Access the Blocks Panel in the left sidebar to add pre-built layout blocks:
- Hero sections with various layouts
- Feature grids and showcases
- Testimonial sections
- Pricing tables
- Contact sections
- Footer layouts
Creating Sections
- Sections span the full width of the page
- Add a section from the Blocks Panel or by inserting a container
- Set section background (color, gradient, or image)
- Configure padding for content spacing
- Sections stack vertically to form the page
Container Settings
- Max Width - Limit the content width (typically 1200px)
- Padding - Inner spacing from edges
- Centering - Auto margins center the container
- Responsive Width - Adjusts for smaller screens
Grid System
Create multi-column layouts with the grid system:
- Set number of columns (1-12)
- Configure column gap spacing
- Define row gap spacing
- Elements can span multiple columns
- Grid adjusts automatically for breakpoints
Flexbox Layout
Use flexbox for flexible, one-dimensional layouts:
- Direction - Row (horizontal) or column (vertical)
- Justify - Distribute items along main axis
- Align - Position items on cross axis
- Wrap - Allow items to wrap to new lines
- Gap - Spacing between items
Responsive Layouts
- Use the Breakpoint Bar to preview different screen sizes
- Grid columns automatically stack on mobile
- Override layout settings per breakpoint
- Hide/show elements at different breakpoints
Layout Best Practices
- Start with a section and container structure
- Use consistent spacing throughout
- Design mobile-first, then enhance for larger screens
- Test across all breakpoints
- Keep content hierarchy clear