Skip to content
P2Lab Stage

Stage Settings

Click the gear icon in the editor toolbar to open Stage settings — the modal that controls the stage’s shell rather than individual layers. Seven sections, each toggled from the left rail.

Canvas

Section titled “Canvas”

Sizing and rendering behaviour of the stage shell itself.

  • Width / Height — outer popup container size. Accepts px (e.g. 800px), % of viewport (100%), calc(), vw/vh, or auto.
  • Design width (px, optional) / Design height (px, optional) — the internal pixel grid the scene uses for child positions and keyframes. Leave empty to inherit from the parent (recommended). Set custom values only if children should scale differently from the rendered shell size.
  • Content mode — how the scene renders content across screen sizes:
    • Image (visual canvas) (default) — scale everything proportionally with the shell. Best for visual designs.
    • Text (reader) — skip scaling; let HTML / text reflow naturally. Best for long readable content.
    • Text + Image (hybrid) — images positioned visually, text reflows in block flow.
    • Grid (responsive columns) — grid container mode (section / row / column).
  • Z-index — CSS z-index for the stage shell. Default 9999. Lower if you need the stage below sticky headers.
  • Overflow — Visible (layers can extend beyond canvas, default) or Hidden (clip layers at canvas edges).

Background

Section titled “Background”

Visual background of the shell — image, color, backdrop filter.

  • Background image — pick media from the library.
  • Color — RGBA picker.
  • Backdrop filter — CSS backdrop-filter value (e.g. blur(8px) or blur(4px) saturate(1.5)). Adds glass-morphism to whatever’s behind the shell.
  • Image fit — cover / contain / stretch (100% × 100%) / auto (original).
  • Position — center / top / bottom / left / right + four corners.
  • Repeat — no-repeat / repeat / repeat-x / repeat-y.

Frame

Section titled “Frame”

Shape of the shell — corners, drop shadow, padding inside.

  • Border radius — CSS border-radius (e.g. 0, 8px, 50%).
  • Box shadow — full CSS box-shadow value (e.g. 0 4px 24px rgba(0,0,0,0.15) or none).
  • Content padding — top / right / bottom / left in independent inputs. Inner spacing between the shell edge and the layers.

Border

Section titled “Border”

Outer border drawn around the stage shell.

  • Width (px)
  • Style — None / Solid / Dashed / Dotted / Double.
  • Color — RGBA picker.

Close button

Section titled “Close button”

Style of the popup’s X affordance — size, padding, borders, background, and effects flow through a built-in Style Inspector. The values emit CSS variables consumed by .p2lab-stage__close on the storefront.

A live preview is shown next to the inspector so you can see the result without leaving the modal.

Parallax

Section titled “Parallax”

Global parallax multiplier for every layer in the stage.

  • Intensity (0–100) — multiplier on top of each layer’s depth / tilt values. 0 disables parallax stage-wide; 100 applies full strength.

Parallax itself is enabled per layer in the Layer Style modal (Parallax tab). This setting is the global gain.

Slider (slider stages only)

Section titled “Slider (slider stages only)”

Visible only when the stage’s type is slider. Playback configuration:

  • Autoplay — slides advance automatically.
  • Loop slides — wrap to first slide after the last.
  • Transition — Crossfade / Slide horizontal / Flip 3D.
  • Transition duration (ms) — how long the transition runs.
  • Show prev/next arrows
  • Show dots
  • Pause on hover — autoplay halts while cursor is over the slider.
  • Enable touch swipe — left/right swipe gestures on touch devices.
  • Convert to multi-slide — when the editor detects a single-slide stage, offers to upgrade it.

Scene settings (nested scenes)

Section titled “Scene settings (nested scenes)”

When you drill into a scene (Enter scene), the same modal opens but titled Scene settings — <scene name>. Most options belong to that scene: design width / height, content mode (with “Inherit from parent” available), padding, parallax — independent of the root shell’s values.

Persisting

Section titled “Persisting”

Click Save settings at the bottom to confirm. The change goes into the editor’s undo stack as one action. The actual database write happens when you save the whole stage.

Where to go next

Section titled “Where to go next”