# A színpad

> A szerkesztő központi munkaterülete: átméretezés, rétegek kijelölése, rétegeszköztár és helyi menü.

A színpad a modulszerkesztő központi munkaterülete, ahol vizuálisan megtervezed és elrendezed a tartalmat.

Hat dolgot érdemes ismerned rajta:

1. a színpadterület,
2. az átméretező fogantyúk,
3. a színpad tartalma,
4. a színpad felső sávja,
5. a rétegeszköztár,
6. a helyi menü.

## A színpadterület

A képernyő közepén áll a színpadterület. Itt látod a modult olyan méretben, amelyet a [felső sáv](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-bejaras-felso-sav/) színpadméret-kijelzője mutat.

## A színpad átméretező fogantyúi

Ha eszközméretet váltasz, a színpad először a hozzá tartozó tartalomfolyam-tároló méretére áll. Az átméretező fogantyúkkal viszont megnézheted, hogyan néz ki az elrendezés két eszközméret között is.

Példa: az **Asztali gép** és a **Mobil** méret aktív, szélességük `1240px`, illetve `480px`, de azt is látni szeretnéd, mi történik `800px` szélességnél. Fogd meg a színpad bal vagy jobb oldali fogantyúját, és húzd addig, amíg az elrendezés `800px` széles nem lesz.

Átméretezés közben a magasság és a szélesség a felső sáv színpadméret-kijelzőjén látszik. A méretet úgy is megnézheted, ha az egeret a háttérréteg fölé viszed: a bal felső sarokban a magasság, a jobb felső sarokban a szélesség jelenik meg.

Az ilyen átméretezés **nem** módosítja a tartalomfolyam-tárolók méretdefinícióit. Azokat a **Beállítások → Modulbeállítások** panel **Tartalomfolyam** fülén, a **Tartalomfolyam-tároló** szakaszban változtathatod.

## A színpad tartalma

A színpadterületen a színpad tartalma áll: a háttérréteg, a hozzáadott rétegek és az esetleges statikus dia rétegei.

A réteg kijelöléséhez kattints rá. A kijelölt réteget kék keret veszi körül, a bal felső sarka fölött pedig megjelenik a rétegeszköztár.

![Kijelölt réteg a színpadon: kék keret és a fölötte megjelenő rétegeszköztár](./kepek/szerkeszto-bejaras-reteg-kijelolve.webp)

