The Layout Designer
A tour of the layout designer: layers, canvas, inspector, autosave and the status bar.
Click a layout (or create one) to open the designer, a full-screen workspace with the canvas in the middle, Layers on the left and the Inspector on the right.
The top bar
Section titled “The top bar”| Control | What it does |
|---|---|
| ← (Back to layouts) | Returns to the list. Your changes are already saved. |
| Layout name | Click the pencil to rename. Beside it: the status badge and canvas size. |
| Undo / Redo | Step through your edits. The tooltip names the action. |
| Text · Shape · Media · Playlist · Widgets | Add elements. See Adding Content to Layouts. |
| Save status | All changes saved, Unsaved changes, or an error with Retry now. |
| Preview | Plays the layout with live content (shortcut P). |
| Publish | Publish, schedule, save as template, discard or reset. See Publishing Layouts. |
Autosave
Section titled “Autosave”In a draft, changes save automatically. There is no Save button to remember. The top bar shows All changes saved when you’re up to date, and ⌘/Ctrl + S saves immediately. If a save fails you’ll see Your latest changes aren’t saved with Retry now. Stay on the page until it clears.
Saving is separate from publishing. Autosave keeps your draft safe, but screens only change when you publish.
If you open the same layout in two tabs, Stratos warns you: This layout is already being edited in another tab. Changes may conflict.
Read-only view of a published layout
Section titled “Read-only view of a published layout”A layout that is live opens read-only with Viewing the published version.
Click Edit (creates draft) to make a working copy you can change without touching what’s on screens. See Editing a live layout.
Layers panel
Section titled “Layers panel”Lists every element, front to back, with its type (Text, Media, Playlist, Clock and so on). The counter shows how many of the 50 allowed elements you’ve used.
- Click a layer to select it. ⇧-click to select several.
- Drag layers to change stacking order. The top of the list is in front.
- Hover for Hide in editor (it still plays on screens), Lock position and Delete.
- Double-click a name to rename the element.
Collapse the panel with the button at its top corner, or toggle both side panels with ⌘ + \.
The canvas
Section titled “The canvas”The canvas shows your layout at the chosen zoom. Click an element to select it and a floating toolbar appears above it, with the controls that matter for that element type, such as font and size for text. Drag to move, use the handles to resize, and the rotate handle to rotate (snaps to 15° unless you hold Alt).
- Pan: hold Space and drag, or scroll.
- Zoom: ⌘ + scroll, or use the controls in the status bar.
- Select an area: drag on empty canvas to marquee-select.
- Snap guides help you align to other elements and the canvas edges.
An empty canvas shows Start your layout with shortcuts to add Text, Media or Widgets.
The Inspector
Section titled “The Inspector”Select an element to edit it. The inspector header shows its name and type, and has three areas:
- Arrange: exact X, Y, W, H and rotation, aspect-ratio lock, alignment and distribution buttons, and layer order.
- Content tab: what the element shows (media, playlist or widget) and its settings.
- Style tab: fill, corners, border, shadow, padding, opacity, media fit and transitions.
With nothing selected, the inspector shows the Layout settings: Name, Canvas size, and the Background (a Color and an optional Image with fit and position).
If an element has a problem that would block publishing, a Fix before publishing list appears here. Click an item to jump to the field.
Canvas size
Section titled “Canvas size”Click Change beside the canvas size to open Resize canvas. Pick a preset (HD, Full HD, 4K, ultra-wide, portrait versions, Square) or enter Width and Height, and choose how existing elements adapt:
| Option | Effect |
|---|---|
| Keep positions | Elements stay where they are. Anything past the new edge is pulled back on. |
| Scale proportionally | Everything grows or shrinks evenly and is centred. Nothing is distorted. |
| Stretch to fill | Each axis scales separately so elements fill the new canvas. Shapes may change. |
Undo reverts a resize.
The status bar
Section titled “The status bar”At the bottom: the selected element’s name, position and size on the left; on the right the grid and snapping controls (Snap to grid, Snap to elements and canvas, Grid size), zoom out / in / to fit, the current zoom, and Keyboard shortcuts. Press G to show or hide the grid.