Skip to main content

Documentation Index

Fetch the complete documentation index at: https://help.flowforth.co/llms.txt

Use this file to discover all available pages before exploring further.

Column layouts let you place blocks next to each other in your email. You can use them to create multi-column designs, compare content side by side, or build more complex visual arrangements.

​
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:
LayoutDescription
1 Column (100%)A single full-width column. Useful when you want a shared background image across multiple blocks.
2 Equal Columns (50/50)Two columns of equal width, splitting the content area in half.
3 Equal Columns (33/33/33)Three columns of equal width.
1/3 + 2/3A narrow left column and a wider right column.
2/3 + 1/3A wider left column and a narrow right column.
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 styles.
  • 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.