Edytor — przegląd

Edytor ma standardowy układ wizualny: centralne płótno otoczone paskami narzędzi i panelami, ze zwijaną osią czasu animacji na dole. Każdy obszar ma jedno zadanie — gdy zorientujesz się co robi który region, reszta dokumentacji idzie sprawniej.

Sześć regionów

┌──────────────────────────────────────────────────────────────┐
│  Toolbar  (rozmiar płótna · podgląd urządzeń · settings · save)│
├────┬───────────────────────────────────────────┬────┬────────┤
│ T  │                                           │ S  │        │
│ o  │                                           │ h  │ Layers │
│ o  │                                           │ o  │   /    │
│ l  │              Płótno                       │ r  │ History│
│    │                                           │ t  │  panel │
│ s  │                                           │ c  │        │
│ t  │                                           │ u  │        │
│ r  │                                           │ t  │        │
│ i  │                                           │    │        │
│ p  │                                           │    │        │
├────┴───────────────────────────────────────────┴────┴────────┤
│  Timeline  (playhead · keyframe'y · presety · markery)       │
└──────────────────────────────────────────────────────────────┘

Toolbar (góra) — rozmiar płótna, podgląd urządzeń (mobile / tablet / desktop), stage settings, save, undo/redo, tutorial, fullscreen.
Lewy pasek narzędzi — buttony dodające warstwy (image, text, button, html, arrow, shape, group, scene, slider timeline, biblioteka komponentów, section/row/column).
Centralne płótno — właściwa scena; kliknij żeby wybrać, przeciągnij żeby przesunąć, ciągnij za uchwyty żeby zmienić rozmiar. Prawy klik wywołuje menu kontekstowe.
Prawy pasek skrótów — kolumna ikon z popout panelami: Layer info, Style, Properties, Character, Paragraph, HTML/CSS, Button, Effects, Image, Arrow, Shape, Scene, Group, Countdown, Coupon.
Prawy szeroki panel — dwie zakładki: Layers (drzewo warstw sceny) i History (Actions / Working copy / Versions).
Dolna oś czasu — zwijana; steruje animacjami keyframe’owymi na każdej warstwie.

Górny pasek edytora. Od lewej do prawej:

Canvas size — projektowy rozmiar shella sceny w pikselach (px).
Device preview — Mobile (375 px) / Tablet (768 px) / Desktop (pełny rozmiar projektowy). Zmienia tylko rozmiar viewport podglądu; nie zmienia zapisanego rozmiaru płótna.
Stage settings (ikona koła zębatego) — otwiera modal Stage settings (Edytor → Stage Settings).
Save — zapisuje aktualny stan.
Take a tour — przewodnik prowadzący po regionach edytora.
Save as template… — robi snapshot sceny do reużywalnego szablonu.
Enter / Exit fullscreen — chowa chrome Shopware, edytor zajmuje całe okno.

Gdy oś czasu jest otwarta, w toolbarze pojawią się też kontrolki Play / Pause / Stop do odtwarzania animacji.

Lewy pasek narzędzi

Pasek z buttonami dodającymi warstwy. Każde kliknięcie dodaje nową warstwę na płótno wycentrowaną w aktualnym viewport:

Image — wybiera media z biblioteki.
Text — edytowalny blok tekstu.
Button — klikalny button z labelem + linkiem.
HTML — surowy blok HTML.
Arrow — strzałka SVG z punktami kontrolnymi.
Shape — prostokąt / elipsa z wypełnieniem solid/linear/radial.
Group — organizacyjny folder (nie renderuje się; tylko strukturyzuje panel).
Scene — kontener, w który można wejść, z własną osią czasu.
Slider timeline — root-only scena zsynchronizowana ze slajdami slidera (sceny slider).
Component library — kompozytowe widgety (countdown, coupon code).
Section / Row / Column — gridowe kontenery do responsywnych layoutów.
Select tool (V) / Hand tool (H) — drag-to-pan vs click-to-select.

Prawy pasek skrótów

Kolumna ikon po prawej. Każda ikona przełącza popout panel skupiony na jednej rzeczy: layer info, position & size, character (typografia), paragraph, HTML/CSS, button config, effects, itd. Pojawiające się ikony zależą od typu wybranej warstwy — warstwy tekstowe pokazują Character / Paragraph, warstwy image pokazują Image, warstwy shape pokazują Shape itd.

Panel Layers / History

Szeroki prawy panel z dwiema zakładkami:

Layers — widok drzewa każdej warstwy sceny. Przeciągnij żeby zmienić kolejność, kliknij ikonę oka żeby przełączyć widoczność, kliknij ikonę kłódki żeby zablokować na klikach z płótna, kliknij dwukrotnie warstwę żeby otworzyć jej modal Layer Style.
History — trzy zakładki:
- Actions — chronologiczny log każdej edycji w sesji (Undo / Redo). Zawiera “Clear history”.
- Working copy — autozapisany draft niezapisanych zmian (zobacz Drafts & revisions).
- Versions — zapisane snapshoty sceny. Każdy można przywrócić.

Oś czasu (dół)

Zwijana oś czasu animacji. Kliknij dowolny track warstwy, żeby dodać keyframe w playhead’zie; przeciągnij keyframe’y żeby je przesunąć; kliknij dwukrotnie żeby edytować; prawy klik na menu keyframe’a (Edit / Copy / Paste / Easing / Duplicate +100ms / Seek / Delete). Zaznacz zakres na tracku żeby wybrać band, potem prawy klik na copy / paste fragment / reverse / time-stretch / delete. Linia z markerami pokazuje trzy opcjonalne markery — Loop, Intro-end, Outro-start — sterujące zachowaniem cyklicznego odtwarzania.

Pełne szczegóły w Edytor → Timeline.

Skróty klawiszowe

V — Select tool
H — Hand tool (drag-to-pan)
Space (przytrzymaj) — tymczasowe Hand tool póki trzymasz
Shift+H — flip wybranej warstwy poziomo
Shift+V — flip wybranej warstwy pionowo
Ctrl/Cmd+Z / Ctrl/Cmd+Shift+Z — undo / redo
Dwuklik na scenę — wejdź do środka
Dwuklik na warstwę w panelu — otwórz modal Layer Style

Gdzie dalej

Canvas — wybieranie, przesuwanie, zmiana rozmiaru, menu kontekstowe.
Layers — każdy typ warstwy i jego właściwości.
Layer Style — modal siedmiu efektów.
Timeline — keyframe’y, presety, operacje na pasmach, markery.
Stage Settings — modal pod kołem zębatym.
Templates — zapis / przeglądanie / aplikowanie.
Drafts & revisions — autozapis, history, snapshoty, retencja.