# Tervezési mód
> A tervezési mód nyolc panelje: réteg, stílus, extra stílus, interakció, parallax, láthatóság, attribútumok és akadálymentesség.
A tervezési módban nyolc beállítópanelen szabályozod a rétegeid megjelenését.
## A módok és a panelek
A jobb oldalsáv tetején három fül van. A tervezési módot az első (ecset és vonalzó ikonos) fül kapcsolja be. Az aktív módot a színpad fölötti címke is mutatja: **Tervezési mód**.
Ha nincs réteg kijelölve, a panelek szürkék, és az oldalsáv tetején a **Nincs kijelölt réteg** felirat áll. Egy réteg kijelölése után a nyolc fül aktívvá válik, és a felirat a réteg nevét mutatja (a képen a **Headline** réteg).
*Kijelölt szövegréteg a tervezési módban, a nyolc panelfüllel és a Réteg panellel* (https://minta-bolt.hu/wp-admin/admin.php?page=revslider&view=editor&module=1&slide=1)
A nyolc panel:
| Panel | Mire való |
| --- | --- |
| **Réteg** | Tartalom, pozíció, méret és az alapvető elrendezési beállítások. |
| **Stílus** | Szöveg, háttér, szegély és térközök. |
| **Extra stílus** | Haladó vizuális beállítások: transzformáció, effektek, árnyékok. |
| **Interakció** | Az egérrel fölé vitel (hover) viselkedése. |
| **Parallax** | Parallax-effektek. |
| **Láthatóság** | Mely eszközméreteken látszik a réteg. |
| **Attribútumok** | Egyéni HTML-attribútumok. |
| **Akadálymentesség** | Rétegszintű ARIA-információk. |
## Réteg panel
A **Réteg** panelen a réteg legfontosabb jellemzőit állítod be: a szöveg- és képtartalmat, a pozíciót, a méretet és az elrendezés alapbeállításait. Több szakaszból áll, ezek egy része csak bizonyos rétegtípusoknál jelenik meg.
| Szakasz | Mikor látszik | Mit állíthatsz benne |
| --- | --- | --- |
| **Szöveg** | Szöveg- vagy betűtípus-ikon rétegnél | A szöveg tartalmát, az igazítást, betűtípus-ikon vagy metacímke beszúrását (**Icon** és **Meta** gomb), a sortörést. |
| Képtartalom | Képrétegnél | A kép forrását, méreteit és igazítását. |
| Hangtartalom | Hangrétegnél | A hangfájl forrását, az előtöltést, a vezérlőket, a hangerőt, a lejátszást és az ismétlést. |
| SVG-tartalom | SVG-alapú ikonrétegnél | Az SVG-fájl forrását. |
| Videótartalom | Videórétegnél | A videó forrását, az előtöltést, a méretezést, az automatikus lejátszást, az ismétlést, az előnézeti képet, a vezérlőket és még sok mást. |
| Konténerstruktúra | Sor- vagy oszloprétegnél | A sorok és oszlopok elrendezését és térközét, és azt az eszközméretet, amelynél egyetlen oszlopba esnek össze. |
| **Pozíció és méret** | Minden rétegnél, kivéve az oszlopot | A vízszintes és függőleges pozíciót, a magasságot és szélességet, az elrendezést és az igazítást. A szövegrétegnél a szélesség és a magasság alapértéke automatikus, a **Min/Max szélesség és magasság** kapcsolóval szélső értékeket is megadhatsz. |
| Tartalom viselkedése | Csoport- vagy oszloprétegnél | A beágyazott gyermekrétegekre vonatkozó igazítást és maszkolást. |
| **Elrendezés viselkedése** | Minden rétegnél | A CSS `position`, `display`, `float` és `clear` tulajdonságokhoz tartozó extra beállításokat, valamint azt, hogy a réteg melyik HTML-címkét használja (például ``, `
`, `
`). |
| Átméretezés eszközök között | Minden rétegnél | Azt, hogy az elrendezési attribútumok és az animációk lépcsőzetesen, az aktív eszközméreteknél váltsanak, vagy folyamatosan igazodjanak a méretek között. |
| Rétegméretek beállítása | Ha nem az **Asztali gép** méret az aktív | Gyorsparancsot ad, amellyel egy másik eszköz elrendezéséből másolhatod át a réteg méretét és pozícióját. |
## Stílus panel
A **Stílus** panel a réteg vizuális megjelenésének alapbeállításait tartalmazza.
*A Stílus panel: betűtípus, méret, szín, háttér, szegély és térközök* (https://minta-bolt.hu/wp-admin/admin.php?page=revslider&view=editor&module=1&slide=1)
A képen a **Szöveg** szakasz látszik (betűtípus, betűméret, sormagasság, betűköz, betűvastagság, HTML-címke, szövegszín, kisbetű és nagybetű beállítások), alatta a **Kiemelések**, a **Háttér**, a **Szegély** és a **Térközök** szakasz.
| Szakasz | Mikor látszik | Mit állíthatsz benne |
| --- | --- | --- |
| **Szöveg** | Szöveg- vagy betűtípus-ikon rétegnél | A betűtípust, a betűméretet, a sormagasságot, a betűközt, a színt és a többi tipográfiai beállítást. |
| SVG-stílus | SVG-alapú ikonrétegnél | Az SVG kitöltő- és körvonalszínét és stílusát. |
| **Háttér** | Mindig | A réteg háttérszínét és háttérképét. Szövegrétegnél a levágást és a szövegkitöltést is. |
| **Szegély** | Mindig | A szegély színét, stílusát, lekerekítését és szélességét. |
| **Térközök** | Mindig | A külső térközt (margó) és a belső térközt (kitöltés). |
## Extra stílus panel
Az **Extra stílus** panelen haladóbb vizuális beállítások vannak.
*Az Extra stílus panel: alap transzformáció és megjelenítés, színeffektus-módok és a kapcsolható effektek* (https://minta-bolt.hu/wp-admin/admin.php?page=revslider&view=editor&module=1&slide=1)
| Szakasz | Mikor látszik | Mit állíthatsz benne |
| --- | --- | --- |
| **Alap transzformáció és megjelenítés** | Mindig | Az alap 3D-s elforgatásokat, az átlátszatlanságot és a háttér elmosását. Az animációk ezekről az értékekről indulnak. Itt van az iOS rendezési mód is, amely az iOS egyes hibáit hárítja el. |
| **Színeffektus-módok** | Mindig | A réteg keverési és szűrési módját. |
| Tartalomtakarás | Kép- vagy videórétegnél | Mintázat ráhelyezését a réteg tetejére. |
| **Dobozárnyék** | Mindig | Egy vagy több téglalap alakú árnyékot. |
| **Szövegárnyék** | Szöveg- vagy betűtípus-ikon rétegnél | Egy vagy több szövegárnyékot. |
| **Szöveg körvonala** | Szöveg- vagy betűtípus-ikon rétegnél | A szöveg körvonalát. |
| Tüskék | Mindig | „Tüske” alakzatokat a réteg külső széleire. |
A panelen a további effektek (például a **Folyékony üvegeffektus**, a **Ragyogás**, a **Fokozatos elmosás** és a **Felületi anyag**) kapcsolóval kapcsolhatók be.
## Interakció panel
Az **Interakció** panel azt szabályozza, hogyan viselkedjen a réteg, amikor fölé viszed az egeret: stílust, szöveget, szűrőt és animációváltozást állíthatsz be.
*Az Interakció panel: kapcsolható szöveg, kurzor és animáció beállításai* (https://minta-bolt.hu/wp-admin/admin.php?page=revslider&view=editor&module=1&slide=1)
| Szakasz | Mikor látszik | Mit állíthatsz benne |
| --- | --- | --- |
| **Kapcsolható szöveg** | Szöveg- vagy betűtípus-ikon rétegnél | A rétegen megjelenő szöveget, amikor fölé viszed az egeret. |
| **Interakció** | Mindig, bekapcsolás után | A kurzor és az animáció reakcióit az egérrel való fölé vitelre. A képen kurzortípusok és kész mozgáselőbeállítások látszanak (például **Nincs**, **Magnet**, **Snap To Cursor**, **Slow Drift**, **Lean In**, **Sideways Only**). |
| Stílus | Ha az egérrel fölé vitel animációja be van kapcsolva | A fölé vitelkor érvényes szöveg-, háttér- és szegélystílust. |
| Szűrők | Ha az egérrel fölé vitel animációja be van kapcsolva | Elmosás, szürkeárnyalat és fényerő hatását fölé vitelkor. |
| Animáció | Ha az egérrel fölé vitel animációja be van kapcsolva | Az egérrel fölé vitelhez tartozó külön animációt, az idővonal használata nélkül. Például egy gomb kicsit megnőhet, ha fölé viszed az egeret. |
A panel alján a **Rámutatás stílusa és transzformációja** és a **Kijelölt állapot** szakasz kapcsolóval kapcsolható be.
## Parallax panel
A **Parallax** panelen parallax-effektet adhatsz a réteghez, de csak akkor, ha a parallax-effektek be vannak kapcsolva a **Beállítások → Görgetés és parallaxis** panelen.
| Szakasz | Mit csinál |
| --- | --- |
| Görgetéskor | Bekapcsolás után a réteghez az oldal görgetésekor érvényesülő parallax-effektet állíthatsz be. |
| Egérmozgatáskor | Bekapcsolás után a réteghez az egér mozgatásakor érvényesülő parallax-effektet állíthatsz be. |
## Láthatóság panel
A **Láthatóság** panelen megadhatod, mely eszközméreteken látszódjon a réteg, látszódjon-e fölé vitelkor, és körhintában mindig látható maradjon-e.
## Attribútumok panel
Az **Attribútumok** panelen egyéni HTML-attribútumokat adhatsz a réteghez. További attribútumokat adhatsz a burkolóhoz és a médiarétegekhez (kép vagy videó) is.
## Akadálymentesség panel
Az **Akadálymentesség** panelen a réteghez tartozó ARIA-információkat állíthatod be. Ez csak akkor érhető el, ha az akadálymentességi beállítások be vannak kapcsolva a **Beállítások → Akadálymentesség** panelen (képernyőolvasó-támogatás).
## A tervezési mód oldalsávja részletesen
A Tervezési mód oldalsávja a jobb oldalsávon a Tervezési mód ikonra kattintva nyílik meg. A szerkesztő tervezési módban indul, ezért egy modul első megnyitásakor az oldalsáv már látszik. Ha animációs módból térsz vissza, az idővonal bezáródik, és a színpad felső sávja is a tervezési módot mutatja. Itt szerkeszted a réteg tartalmát, stílusát, elrendezését és viselkedését, nyolc panelen, amelyeket az oldalsáv tetején lévő füllel kapcsolsz át.
### A szerkesztendő réteg kijelölése
- Az oldalsáv mindig a kijelölt réteg beállításait mutatja. Amíg nincs kijelölve réteg, a fülek le vannak tiltva, az oldalsáv pedig üres.
- Réteget a színpadon rákattintva, vagy a [Rétegek oldalsávon](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-bejaras-retegek-oldalsav/) a bejegyzésére kattintva jelölhetsz ki.
- A dia hátterét úgy szerkesztheted, ha a színpadon egy üres helyre kattintasz, vagy a Rétegek oldalsáv listájának aljáról kijelölöd a **Slide Background** bejegyzést.
- Másik rétegre váltáskor a megnyitott fül marad. Ha a dia hátterét jelölöd ki, miközben olyan fül van nyitva, amelyet a háttér nem támogat, az oldalsáv a **Réteg** fülre vált.
- A szerkesztő a **Réteg** füllel indul. A **Stílus**, **Interakció**, **Láthatóság** és **Akadálymentesség** fül le van tiltva, amíg a dia háttere van kijelölve, mert ezek a panelek arra nem vonatkoznak. A dia hátterénél a **Réteg** panel a háttér tartalomtípusát és színét tartalmazza.
### A panelek tartalma röviden
- **Réteg:** a tartalom, a pozíció és a méret, az elrendezés viselkedése, és az átméretezés eszközök között (lásd: [Réteg panel: tartalom](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-panelek-reteg-tartalom/) és [Réteg panel: pozíció, méret és elrendezés](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-panelek-reteg-pozicio-meret-elrendezes/)).
- **Stílus:** betűtípus, háttér, szegély és térközök (lásd: [Stílus panel](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-panelek-stilus/)).
- **Extra stílus:** háromdimenziós forgatás, átlátszatlanság, keverési és szűrési módok, üveg- és elmosási effektek, árnyékok, körvonalak és a réteg szélére vágott tüskék (lásd: [Extra stílus panel](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-panelek-extra-stilus/)).
- **Interakció:** hogyan reagál a réteg a látogató mutatójára, beleértve a kurzort követő mozgást, valamint az egérrel fölé vitelkor alkalmazott stílust és transzformációkat.
- **Parallax:** a réteg mozgatása az oldal görgetésére és az egér mozgására.
- **Láthatóság:** mely eszközelrendezéseken jelenik meg a réteg, csak a modul fölé vitelekor jelenik-e meg, és a statikus dia rétegeinél mely diatartományra terjed ki.
- **Attribútumok:** a rétegre, a médiájára és a burkoló elemre kerülő HTML-attribútumok.
- **Akadálymentesség:** hogyan kezelik a képernyőolvasók a réteget: elrejtés előlük, szemantikai szerep és ARIA-címkék.