Skip to content
P2Lab Stage

Editor overview

The editor is a standard visual layout: a central canvas surrounded by tool strips and panels, with a collapsible animation timeline at the bottom. Every region has a single job, and once you know what each one does the rest of the docs lands faster.

The six regions

Section titled “The six regions”
┌──────────────────────────────────────────────────────────────┐
│  Toolbar  (canvas size · device preview · settings · save)   │
├────┬───────────────────────────────────────────┬────┬────────┤
│ T  │                                           │ S  │        │
│ o  │                                           │ h  │  Layers│
│ o  │                                           │ o  │   /    │
│ l  │              Canvas                       │ r  │ History│
│    │                                           │ t  │  panel │
│ s  │                                           │ c  │        │
│ t  │                                           │ u  │        │
│ r  │                                           │ t  │        │
│ i  │                                           │    │        │
│ p  │                                           │    │        │
├────┴───────────────────────────────────────────┴────┴────────┤
│  Timeline  (playhead · keyframes · presets · markers)        │
└──────────────────────────────────────────────────────────────┘
  • Toolbar (top) — canvas size, device preview (mobile / tablet / desktop), stage settings, save, undo/redo, tutorial, fullscreen.
  • Left tool strip — buttons to add layers (image, text, button, html, arrow, shape, group, scene, slider timeline, component library, section/row/column).
  • Center canvas — the actual stage; click to select, drag to move, drag handles to resize. Right-click for the context menu.
  • Right shortcut strip — icon column with popout panels: Layer info, Style, Properties, Character, Paragraph, HTML/CSS, Button, Effects, Image, Arrow, Shape, Scene, Group, Countdown, Coupon.
  • Right wide panel — two tabs: Layers (tree of layers in the stage) and History (Actions / Working copy / Versions).
  • Bottom timeline — collapsible; drives keyframe animations on every layer.

Toolbar

Section titled “Toolbar”

Top bar across the editor. Left to right:

  • Canvas size — the design width × height of the stage shell (px).
  • Device preview — Mobile (375 px) / Tablet (768 px) / Desktop (full design size). Just resizes the preview viewport; doesn’t change the saved canvas size.
  • Stage settings (gear icon) — opens the Stage settings modal (Editor → Stage Settings).
  • Save — persists current state.
  • Take a tour — guided walkthrough of the editor regions.
  • Save as template… — snapshot the stage into a reusable template.
  • Enter / Exit fullscreen — drops the Shopware chrome so the editor takes the whole window.

When the timeline is open you’ll also see Play / Pause / Stop controls in the toolbar for animation playback.

Left tool strip

Section titled “Left tool strip”

The toolbar of layer-adding buttons. Each click drops a new layer on the canvas centered on the current viewport:

  • Image — picks media from the library.
  • Text — editable text block.
  • Button — clickable button with label + link.
  • HTML — raw HTML block.
  • Arrow — SVG arrow with control points.
  • Shape — rectangle / ellipse with solid/linear/radial fill.
  • Group — organizational folder (renders nothing; just structures the panel).
  • Scene — drillable container with its own timeline.
  • Slider timeline — root-only scene synced to slider slides (slider stages).
  • Component library — composite widgets (countdown, coupon code).
  • Section / Row / Column — grid containers for responsive layouts.
  • Select tool (V) / Hand tool (H) — drag-to-pan vs click-to-select modes.

Right shortcut strip

Section titled “Right shortcut strip”

A column of icons on the right. Each icon toggles a popout panel sized for one concern: layer info, position & size, character (typography), paragraph, HTML/CSS, button config, effects, etc. The icons that appear depend on what kind of layer is selected — text layers show Character / Paragraph, image layers show Image, shape layers show Shape, and so on.

Layers / History panel

Section titled “Layers / History panel”

The wide right-side panel with two tabs:

  • Layers — tree view of every layer in the stage. Drag to reorder, click eye icon to toggle visibility, click lock icon to lock from canvas clicks, double-click a layer to open its Layer Style modal.
  • History — three sub-tabs:
    • Actions — chronological log of every edit in the current session (Undo / Redo). Includes “Clear history”.
    • Working copy — the autosaved unsaved-changes draft (see Drafts & revisions).
    • Versions — saved revisions of the stage. Each one is restorable.

Timeline (bottom)

Section titled “Timeline (bottom)”

Collapsible animation timeline. Click any layer’s track to add a keyframe at the playhead; drag keyframes to move them; double-click to edit; right-click for the keyframe menu (Edit / Copy / Paste / Easing / Duplicate +100ms / Seek / Delete). Drag a range on a track to select a band, then right-click to copy / paste fragment / reverse / time-stretch / delete. The ruler shows three optional markers — Loop, Intro-end, Outro-start — controlling cyclic playback behaviour.

Full details in Editor → Timeline.

Keyboard shortcuts

Section titled “Keyboard shortcuts”
  • V — Select tool
  • H — Hand tool (drag to pan)
  • Space (hold) — temporary Hand tool while held
  • Shift+H — flip selected horizontally
  • Shift+V — flip selected vertically
  • Ctrl/Cmd+Z / Ctrl/Cmd+Shift+Z — undo / redo
  • Double-click a scene — drill in
  • Double-click a layer in the panel — open Layer Style modal

Where to go next

Section titled “Where to go next”