*Kijelölt réteg a színpadon: kék keret és a fölötte megjelenő rétegeszköztár* (https://minta-bolt.hu/wp-admin/admin.php?page=revslider&view=editor&module=1&slide=1)

Ha másik réteget jelölsz ki, a kék keret és a rétegeszköztár odébb költözik. Ha a kijelölt réteg gyermekréteg, a szülőréteg kerete is látszik. A képen a **Headline** réteg van kijelölve, a szülője a **Group**.

## A színpad felső sávja

A színpad fölött egy címke mutatja az éppen aktív szerkesztési módot. A képeken ez **Tervezési mód**, **Animációs mód** vagy **Műveleti mód**. A módok közötti váltás az oldalsávon történik, a feliratot a szerkesztő magától átírja.

A módokról külön fejezetek szólnak: [Tervezési mód](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-bejaras-tervezesi-mod/), [Animációs mód](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-bejaras-animacios-mod/) és [Műveleti mód](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-bejaras-akciomod/).

## A rétegeszköztár

Tervezési módban, ha kijelölsz egy réteget, a bal felső sarka fölött megjelenik a rétegeszköztár. Gyors szerkesztőeszközöket tartalmaz, például igazítást, kettőzést, törlést és szövegszerkesztést.

Az eszközök a réteg típusától függnek. A fenti képen egy szövegréteg eszköztára látszik. Egy csoportréteg (Group) eszköztára más gombokat tartalmaz.

## A helyi menü

Tervezési módban, ha a kijelölt rétegre jobb gombbal kattintasz, helyi menü nyílik. Ez további szerkesztőeszközöket ad, a kijelölt réteg típusától függően.

## Nagyítás és görgetés

- **Nagyítás:** tartsd lenyomva a `CTRL` billentyűt (Macen a `⌘`-t), és görgess az egérrel. A nagyítás a kurzor helyére középpontos, a nagyítás mértéke rövid ideig látszik a színpadterület tetején. Ha a nagyított színpad kilóg a látható területből, görgetősávok jelennek meg.
- **Mozgatás:** tartsd lenyomva a `SZÓKÖZ` billentyűt, és húzd a színpadot.

## Rétegek kijelölése

- Egy réteg kijelöléséhez kattints rá. A kijelölt réteget kék keret veszi körül.
- Ha a réteg egy tárolóban (csoportban, sorban vagy oszlopban) van, a kattintás közvetlenül a beágyazott réteget jelöli ki, és a szülő tároló kerete is látszik.
- Ha a kijelölt vagy fölé vitt réteg relatív pozíciójú, a margóit rózsaszín, a belső térközét kék szín jelzi a színpadon.
- Több réteg kijelöléséhez tartsd lenyomva a `SHIFT` billentyűt, és kattints egymás után a rétegekre. A közös kijelölést keret veszi körül, a rétegútvonal a „több elem kijelölve” feliratot mutatja, és a rétegeszköztár helyett az igazítóeszköztár jelenik meg.
- Üres helyre kattintva a dia hátterét jelölöd ki. Az `ESC` megszünteti a kijelölést.
- Ha egy réteget nehéz eltalálni, jelöld ki a [Rétegek oldalsávon](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-bejaras-retegek-oldalsav/) vagy az [idővonalon](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-bejaras-idovonal/).

## Rétegek mozgatása

- Az abszolút pozíciójú réteget húzással szabadon mozgathatod. Húzás helyett a nyílbillentyűk 1 képponttal, a `SHIFT` + nyílbillentyűk 10 képponttal mozgatják a kijelölt réteget.
- A relatív pozíciójú réteg a testvérrétegekkel együtt a tartalomfolyamban áll, ezért húzáskor a folyamban egy másik helyre kerül. Ha oszlop vagy csoport fölé húzod, a réteg abba kerül bele. A `SHIFT` lenyomva tartásával a tároló mellé teheted be, nem bele.

## Igazítási segédvonalak és illesztés

Húzáskor segédvonalak jelennek meg, amint a réteg széle közelít egy igazítási célhoz: a színpad közepéhez vagy a többi réteg széléhez, középvonalához. Ha az illesztés be van kapcsolva, a réteg a közelítéskor pontosan a célhoz ugrik. Ezeket a **Globális beállítások** szerkesztő füle állítja, az **Editor viselkedése** szakaszban (lásd: [Globális beállítások](https://hub.hellowp.io/hu/plugins/revslider/globalis-beallitasok/)): a segédvonalak be- és kikapcsolása, az igazítási küszöb, az illesztés be- és kikapcsolása és az illesztési küszöb.

## Rétegek átméretezése

A kijelölt réteg keretén lévő fogantyúkkal méretezheted át a réteget. A `SHIFT` lenyomva tartásával az arányos átméretezést kapcsolod be vagy ki. Szöveg- és gombrétegen a fogantyúra duplán kattintva a réteg mérete **auto** lesz, vagyis a tartalmához igazodik.

## Sor és oszlop hozzáadása

Ha egy sor (Row) vagy annak egy oszlopa (Column) van kijelölve, két kerek kék gomb jelenik meg a színpadon. A sor alatti gomb új sort, a sor jobb szélén lévő gomb új oszlopot ad hozzá.

## A rétegeszköztár gombjai

A rétegeszköztár akkor jelenik meg, ha Tervezési módban egyetlen réteget jelölsz ki. A kijelölt réteg bal felső sarka fölött áll, vagy alatta, ha fölötte nincs hely. A dia hátterénél nem jelenik meg. Egyes gombok fölé víve kis legördülő panel nyílik a rokon lehetőségekkel.

| Gomb | Mikor látszik | Mit csinál |
| --- | --- | --- |
| Rétegek csoportosítása | Ha a réteg nem csoport, sor vagy oszlop | Új csoportot (Group) hoz létre, amely a kijelölt réteget tartalmazza. |
| Elem hozzáadása | Csoport, sor vagy oszlop kijelölésekor | Megnyitja a [Hozzáadás oldalsávot](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-bejaras-hozzaadas-oldalsav/), hogy a tárolóba új réteget tehess. |
| Réteg beszúrása | Relatív pozíciójú rétegnél | Új réteget ad a tartalomfolyamban a kijelölt elé vagy mögé. |
| Kép forrása | Kép- és alakzatrétegnél | Cseréli a megjelenített képet: WordPress-médiatár, SR-könyvtár (az elemkönyvtár) vagy AI-képgenerálás. |
| Kép szerkesztése | Képrétegnél | Megnyitja a képszerkesztő ablakot (kompozíció, fények, színek, effektek, görbék, szűrők, elmosás, előbeállítások). |
| Videó forrása | Videórétegnél | Videó cseréje a WordPress-médiatárból vagy az SR-könyvtárból. |
| SVG forrása | SVG-ikon rétegnél | SVG cseréje a WordPress-médiatárból vagy az SR-könyvtárból. |
| Hang forrása | Hangrétegnél | A WordPress hangfájl-választóját nyitja meg. |
| Szövegréteg szerkesztése | Szövegrétegnél | Megnyitja a réteg szövegbeállításait a jobb oldalsávon. |
| Szövegigazítás | Szöveg-, csoport- és oszlopréteg | Balra, középre vagy jobbra igazítja a szöveget a rétegen belül. |
| Pozíció | Csoportban vagy oszlopban lévő rétegnél | **REL** (relatív) vagy **ABS** (abszolút) pozícionálás. |
| Megjelenítés | Relatív pozíciójú rétegnél | **Blokk** vagy **Soron belüli blokk** viselkedés a tartalomfolyamban. |
| Sortörés utána | Relatív pozíciójú, soron belüli blokk szövegrétegnél | Bekapcsolva a soron belüli blokk testvérrétegek a következő sorba kerülnek. |
| Réteg igazítása | Abszolút pozíciójú rétegnél | 3×3-as rács: a réteget a szülő tároló valamelyik sarkához, széléhez vagy közepéhez igazítja. |
| X és Y pozíció | Abszolút pozíciójú rétegnél | Kiírja a koordinátákat, kattintásra pontos képpontértékeket gépelhetsz be. |
| 3D forgatás | Sor és oszlop kivételével minden rétegnél | Bekapcsolva az X, Y és Z forgatási fogantyúk jelennek meg, mellettük a szögek és egy visszaállító gomb (mind a három szög `0` lesz). A szabad forgatáshoz a színpadon bárhol húzhatsz. |
| Kettőzés és törlés | Mindig | Réteg kettőzése, illetve törlése. |
| Oszlopszélesség | Oszlopnál | A sor szélességének törtrészeként (például `1/2`) mutatja az oszlop szélességét, átírható. |
| Oszlop mozgatása balra, jobbra | Oszlopnál | Eggyel odébb teszi az oszlopot a soron belül. |
| Tartalom igazítása | Oszlopnál | A gyermekrétegek függőleges igazítása: fent, középen vagy lent. |
| Sorzóna | Sornál | A sort a dia három sorzónája (felső, középső, alsó sorok) között mozgatja. |

A **Megjelenítés** két értéke:

- **Blokk**: a réteg bekezdésként viselkedik, a saját szélességétől függetlenül a teljes szabad szélességet elfoglalja, igazítását a szülő réteg nem szabályozhatja.
- **Soron belüli blokk**: a réteg szövegsorként viselkedik, csak a szükséges szélességet foglalja el, így mellette testvérrétegek is elférnek, és igazítását a szülő szabályozhatja.

A **Pozíció** két értéke:

- **REL**: a réteg és a többi relatív pozíciójú testvére úgy rendeződik, hogy ne fedjék egymást.
- **ABS**: a réteget pontos X és Y koordináták helyezik el.

## Az igazítóeszköztár

Ha több réteget jelölsz ki (`SHIFT` + kattintás), a rétegeszköztár helyett az igazítóeszköztár jelenik meg. Az igazítás a kijelölés egészéhez viszonyít: a „balra igazítás” például a kijelölt rétegek bal szélét a kijelölés legbaloldalibb széléhez igazítja.

| Gomb | Mit csinál |
| --- | --- |
| Balra, középre, jobbra igazítás | A bal szélet, a vízszintes középvonalat, illetve a jobb szélet egyenlővé teszi. |
| Felülre, középre, alulra igazítás | A felső szélet, a függőleges középvonalat, illetve az alsó szélet egyenlővé teszi. |
| Elosztás vízszintesen, függőlegesen | A rétegeket egyenletesen osztja el a megfelelő tengely mentén. |
| Elrendezés sorként | A rétegeket egyetlen vízszintes sorba rendezi. |
| Elrendezés oszlopként | A rétegeket egyetlen függőleges oszlopba rendezi. |
| Elrendezés rácsként | A rétegeket sorokból és oszlopokból álló rácsba rendezi. |
| Indítás egy időben | Az idővonalon az összes kijelölt réteg animációját a legkorábbi kezdési időpontra állítja. Mindegyik réteg megtartja a saját időtartamát, az animáció nélküli réteg marad. Ez nem a helyzetet, hanem az időzítést módosítja, ezért külön blokkban áll. |
| Rétegek csoportosítása | Új csoportot hoz létre az összes kijelölt rétegből. |

## A helyi menü

Tervezési módban jobb gombbal kattintva egy rétegre helyi menü nyílik. A jobb kattintás ki is jelöli a kurzor alatti réteget, üres helyen a dia hátterét. A menü minden rétegtípusnál ugyanazokat a pontokat mutatja. Egyetlen kivétel van: képrétegnél a **Szerkesztés** lenyíló lista tetején három további pont áll a kép cseréjéhez és szerkesztéséhez (WordPress-médiatár, Slider Revolution elemek, képszerkesztő).

![A helyi menü: Szerkesztés, Másolás, Beillesztés, Duplikálás, Törlés, Mutatás/elrejtés, Zárolás/feloldás és Menü kikapcsolása](./kepek/szerkeszto-panelek-helyi-menu.webp)

*A helyi menü: Szerkesztés, Másolás, Beillesztés, Duplikálás, Törlés, Mutatás/elrejtés, Zárolás/feloldás és Menü kikapcsolása* (https://minta-bolt.hu/wp-admin/admin.php?page=revslider&view=editor&module=1&slide=1)

A képen a rétegeszköztár és a jobb kattintásra nyíló helyi menü látszik.

- **Szerkesztés**: a réteg beállítópaneljeit nyitja meg a jobb oldalsávon: Réteg, Stílus, Extra stílus, Interakció, Láthatóság, Animáció, Parallaxis és Műveletek.
- **Másolás**: a teljes réteg (a kijelölt rétegek) vagy a réteg egyes részei másolhatók, hogy máshol felhasználd őket: háttér, stílus (a háttérrel együtt), extra stílus, interakció, méret, pozíció, láthatóság, animációs kockák, animáció és jelenetek együtt, parallaxis.
- **Beillesztés**: a korábban másolt réteget a kijelölt elé vagy mögé illeszti.
- **Duplikálás**: lemásolja a kijelölt réteget.
- **Törlés**: eltávolítja a kijelölt réteget a diáról.
- **Mutatás/elrejtés**: elrejti a réteget a színpadon, vagy újra megmutatja.
- **Zárolás/feloldás**: a zárolt réteg nem jelölhető ki és nem mozgatható a színpadon.
- **Menü kikapcsolása**: kikapcsolja a helyi menüt, így a jobb kattintás nem nyitja meg.

## Billentyű- és egérparancsok

A teljes lista a szerkesztőben a **Beállítások** gomb → **Billentyűparancsok** → **Színpad** fülön is megnézhető.

| Parancs | Hatás |
| --- | --- |
| `SZÓKÖZ` + húzás | A színpad mozgatása. |
| `CTRL/⌘` + egérgörgő | Nagyítás a kurzor felé. |
| Nyílbillentyűk | A kijelölt réteg(ek) mozgatása 1 képponttal. |
| `SHIFT` + nyílbillentyűk | Mozgatás 10 képponttal. |
| `DEL` | A kijelölt réteg törlése. |
| `ESC` | Kijelölés megszüntetése. |
| `SHIFT` + átméretezés | Arányos átméretezés be- és kikapcsolása. |
| `SHIFT` + húzás | A relatív pozíciójú réteg oszlop vagy csoport mellé kerül, nem bele. |
| Duplakattintás a szöveg- vagy gombréteg fogantyúján | A méret **auto** lesz. |