Articles on: Rooms

Styling sections and widgets

When you select a section or a widget, two pieces of UI appear:


  1. An inline selection pill that floats above the selection — for quick actions (open, layout, edit content, design, more, ask AI).
  2. The Design panel on the left — which becomes contextual, showing the selected item's design controls at the top, above the global page Design settings.



Both only appear in edit mode. In Present mode, buyers see neither.


The selection pill


Left to right, the chips on the pill are:


  • Open (widgets only) — open the widget's full configuration.
  • S / M / L (widgets only) — per-widget layout / width toggles.
  • Edit content (widgets only) — edit the widget's content inline.
  • Design — open the contextual Design panel (see below).
  • ⋮ More — quick actions menu (different for sections vs. widgets — see below).
  • Ask AI — gradient AI chip; starts an AI thread anchored on this element.


More menu — for sections


  • Copy link — direct link to this section for sharing internally
  • Duplicate — independent copy
  • Hide / Show — toggle visibility for buyers
  • Copy as template — save this section as a section template (micro-template) reusable across rooms. See Section templates.
  • Add to page — attach this section to additional pages (the same section, shared — not a copy; see [Share a section across multiple pages](→ 02-rooms/02-structuring-a-room/02-adding-reordering-sections#share-a-section-across-multiple-pages))
  • Rename
  • Move up / Move down
  • Delete


More menu — for widgets


  • Duplicate
  • Delete


(Widgets don't have Hide/Rename/Move up-down because those operations don't apply at the widget level — see Adding and reordering widgets.)


The contextual Design panel


Clicking Design on the pill opens the Design panel on the left. The panel is now contextual: the selected item's design controls are pinned at the top in collapsible sections, and the global page Design settings (Section Defaults, Header, Color Palette, Typography) sit beneath them.


The selection's controls are grouped as follows:



Layout & corners

  • Compaction (sections only) — segmented toggle:
    • Enabled — widgets automatically close gaps as you move or resize them. Best for linear, readable content (proposals, QBRs).
    • Disabled — widgets can sit anywhere with gaps between them. You can place widgets side-by-side or overlap them. Best for pitch decks, landing-page heroes, creative content.

Per-section, so the same room can mix a compacted "Pricing" section and a free-layout "Hero" section.

  • Corners — radius for the section's outer corners.


Spacing

  • Margin (sections only) — external spacing around the section. 4-side inputs (top, right, bottom, left), with a linked toggle in the field-label row to lock all four together.
  • Padding — internal spacing around the contents. Same 4-side inputs + linked toggle pattern.


Background

Fill behind the section/widget's contents:

  • None — transparent
  • Color — pick a hex value
  • Image or Video — use the Media picker to either upload a file or paste a URL


Cover (sections only)

A full-width layer that sits behind everything else in the section — it extends edge-to-edge regardless of the section's padding:

  • None / Color / Image / Video


Different from Background: Background fills the inside of the section (within padding); Cover bleeds full-width behind the whole thing, useful for dramatic backdrops or full-bleed hero imagery.


Border

  • None / Solid / Dotted / Dashed — style
  • Border width and color controls


Effects

  • Opacity — 0–100%. Useful for de-emphasizing without hiding.
  • Shadow — drop shadow intensity, 0–100%.
  • Background blur — backdrop blur intensity (useful with translucent backgrounds).


The controls are all collapsible sections (not nested tabs). Open the ones you need; the rest stay tucked away. The 4-side inputs use a linked toggle in the field-label row, which gives the four inputs full width when unlinked.


What's available on widgets vs sections


Control

Sections

Widgets

Compaction (in Layout & corners)

✅

❌ (the parent section's compaction rules them)

Corners

✅

✅

Margin (Spacing)

✅

❌

Padding (Spacing)

✅

✅

Background

✅

✅

Cover

✅

❌

Border

✅

✅

Effects (Opacity / Shadow / Background blur)

✅

✅


Widget-specific options


Some widget types expose extra options beyond what the Design panel shows. A couple of examples:


  • Image widget — extra Size toggle (S / M / L) and toggles for Title, Subtitle, and Quote captions.
  • CTA widget — inline edits for the button's label and destination (link / page / action).


Other widgets (video, document, contact, meeting, signature, etc.) have their own inline or panel controls — see their individual articles in the widgets catalog.


Note on text widgets: text editing uses its own contextual text toolbar (bold, italic, headings, lists, links — the standard rich-text affordances). One thing worth knowing: you can insert images directly inside a text widget, so they sit alongside your text like in a classic word processor — you don't need a separate image widget for inline images.


Tips


  • Pick Compaction per section — a single page might mix a compacted "Pricing" section with a free-layout "Hero" section.
  • Covers beat background images for top-of-page impact.
  • Use margin sparingly — rooms with lots of white space feel premium; rooms with margin on every section feel scattered.
  • Pick one corner radius and stick with it — 0, 4, 8, 12 px — across your templates.


Updated on: 18/06/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!