> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://katalyz.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/5/5/4/8/554891f22af0b400/screenshot-2026-06-17-at-18230_2t5rmk.png)

> 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](https://katalyz.crisp.help/en/article/section-templates-micro-templates-aob2kc/).
- **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](https://katalyz.crisp.help/en/article/adding-and-reordering-widgets-1dajz6a/).)

## 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:

![](https://storage.crisp.chat/users/helpdesk/website/-/5/5/4/8/554891f22af0b400/screenshot-2026-06-17-at-18232_1tj5d6p.png =342xauto)

### 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](https://katalyz.crisp.help/en/article/introduction-to-widgets-skwh2f/).

> **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.

## Related articles
- [Adding and reordering pages and sections](https://katalyz.crisp.help/en/article/adding-and-reordering-pages-and-sections-1jg01wj/)
- [Adding and reordering widgets](https://katalyz.crisp.help/en/article/adding-and-reordering-widgets-1dajz6a/)
- [Section templates](https://katalyz.crisp.help/en/article/section-templates-micro-templates-aob2kc/)
- [Introduction to widgets](https://katalyz.crisp.help/en/article/introduction-to-widgets-skwh2f/)