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


  1. On the floating build bar at the bottom of the editor, open the ⌄ All widgets popover and locate Bento.
  2. Drag it onto the target section.
  3. By default a 2 × 2 grid drops in, each cell showing an + Add a block placeholder. Click a cell, pick a block type, and that cell is filled.



The selection pill — Bento controls


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


  1. Edit resource (sliders icon) — opens the Layout settings popover (rows, columns, presets — see below).
  2. Design (paintbrush icon) — opens the contextual Design panel on the Bento container itself.
  3. ⋮ More — Edit resource (same as the sliders icon) · Duplicate · Delete.


(No Size / Dark mode / Replace / Expand — the cells, not the container, hold the content.)


Layout settings — the popover


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


Quick layouts (preset buttons)


Eight one-click layouts:


  • 2 columns · 3 columns · 4 columns — a single row split into 2 / 3 / 4 cells.
  • 2 × 2 · 2 × 3 · 3 × 3 — symmetric multi-row grids.
  • Left bar — a narrow column on the left + a wider area on the right.
  • Right bar — same but mirrored: wider on the left, narrow column on the right.



Manual layout (rows + columns)


Below the presets, set the grid by hand:


  • Rows — number input (with a link toggle to keep rows even).
  • Columns — same.
  • Equalize sizes — button. Resets any custom row/column widths back to equal distribution.


When you change rows / columns, existing cells are preserved where possible; new cells appear as empty + Add a block placeholders.


Per-cell controls


Each cell has its own behavior. Click into a cell to focus it, then:


  • Click + Add a block to drop a block type into that cell (Text, Image, Video, Link, etc. — same picker as elsewhere).
  • The focused cell shows its own menu in the top-right corner with cell-level structural commands:


    • Merge down — combine this cell with the one directly below into a single cell.
    • Merge left — combine with the cell to the left.
    • Add row above / Add row below — insert a fresh row of cells at that position.
    • Add column at left / Add column at right — insert a fresh column at that position.
    • Delete row — remove the entire row this cell belongs to.
    • Delete column — remove the entire column this cell belongs to.


  • Fusionner vers le bas — combine cette cellule avec celle juste en dessous en une seule cellule.
  • Fusionner à gauche — combine avec la cellule à gauche.
  • Ajouter une ligne au-dessus / Ajouter une ligne en-dessous — insère une nouvelle ligne de cellules à cette position.
  • Ajouter une colonne à gauche / Ajouter une colonne à droite — insère une nouvelle colonne à cette position.
  • Supprimer la ligne — supprime toute la ligne à laquelle appartient cette cellule.
  • Supprimer la colonne — supprime toute la colonne à laquelle appartient cette cellule.


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 can hold any block type you can drop in via the build bar — Text, Image, Video, Link, CTA, Contact, etc. The block lives inside the cell and is selected/edited like any other block (its own selection pill).


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: 18/06/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!