Articles on: Rooms

Bento widget

The Bento widget is a configurable grid container — a layout shell where each cell holds its own block. Drop one in when you want a structured set of small, equal-weight items: a feature grid, a team list, a tile dashboard, a "what's included" panel.

Think Bento box. Several compartments inside one frame, each filled independently, sized to the same outer shape.

How to add

On the floating build bar at the bottom of the editor, click or drag Bento — it sits in the primary widgets row.
Drop it onto the target section.
By default a 2 × 2 grid drops in, each cell showing an + Add widget placeholder. Click a cell, pick a widget type from the picker, and that cell is filled.

The selection pill — Bento controls

Click the Bento (anywhere outside an individual cell) to select the container:

Ask AI (gradient AI mark).
Edit content (settings icon) — opens the Layout & settings popover (presets, rows, columns — see below).
Design (paint bucket icon) — opens the contextual Design panel on the Bento container itself.
⋮ More — Duplicate · Delete.

(No Open / S-M-L — the cells, not the container, hold the content.)

Open via the settings icon on the pill. Two ways to shape the grid:

Quick layouts (preset buttons)

Eight one-click layouts:

2 cols · 3 cols · 4 cols — a single row split into 2 / 3 / 4 cells.
2×2 · 2×3 · 3×3 — symmetric multi-row grids.
Sidebar L — a narrow column on the left (⅓) + a wider area on the right (⅔).
Sidebar R — mirrored: wider on the left, narrow column on the right.

Manual layout (rows + columns)

Below the presets, set the grid by hand:

Rows — a stepper (1 to 6).
Columns — a stepper (1 to 6).
Even out sizes — button at the bottom. Resets any custom row/column widths back to equal distribution.

When you change rows / columns, filled cells are preserved in order; new cells appear as empty + Add widget placeholders.

Per-cell controls

Cell operations happen directly on the grid, not in a per-cell menu:

Click + Add widget in an empty cell to open the widget picker.
A filled cell shows two small buttons on hover: Replace (pencil — reopens the picker) and Clear (✕ — empties the cell without removing it).
Merge / split — hover the boundary between two cells:
- The button on a cell's right edge merges it with the cell to its right (Merge with cell on the right), or splits it back if it already spans.
- The button on a cell's bottom edge merges it with the cell below (Merge with cell below), or splits it back.
Add a row or column — the + buttons on the grid's right edge (add column) and bottom edge (add row).
Resize — drag the handle on a cell's right or bottom edge to change the column width or row height. Even out sizes in the settings popover undoes this.

Use merges to break the symmetric grid for emphasis — e.g. take a 2×3 layout and merge two cells horizontally to create a wider hero tile while keeping the others as smaller cards.

What goes inside a cell

A Bento cell takes a restricted set of widget types — the ones that make sense inside a tile:

Text · Field · Document · Video · Contact · Link · Image · Meeting · Recording · KPI · Chart · CTA · Testimonial · FAQ · Placeholder · Room

Step, Timeline, Spacer, Ticker, Table and Signature are not available inside a Bento — put those directly in a section instead.

When to use

Feature grid — 6 cells with an icon + short caption each.
Team showcase — Contact cards arranged in a 2×3 grid.
"What's included" — tiles describing what comes with a plan.
Mixed media wall — a hero image merged across two cells, with supporting links/text in the rest.

When NOT to use

Long-form content — Bentos compress content; if you have paragraphs of narrative, use Text widgets in a regular section instead.
One thing per row — if every row holds exactly one block, you don't need a Bento. Just stack widgets in a normal section with Compaction enabled.

Updated on: 01/10/2026

Was this article helpful?

Thank you!