Adding a Column Layout
There are two ways to create a column layout:- Drag and drop: Drag a block next to an existing block in the canvas. A column layout is created automatically.
- Add block menu: Select a layout option from the add block menu to insert a pre-configured column structure.
Layout Options
Flowforth offers five column layouts:
Each column can contain one or multiple blocks of any type. You can mix and match text, images, buttons, and other blocks within a single column.
Spacing Controls
Column Gap
The column gap controls the horizontal space between columns. Adjustable from 0 to 40px, with a default of 16px.Block Gap
The block gap controls the vertical space between blocks stacked within the same column. Adjustable from 0 to 40px, with a default of 15px.Swap Columns
For two-column layouts, click the swap button to switch the positions of the left and right columns. This is a quick way to flip your layout without moving blocks manually.Mobile Stacking
By default, columns automatically stack vertically on mobile devices. Each column becomes full width and appears in order from left to right (top to bottom on mobile). You can disable stacking on a per-layout basis if you want columns to stay side by side on smaller screens.Tips
- Use the 1-column layout when you want a shared background image that spans across multiple blocks. Apply the background image in the column’s block settings.
- Keep three-column layouts simple. On mobile, three stacked sections can get long, so shorter content works best.
- Use column and block gap settings together to fine-tune the overall density of your layout.