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
The Mobile setting controls how columns behave on smaller screens:- Left on top (default): columns stack, each full width, in order from left to right, top to bottom.
- Right on top: columns stack in reverse order, so the rightmost column appears first. For example, in an image-on-the-right layout this keeps the image above its text on phones. Desktop layout is unaffected.
- Keep Columns: columns stay next to each other at every screen size.
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.