Canvas Layout
Canvas is the default SalonEngine layout. It gives you free-form control over every block: drag blocks anywhere, resize them, layer them on top of each other, and let Generate build a polished collage for you in one click.
Canvas works on a column grid behind the scenes, so even free-form placement stays clean and responsive.
Editor Mode
The Edit Mode toggle (top of the Layout panel) controls how blocks behave while you drag them:
| Mode | What it does |
|---|---|
| Snap to Grid | Blocks snap to the column grid. Best for tidy, aligned layouts. |
| Freestyle | Drag to any pixel position. Full free-form control. |
| Snap to Object | Blocks snap to the edges and centers of other blocks, with guide lines while you drag. |
Switch modes any time — it only changes how new drags snap, not your existing positions.
Move, resize, and layer
- Move — drag a block anywhere on the canvas.
- Resize — drag a block's edge or corner handle. Blocks resize in grid columns (or freely in Freestyle).
- Layer — the block you grab automatically jumps to the front, so overlapping blocks stack the way you expect.
Generate
Generate lays out all your blocks into a balanced collage. Tune the settings, then click Generate Layout to apply them. Each control updates live as you tweak.
Spacing
Sets the gap between blocks: None, 2px, S, M, or L.
Column Grid
Choose the underlying grid: 12 col (larger, bolder blocks) or 24 col (finer, more detailed placement). Min/max block widths are remembered per grid.
Randomize Block Sizes
Turn this on to let Generate vary block widths for a more organic look. A Block Width Range track appears — click the columns to set the minimum and maximum width (in grid columns) that Generate can use.
Overlap Chance
How often blocks overlap each other: None, 15%, 35%, or 60%. More overlap creates a layered, magazine-style collage.
- Align to Grid — when overlap is on, keep overlapping blocks snapped to column boundaries. (With overlap set to None, blocks always align to the grid.)
Shuffle Order
Turn this on to reorder your blocks randomly on the next Generate Layout. Leave it off to keep your current order.
When you've changed a setting, the Generate Layout button turns red to show there are changes to apply. Click it to run the new layout.
Section Background
The Layout panel includes a quick section background control at the bottom, so you can set the section's color or gradient without leaving the tab. For an image background or full options, open the Section Background tab.
Adding Content
Add blocks from the editor toolbar: image, text, video, and page block. The ••• menu adds newsletter, contact form, and map blocks. New blocks drop onto the canvas where you can drag and resize them freely.
Going Live
When you're done, click Stop Editing (top bar) or the Preview pencil icon (floating toolbar) to leave edit mode. This also clears the cache, so your changes go live immediately.
Looking for a more structured grid instead? See Variable Grid, Square Grid, or Fixed Width.