Sections, Grid & Layers

A Luna section is the composition frame: it owns child membership, a responsive grid, horizontal and vertical gaps, surface settings, and layer order. Blocks remain independent content or visual elements inside that frame.

Set the section grid and gaps

Select the section itself, open Section Settings → Grid, and inspect Horizontal Gap and Vertical Gap before moving individual blocks. Use these shared values to create consistent rhythm instead of inserting empty rows or oversized text frames.

Compose on the responsive grid

Desktop uses 24 content columns, Tablet 12, and Mobile 8. Place the dominant block first, then supporting text, media, and actions in semantic order. Keep content-driven blocks compact and let section padding provide outer breathing room.

Horizontal Gap

Horizontal Gap controls separation between neighboring column spans. Review tight cards and wide media/text pairs so the gap supports both density and alignment.

Vertical Gap

Vertical Gap controls separation between grid rows. Do not use extra empty rows as a substitute; the section should end close to its lowest block with intentional padding.

Inspect Layers separately

Open Layers after positions and gaps are stable. Read the listed blocks in stack order, confirm visibility, and identify whether any overlap is deliberate before changing the order.

Use layer order with caution

Grid coordinates decide where blocks sit; Layers decides which one appears in front. Use overlap for a clear visual purpose such as a decorative shape behind content. Never use a text block as the structural background for sibling blocks.

Visibility and reading order

A block hidden or covered by another layer may still affect semantics and focus. Keep the visual stack aligned with the intended reading and interaction order, and ensure every control remains reachable.

Compound components

When several blocks form one card, testimonial, profile, or pricing option, group the complete unit. Keep independent cards in separate groups so hover reactions and responsive movement stay predictable.

Stack Pin Section

Enable Stack Pin Section in Section Settings to keep the current section pinned while following sections scroll over it. Use Stack Until Section to set the release point: 1 means the next section, 2 means the second section after it, and so on. The effect is visible only on the published site.

Use this effect for a short, deliberate layered sequence. Give each covering section an opaque surface, keep essential reading order independent of the overlap, and test the full scroll interaction and responsive behavior before release.

Responsive implications

Review automatic reflow before locking Tablet or Mobile positions. Preserve heading-to-content adjacency, move decorative layers behind meaningful content, retune gaps for narrower widths, and avoid overlaps that depend on desktop-only geometry.

Accessibility and common mistakes

Check logical order, focus visibility, contrast over media, touch targets, and controls hidden by layers. Avoid accidental overlap, excessive section rows, inconsistent gaps, hidden content that remains focusable, and responsive layouts that reverse meaning.

Section recipe

Select the section. Establish reading order. Place the dominant block. Set Horizontal Gap and Vertical Gap. Confirm the surface and contrast. Review Layers and visibility. Inspect automatic Tablet and Mobile reflow. Lock only the positions that need deliberate control.

Next steps

Continue with Responsive Design to compare automatic reflow with locked layouts. Return to The Style Panel only for surface or spacing exceptions that cannot be owned by the section.