Drag-and-Drop with Auto-Hierarchical Layouts in the Builder

Old builder workflow: pick a section, then a row, then a column, then drop your element. The enhanced builder skips that. Drop an element anywhere and the layout containers appear around it.

What auto-hierarchical drag-and-drop does

• True drag-and-drop — place any element directly on the canvas.
• Auto-wrap logic — the builder generates Section > Row > Column behind the scenes.
• Smart placement detection — valid drop targets light up automatically.
• Inline column controls — add columns to existing rows without leaving the canvas.
• Visual feedback — ghost outlines and drop zones show where elements will land.

Enable it

The feature lives in Agency View > Labs. Turn it on at the agency level so sub-accounts can use it.

Use it on a page

1. Open any funnel or website page in the builder.
2. Drag an element (Text, Button, Image) from the sidebar onto an empty area of the canvas.
3. The builder wraps it in the correct Section, Row, and Column automatically.
4. To move an element, grab anywhere on it and drag — no move handle required.
5. To add columns to a row, hover the row and click + Add Column.
6. Use ghost outlines to align elements with precision.

Reorder columns inside a row

1. Hover the row to reveal column boundaries.
2. Grab a column and drag it left or right within the same row.
3. Release on the drop indicator to commit.

Column reordering is scoped to the same row. After reordering, check tablet and mobile views — responsive stacking can shift.

Examples

• Text on blank canvas: auto-creates Section > Row > Column > Text.
• Row on blank canvas: auto-creates Section > Row with default columns.
• Adding columns to an existing row: click + Add Column inline.

Precision tips

• Zoom in for small placement adjustments.
• Use rulers and guides where available for consistent alignment.
• Use Undo and Redo freely to back out of misdrops.