Horizontal
The Horizontal SalonEngine layout arranges your blocks along the horizontal axis. Instead of scrolling down the page, visitors scroll sideways through a strip of content — ideal for portfolios, film stills, lookbooks, or any sequence you want browsed left to right.
It works with all standard block types: image, text, video, and page blocks.
How scrolling works
Content grows rightward and the section becomes a horizontal scroll strip. Visitors can scroll it in two ways:
- Mouse wheel / trackpad — vertical scroll input is translated into sideways movement while the pointer is over the section (on by default). When the strip reaches either end, normal page scrolling resumes.
- Native scroll — dragging the scrollbar or swiping on touch devices.
Soft fade indicators appear on the left and right edges to signal there's more to scroll in that direction.
Grid modes
Horizontal has two layout modes, set in the section's Layout panel:
| Mode | Behavior |
|---|---|
| Row | Blocks flow across in rows of a fixed height. Set how many rows stack vertically; blocks fill across them and then wrap into the next column of rows. |
| Column | Blocks pack top-to-bottom into columns of a fixed width, then start a new column to the right. Heights are measured from content, so every block keeps its natural proportions. |
In Row mode, rows automatically fill the section height when a fixed height is set, so your strip always reaches edge to edge vertically.
Height
Choose how tall the section is:
- A fixed height (such as full viewport height) makes the strip fill the screen and rows stretch to fit.
- Auto sizes the section to its content instead.
Resizing blocks
In edit mode, drag a block's resize handle to change its width. The rest of the strip re-flows live as you drag.
- Row mode snaps to quarter-width steps when Snap to grid is on, or to fine increments when it's off.
- Column mode snaps to whole column spans (1, 2, 3…).
How a block reacts to resizing depends on the resize mode:
- Proportional (default) — height follows width and the aspect ratio is preserved.
- Fill — the block fills the row height and crops to fit.
Videos always scale proportionally regardless of this setting.
Reordering blocks
Drag any block to a new spot in edit mode. A red drop indicator shows where it will land, and the strip re-flows when you release.
Generate tools
The Layout panel includes two one-click arrangement helpers:
- Shuffle Order — randomly reshuffles the order of every block in the section.
- Randomize Widths — opens a small panel with Min Width and Max Width multipliers. Set the range, then Apply to give each block a random width within it. Reset returns every block to its default width.
These are quick ways to get a lively, non-uniform strip without resizing each block by hand.
Tips
- Use Row mode with one tall row for a classic side-scrolling gallery, or multiple rows for a denser grid that scrolls horizontally.
- Use Column mode when blocks have very different heights and you want each to keep its natural proportions.
- Set the section to full height for an immersive, full-screen scroll experience.
When you're done, click Stop Editing (or the Preview pencil icon in the floating toolbar) to leave edit mode — this also clears the cache so your changes go live.
Related
- Canvas — the default free-form drag-and-drop layout
- Variable Grid — column-based masonry with manual placement
- Slideshow — one-at-a-time presentation with navigation