Warstwy

Scena jest zbudowana z warstw. Plugin oferuje czternaście typów warstw, pogrupowanych tu wg celu: warstwy wizualne (to co odwiedzający faktycznie widzi), organizacyjne (struktura tylko w panelu), kontenerowe (rodzice trzymający inne warstwy) i kompozytowe (interaktywne widgety).

Pełna referencja każdego kształtu JSON data znajduje się w Referencja → Typy warstw.

Warstwy wizualne

Warstwy, które renderują się bezpośrednio na płótnie i na storefroncie.

Image (image)

Element media z biblioteki. Dodaj przez Add image layer na lewym pasku narzędzi, potem wybierz plik. Edytowalne w popoutcie Image: źródłowe media, Image fit (Cover / Contain / Fill / None / Scale down), alignment przy max-width / max-height.

Wyjście storefrontu: <img class="p2lab-stage__layer-img" src="…" loading="lazy">.

Text (text)

Plain text. Dodaj przez Add text layer. Dwuklik na płótnie albo w panelu otwiera modal edycji tekstu. Popouty Character i Paragraph pokrywają typografię (font family, rozmiar, weight, kolor, letter spacing, line height, alignment, padding).

Button (button)

Klikalny CTA. Popout Button wystawia label, kolor tła, kolor tekstu, border radius i akcję kliknięcia z trzema trybami: Open URL (z target = same window albo new tab), Close popup (zamknij popup) albo Don’t show again (zamknij + permanent dismiss).

Wyjście storefrontu: <a class="p2lab-stage__layer">.

HTML (html)

Surowy blok HTML. Popout HTML / CSS edytuje sanitizowany markup. Stosuj do wszystkiego, czego strukturalne warstwy nie wyrażą — osadzony filmik, custom formy, third-party skrypty.

Wyjście storefrontu: <div>{{ htmlContent|sw_sanitize }}</div>. Sanityzacja server-side wycina niebezpieczne tagi / atrybuty.

Arrow (arrow)

SVG strzałka z punktami kontrolnymi start, end i curve wyrażonymi jako procenty pudełka warstwy. Popout Arrow ustawia kolor, grubość linii, styl linii (Solid / Dashed / Dotted), styl głowicy (Triangle / Open / Diamond / None), rozmiar głowicy i cztery punkty kontrolne (Start X/Y, End X/Y, Curve X/Y).

Shape (shape)

Wektorowy prymityw: prostokąt, elipsa albo wielokąt. Popout Shape ustawia typ kształtu, wypełnienie (Solid color / Linear gradient / Radial gradient z modalem edytora gradientu), border radius. Przydatne na tła, gradientowe overlay’e, kształty dekoracyjne, drop-shadow puddle’y.

Warstwa organizacyjna

Group (group)

Folder w panelu Layers. Trzyma inne warstwy; nic nie renderuje na płótnie / storefroncie. Stosuj do utrzymania porządku w panelu na złożonych scenach — pre-launch cans, intro, outro, navigation chrome, itd. Edytowalne: nazwa grupy, flaga collapsed-by-default.

Konwertuj grupę na scenę albo odwrotnie przez menu kontekstowe (Switch type to scene / Switch type to group). Wrapowanie też jest jednym klikiem (Wrap in group).

Warstwy kontenerowe

Kontenery trzymają dzieci i dodają własne zachowanie renderowania.

Scene (scene)

Kontener, w który można wejść, z własną niezależną osią czasu i loopem. Dzieci żyją w przestrzeni współrzędnych sceny; ich keyframe’y działają na zegarze sceny — nie na zegarze root sceny. Używaj scen do:

• Samowystarczalnej sub-animacji (odsłonięcie logo loopujące niezależnie od reszty sceny).
• Reużywalnego bloku, który ma zachować tę samą wewnętrzną animację na wielu slajdach.
• Samych slajdów — każdy slajd sceny typu slider to scena.

Edytowalne: nazwa sceny, projektowa szerokość / wysokość, overflow (Visible / Hidden / Auto / Scroll, linkowalne X+Y), loop on/off, loop start (ms), padding. Dwuklik na płótnie wchodzi do sceny (zoom w jej wewnętrzną przestrzeń współrzędnych).

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

