Sections & Layouts
A section is a horizontal band of your page. Pages stack sections top to bottom, and each section holds your blocks — images, text, video, and page blocks. Every section can use a different layout, background, and spacing, so you mix and match to build the page you want.
To edit a section, click it in the canvas, then open the Layout tab in the right panel. The Layout tab has three sub-tabs:
| Sub-tab | What it controls |
|---|---|
| Section | The SalonEngine layout plus section height, width, and padding |
| Background | A color, gradient, image, or video behind the section |
| Settings | Section slug, where new blocks land, block shuffle, lightbox, and visitor interaction |
Choosing a layout
The Section sub-tab opens with the layout picker. Each SalonEngine layout arranges your blocks differently:
- Canvas (default) — free-form drag and drop; place blocks anywhere.
- Fixed Width — a responsive tile grid.
- Justified — rows of images that keep their aspect ratios.
- Square Grid — a uniform grid of squares.
- Variable Grid — a column-based masonry grid with manual placement.
- Horizontal — a row or column grid you scroll sideways.
- Slideshow — one slide at a time with navigation.
Pick a layout from the dropdown and your blocks re-flow instantly. Below the picker you'll find controls specific to that layout (columns, spacing, row height, and so on). Switching layouts keeps your background and section dimensions.
For a deeper look at each layout, see Layouts.
Section dimensions
Scroll to the bottom of the Section sub-tab to set how the section sizes itself.
Section Height
Available for Canvas, Slideshow, and Horizontal (row mode). Choose a preset:
- Auto — grows to fit content (Canvas only).
- 100% / 75% / 50% / 33% — a fraction of the viewport height.
Click the gear icon for a slider to dial in a custom height between 25% and 100%.
Section-Width
Controls how wide your content sits within the section:
- Full Bleed — edge to edge.
- Full — full width with small margins.
- Wide — the default, roomy but contained.
- Inset — narrower, with more breathing room.
Top Padding and Bottom Padding
Add vertical space above and below the section content: None, XS, S, M, or L.
Section background
Open the Background sub-tab to add a backdrop. Use the toggle at the top to pick a type: Color, Gradient, Image, or Video.
Color and Gradient
Pick from theme-aware preset swatches, or open the picker for a custom color or gradient. Both support opacity, so you can let a previous section's background show through.
Image
Click or drop an image onto the upload zone, or choose Select from Archive to reuse one of your existing assets. Once an image is set, you get:
- Overlay — a color and opacity tint layered over the image to keep text readable.
- Image Size — Cover (fill the section), Contain (fit inside), Original, or Repeat.
- Image Position — a 3×3 grid to anchor the image.
- Scroll Behavior — Scroll moves the background with the page; Fixed (Parallax) holds it in place as you scroll. Parallax shows on your published site only — the editor previews it as Scroll.
Video
Pick an uploaded video to play muted and looped behind your content. As with images, add an Overlay to dim it for readability. Video backgrounds are available on paid plans — see Plans & Pricing.
Section settings
The Settings sub-tab covers the rest:
- Section Slug — the anchor used for in-page links (e.g.
#about). Lowercase, hyphenated. - Add new Assets — choose whether new blocks land To the Top or To the Bottom when you drag in uploads.
- Block Order — Shuffle Order randomizes the order of blocks in the section.
- Lightbox — let visitors click an image to open it full-screen. Click any image to access its lightbox display settings.
- Visitor Interaction — for Canvas and Variable Grid sections, let visitors drag, resize, or remove blocks, with an optional reset button.
Tips
- Mix layouts down a page — a Slideshow hero, a Justified gallery, a Canvas text block — for variety without leaving the editor.
- Overlay an image or video background to keep overlaid text legible.
- Each section can have its own mobile layout and spacing, set independently of desktop — see Mobile & Device Preview.
- When you're done, click Stop Editing (or the Preview pencil in the floating toolbar) to leave edit mode. This also clears the cache so your changes go live.
Related: Blocks · Layouts · Mobile & Device Preview