Layers

A stage is built from layers. The plugin ships fourteen layer types, grouped here by purpose: visual layers (the things visitors actually see), organizational layers (panel-only structure), container layers (parents that hold other layers), and composite layers (interactive widgets).

For a single-page reference of every data JSON shape, see Reference → Layer types.

Visual layers

Layers that render directly to the canvas and to the storefront.

Image (image)

A media item from your library. Add via Add image layer on the left tool strip, then pick a file. Editable in the Image popout: source media, Image fit (Cover / Contain / Fill / None / Scale down), constrained alignment when the layer has a max-width or max-height.

Storefront output: <img class="p2lab-stage__layer-img" src="…" loading="lazy">.

Text (text)

Plain text block. Add via Add text layer. Double-click on canvas or in the panel to edit content in a modal. The Character and Paragraph popouts cover typography (font family, size, weight, color, letter spacing, line height, alignment, padding).

Button (button)

A clickable call-to-action. The Button popout exposes label, background color, text color, border radius, and a click action with three modes: Open URL (with target = same window or new tab), Close popup (dismiss the popup), or Don’t show again (close + permanent dismiss).

Storefront output: <a class="p2lab-stage__layer">.

HTML (html)

Raw HTML block. The HTML / CSS popout edits sanitized markup. Use this for anything the structured layers can’t express — embedded video, custom forms, third-party scripts.

Storefront output: <div>{{ htmlContent|sw_sanitize }}</div>. Server-side sanitization strips dangerous tags / attributes.

Arrow (arrow)

SVG arrow with start, end, and curve control points expressed as percentages of the layer box. The Arrow popout sets color, line width, line style (Solid / Dashed / Dotted), head style (Triangle / Open / Diamond / None), head size, and the four control points (Start X/Y, End X/Y, Curve X/Y).

Shape (shape)

Vector-style primitive: rectangle, ellipse, or polygon. The Shape popout sets shape type, fill (Solid color / Linear gradient / Radial gradient with the gradient editor modal), border radius. Useful for backgrounds, gradient overlays, decorative shapes, drop-shadow puddles.

Organizational layer

Group (group)

A folder in the Layers panel. Holds other layers; renders nothing on canvas / storefront. Use to keep the panel tidy on complex stages — pre-launch cans, intro, outro, navigation chrome, etc. Editable: group name, collapsed-by-default flag.

Convert a group to a scene or vice versa via the right-click context menu (Switch type to scene / Switch type to group). Wrapping is also one-click (Wrap in group).

Container layers

Containers hold children and add their own rendering behaviour.

Scene (scene)

A drillable container with its own independent timeline and loop. Children live in the scene’s coordinate space; their keyframes run on the scene’s clock — not the root stage clock. Use scenes for:

• A self-contained sub-animation (a logo reveal that loops independently from the rest of the stage).
• A reusable block that should keep the same internal animation across multiple slides.
• Slides themselves — each slide of a slider stage is a scene.

Editable: scene name, design width / height, overflow (Visible / Hidden / Auto / Scroll, linkable X+Y), loop on/off, loop start (ms), padding. Double-click on canvas to enter the scene (zooms into its internal coordinate space).

Section / Row / Column (section / row / column)

Grid layout primitives — Flexbox under the hood. Used together to build responsive layouts that reflow on narrow viewports.

• Section — flex column at the grid root. Holds rows. Configurable: max-width, padding, gap, background color, vertical alignment.
• Row — flex row inside a section. Holds columns. Wraps when columns’ mobile widths exceed 100%. Configurable: gap, alignItems, justifyContent, mobile gap.
• Column — flex item inside a row. Sized by flex-basis = desktopWidth (e.g. 50%). On viewports < 640 px, flex-basis = mobileWidth (default 100% — auto-stack). Configurable: desktop width, mobile width, padding, alignItems, justifyContent, background color.

Section / row / column can be nested — a column can contain another section for recursive grids. Add via the left tool strip (Add section / Add row / Add column) or via the row’s context menu (Add row before / after / Add column before / after).

Animation behaviour: opacity isn’t applied to grid containers (they’re flex layout boxes, not content). Edit opacity on the content layers inside them instead.

Slider timeline (slider-timeline)

A root-only scene whose timeline is auto-aligned to a slider stage’s slides. Duration is auto-computed as the sum of all slide durations + offsets. Segments correspond to slide boundaries. The storefront engine pauses at each segment; the slider plugin resumes on slide change. Use this to drive elements that should transition synchronized to slide changes (global cans, headers, footers).

Only available on slider-type stages.

Composite layers

Interactive widgets that render specialized markup.

Countdown (countdown)

Live-ticking countdown to a target date. The Countdown popout configures:

• Target date and time — when the countdown ticks down to.
• Units to show — pick from Years / Months / Days / Hours / Minutes / Seconds (order in the picker = render order left-to-right).
• Unit labels — display label for each unit.
• When expired — Hide / Show zeros / Show a message (with Expired message text).
• Colors — text, border, background.
• Border style + width — Solid / Dashed / Dotted / Double / None.

Storefront JS updates DOM every 1 s; admin canvas shows a static placeholder.

Coupon (coupon)

Coupon code in a styled container, optionally copy-to-clipboard on click. The Coupon popout configures:

• Coupon code — the code string.
• Copy to clipboard on click — wires click handler.
• Show clipboard icon — small icon as a visual hint (independent of click behaviour).
• Confirmation message — flashes when copied.
• Colors and borders — same set as countdown.

Eye and lock toggles

Every layer in the panel has two togglable icons:

• Eye — hide / show. Hidden layers don’t render on canvas or storefront but stay in the tree.
• Lock — lock / unlock. Locked layers can’t be selected on the canvas; you have to click the layer in the panel.

Both states are saved with the stage.

Reordering

Drag a layer up or down in the Layers panel to change z-order. Drag onto a group or scene’s row to move the layer inside. Right-click → Move up / Move down / Move out of group are keyboard-free alternatives.

The visible z-order on canvas is bottom-to-top: the layer at the bottom of the panel renders behind everything; the top of the panel is the foreground.

Where to go next

• Layer Style — effects per layer (parallax / drop shadow / stroke / background / transform / filter / click action).
• Timeline — keyframe-driven animation on every layer.
• Reference → Layer types — single-page table of every type with data JSON.