Control panes overview
The control panes are the right-side panel of the Site Designer workspace. They give you access to every property of a selected element — from its text content and CSS styles to its animations and position in the page hierarchy.
The five panes
The panel has five tabs. Click any tab icon to switch to it.
| Tab | Icon | Purpose |
|---|---|---|
| Content | Text icon | Edit text, links, image sources, and custom HTML attributes |
| Design | Brush icon | Manage classes and IDs (Element sub-tab), and all CSS visual controls (Style sub-tab) |
| Effects | Sparkle icon | Add transitions, hover effects, keyframe animations, and CSS filters |
| Outline | Tree icon | Browse and reorganize the full DOM tree of the current page |
| CSS | Code icon | Inspect the computed CSS rules applied to the selected element (read-only) |
Context-sensitive content
The panes are aware of what you have selected. When you click a different element on the canvas, the pane content updates immediately to reflect that element’s properties.
- Selecting a text element populates the Content pane with editable text fields.
- Selecting a container like a
<div>shows an empty Content pane — containers have no direct text content to edit. - Selecting nothing (clicking the canvas background) clears all panes.
Switching between tabs
Click the icon buttons along the top of the right panel to switch tabs. There are no keyboard shortcuts to switch panes directly, but you can press Esc to deselect the current element and Tab to cycle focus between elements on the canvas.
Collapsing and resizing the panel
- Resize: Drag the left edge of the panel toward the canvas to give yourself more design space, or pull it outward for a wider pane.
- Collapse: Click the collapse arrow at the top-left corner of the panel to hide it entirely. Click it again to restore.
Site Designer saves the panel width and collapsed state between sessions, so your workspace stays the way you left it.
