Stage Settings

Kliknij ikonę koła zębatego w toolbarze edytora, żeby otworzyć Stage settings — modal, który kontroluje shell sceny zamiast pojedynczych warstw. Siedem sekcji, każda przełączana z lewej szyny.

Canvas

Sizing i zachowanie renderowania samego shella sceny.

• Width / Height — zewnętrzny rozmiar kontenera popupu. Akceptuje px (np. 800px), % viewport (100%), calc(), vw/vh albo auto.
• Design width (px, optional) / Design height (px, optional) — wewnętrzna pikselowa siatka, której używa scena do pozycji dzieci i keyframe’ów. Zostaw puste, żeby dziedziczyć z rodzica (zalecane). Ustaw wartości tylko jeśli dzieci mają skalować się inaczej niż renderowany rozmiar shella.
• Content mode — jak scena renderuje content w różnych rozmiarach ekranu:
  • Image (visual canvas) (domyślnie) — skaluje wszystko proporcjonalnie do shella. Najlepsze dla projektów wizualnych.
  • Text (reader) — pomija skalowanie; pozwala HTML / tekstowi reflowować naturalnie. Najlepsze dla długiej czytelnej treści.
  • Text + Image (hybrid) — obrazy pozycjonowane wizualnie, tekst reflowuje w block flow.
  • Grid (responsive columns) — tryb kontenera grid (section / row / column).
• Z-index — CSS z-index dla shella sceny. Domyślnie 9999. Obniż, jeśli scena ma być pod sticky headerami.
• Overflow — Visible (warstwy mogą wystawać poza płótno, domyślne) albo Hidden (przycina warstwy przy krawędziach płótna).

Background

Wizualne tło shella — obraz, kolor, backdrop filter.

• Background image — wybierz media z biblioteki.
• Color — picker RGBA.
• Backdrop filter — wartość CSS backdrop-filter (np. blur(8px) albo blur(4px) saturate(1.5)). Dodaje glass-morphism do tego, co jest za shellem.
• Image fit — cover / contain / stretch (100% × 100%) / auto (oryginał).
• Position — center / top / bottom / left / right + cztery rogi.
• Repeat — no-repeat / repeat / repeat-x / repeat-y.

Frame

Kształt shella — narożniki, drop shadow, padding wewnętrzny.

• Border radius — CSS border-radius (np. 0, 8px, 50%).
• Box shadow — pełna wartość CSS box-shadow (np. 0 4px 24px rgba(0,0,0,0.15) albo none).
• Content padding — top / right / bottom / left w niezależnych inputach. Wewnętrzna odległość między krawędzią shella a warstwami.

Border

Zewnętrzna ramka rysowana wokół shella sceny.

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

Close button

Styl przycisku X popupu — rozmiar, padding, ramki, tło i efekty przepływają przez wbudowany Style Inspector. Wartości emitują zmienne CSS konsumowane przez .p2lab-stage__close na storefroncie.

Live preview pokazuje się obok inspectora, więc widać rezultat bez opuszczania modala.

Parallax

Globalny mnożnik parallax dla każdej warstwy w scenie.

• Intensity (0–100) — mnożnik na wartościach depth / tilt każdej warstwy. 0 wyłącza parallax dla całej sceny; 100 stosuje pełną siłę.

Sam parallax włącza się per warstwa w modalu Layer Style (zakładka Parallax). To ustawienie to globalne wzmocnienie.

Slider (tylko sceny slider)

Widoczne tylko gdy typ sceny to slider. Konfiguracja odtwarzania:

• Autoplay — slajdy przesuwają się automatycznie.
• Loop slides — wrap do pierwszego slajdu po ostatnim.
• Transition — Crossfade / Slide horizontal / Flip 3D.
• Transition duration (ms) — jak długo działa przejście.
• Show prev/next arrows
• Show dots
• Pause on hover — autoplay halts gdy kursor jest nad sliderem.
• Enable touch swipe — gesty swipe lewo/prawo na urządzeniach dotykowych.
• Convert to multi-slide — gdy edytor wykryje single-slide scenę, proponuje upgrade.

Scene settings (zagnieżdżone sceny)

Gdy wejdziesz do sceny (Enter scene), otwiera się ten sam modal ale zatytułowany Scene settings — <scene name>. Większość opcji należy do tej sceny: design width / height, content mode (z opcją “Inherit from parent”), padding, parallax — niezależne od wartości root shella.

Zapis

Kliknij Save settings na dole, żeby potwierdzić. Zmiana ląduje na undo stacku edytora jako jedna akcja. Faktyczny zapis do bazy dzieje się gdy zapiszesz całą scenę.

Gdzie dalej

• Layer Style — per-warstwa efekty (w tym depth / tilt parallax, które ta sekcja mnoży).
• Layers → Section / Row / Column — gdy Content mode = Grid.
• Stages → Slider — opcje odtwarzania w kontekście.
• Storefront → Parallax myszy — co intensywność parallax robi na produkcji.