Prymitywy layoutu gridowego — Flexbox pod spodem. Używane razem do budowania responsywnych layoutów, które reflowują na wąskich viewportach.

• Section — flex column w root grida. Trzyma rowy. Konfigurowalne: max-width, padding, gap, kolor tła, vertical alignment.
• Row — flex row wewnątrz sekcji. Trzyma kolumny. Wrapuje gdy mobilne szerokości kolumn przekroczą 100%. Konfigurowalne: gap, alignItems, justifyContent, mobile gap.
• Column — flex item wewnątrz row. Rozmiar przez flex-basis = desktopWidth (np. 50%). Na viewportach < 640 px, flex-basis = mobileWidth (domyślnie 100% — auto-stack). Konfigurowalne: desktop width, mobile width, padding, alignItems, justifyContent, kolor tła.

Section / row / column można zagnieżdżać — kolumna może zawierać kolejną sekcję dla rekursywnych gridów. Dodaj z lewego paska narzędzi (Add section / Add row / Add column) albo z menu kontekstowego row (Add row before / after / Add column before / after).

Zachowanie animacji: opacity nie jest stosowane do kontenerów gridowych (są flex layout boxami, nie content). Edytuj opacity na warstwach treści wewnątrz.

Slider timeline (slider-timeline)

Root-only scena, której oś czasu jest auto-aligned do slajdów sceny slider. Długość auto-obliczana jako suma wszystkich slide durations + offsetów. Segmenty odpowiadają granicom slajdów. Silnik storefrontu pauzuje przy każdym segmencie; plugin slidera wznawia przy zmianie slajdu. Stosuj do sterowania elementami, które mają tranzycjonować zsynchronizowane ze zmianą slajdu (global cans, headery, footery).

Dostępne tylko na scenach typu slider.

Warstwy kompozytowe

Interaktywne widgety renderujące wyspecjalizowany markup.

Countdown (countdown)

Live-tickujący countdown do docelowej daty. Popout Countdown konfiguruje:

• Target date and time — do kiedy countdown odlicza.
• Units to show — wybierz z Years / Months / Days / Hours / Minutes / Seconds (kolejność w pickerze = kolejność renderowania od lewej do prawej).
• Unit labels — wyświetlana etykieta każdej jednostki.
• When expired — Hide / Show zeros / Show a message (z tekstem Expired message).
• Kolory — tekst, ramka, tło.
• Styl ramki + grubość — Solid / Dashed / Dotted / Double / None.

Storefront JS aktualizuje DOM co 1 s; płótno admina pokazuje statyczny placeholder.

Coupon (coupon)

Kod kuponowy w stylizowanym kontenerze, opcjonalnie copy-to-clipboard po kliknięciu. Popout Coupon konfiguruje:

• Coupon code — string kodu.
• Copy to clipboard on click — podłącza handler kliknięcia.
• Show clipboard icon — mała ikona jako wizualna podpowiedź (niezależna od zachowania kliknięcia).
• Confirmation message — flashuje po skopiowaniu.
• Kolory i ramki — ten sam zestaw co countdown.

Przełączniki oka i kłódki

Każda warstwa w panelu ma dwie przełączalne ikony:

• Oko — hide / show. Ukryte warstwy nie renderują się na płótnie ani na storefroncie, ale zostają w drzewie.
• Kłódka — lock / unlock. Zablokowanych warstw nie da się wybrać na płótnie; trzeba kliknąć warstwę w panelu.

Oba stany są zapisywane razem ze sceną.

Zmiana kolejności

Przeciągnij warstwę w górę albo w dół w panelu Layers żeby zmienić z-order. Przeciągnij na row grupy albo sceny żeby przenieść warstwę do środka. Prawy klik → Move up / Move down / Move out of group to alternatywy bez klawiatury.

Widoczny z-order na płótnie idzie od dołu do góry: warstwa na dole panelu renderuje się za wszystkim; góra panelu to pierwszy plan.

Gdzie dalej

• Layer Style — efekty per warstwa (parallax / drop shadow / stroke / background / transform / filter / click action).
• Timeline — animacje keyframe’owe na każdej warstwie.
• Referencja → Typy warstw — single-page tabela każdego typu z JSONem data.