# Navigációs vezérlők panelei

> A nyilak, felsorolásjelek, fülek, bélyegképek és a csúszka stílusa, elrendezése, viselkedése és stíluszerkesztője.

Az öt navigációs vezérlő, a nyilak, a felsorolásjelek, a fülek, a bélyegképek és a csúszka mindegyike külön panelt kap a Beállítások oldalsávban. A nyilak egyszerre egy diát léptetnek, a felsorolásjelek és a fülek a kiválasztott diára ugranak, a bélyegképek ugyanezt teszik a dia képével, a csúszka pedig egy húzható fogantyú, amellyel a látogató végigpörgeti a diákat.

## A panelek megnyitása

1. Nyisd meg a modult a szerkesztőben, és kattints a felső sáv **Beállítások** gombjára.
2. Válaszd a **Navigáció** pontot, és az **Elérhető vezérlők** alatt kapcsold be a modulhoz szükséges vezérlőket.
3. Minden bekapcsolt vezérlőhöz új pont jelenik meg az oldalsáv listájában. Kattints a nevére a panel megnyitásához.

![A Navigáció panel bekapcsolt Nyilak vezérlővel](./kepek/szerkeszto-panelek-2-navigacio-nyilak-be.webp)

*A Navigáció panel bekapcsolt Nyilak vezérlővel* (https://minta-bolt.hu/wp-admin/admin.php?page=revslider&view=editor&module=1&slide=1)

A képen a **Nyilak** kapcsoló be van kapcsolva, és a **Navigáció** alatt megjelent a **Nyilak** pont.

![A Nyilak panel Stílus és megjelenés füle](./kepek/szerkeszto-panelek-2-nyilak-panel.webp)

*A Nyilak panel Stílus és megjelenés füle* (https://minta-bolt.hu/wp-admin/admin.php?page=revslider&view=editor&module=1&slide=1)

A képen a nyilak kinézetei (Hebe, Hephaistos, Hermes, Hesperiden, Metis, Nyx, Persephone, Skia) és a kiválasztott kinézethez tartozó beállítások látszanak.

Az öt panel felépítése azonos, ezért ez a fejezet fülenként halad. A **Stílus és megjelenés**, a **Viselkedés** és a **Stíluszerkesztő** fül mindegyik panelen ugyanazokat a beállításokat adja, az **Elrendezés** viszont vezérlőnként különbözik, ezért ott mindegyik saját részt kap. A **Vezérlők** fül csak a csúszkánál van meg.

## Stílus és megjelenés fül

A csúszka panelén ennek a fülnek a neve más (stílusbőr). Itt választod ki a kinézetet, és állítod a kinézet által megengedett színeket, méreteket és ikonokat.

### Kinézetek és előbeállítások

- **Kinézet**: a kinézeteket élő csempék mutatják, amilyennek a vezérlő majd megjelenik. A csempék három oldalon vannak, a pontokkal lapozhatsz közöttük. Minden vezérlőtípushoz saját beépített kinézetek tartoznak, és az **Előbeállítás mentése** csempével mentett előbeállításaid is bekerülnek a rácsba. A csempe kiválasztása a vezérlő teljes megjelenését lecseréli, és a **Beállítások** szakasz mezői a kinézet saját mezőire változnak.
- **Előbeállítás mentése**: a vezérlő aktuális kinézetét és beállításait előbeállításként menti, hogy ugyanazt a megjelenést egy kattintással egy másik modulra is ráteheted. Az előbeállítás csempeként megjelenik a rácsban, minden oldalon.
- Csúszka lapozása elengedéskor (csak a csúszka panelén): bekapcsolva a dia a fogantyú elengedésekor vált, kikapcsolva már húzás közben.

### Beállítások

A szakasz mezői a választott kinézettől függnek. Három fajtájuk van:

- **Ikonok** (csak a nyilaknál és a csúszkánál): a bal és jobb nyíl, illetve a csúszka fogantyúján lévő nyilak ikonja egy listából. Hogy mely ikonok választhatók, és hogy a mező egyáltalán megvan-e, a kinézettől függ.
- **Színek**: minden színhez egy színminta tartozik, a kinézet adott részéről elnevezve, például háttérszín, szegély, nyíl vagy az egér fölé vitt állapot színe. Rákattintva megnyílik a színválasztó. Hogy mely minták vannak, a kinézettől függ; a Hesperiden nyílkinézetnél például a háttér-, a nyíl- és a hover-háttérszín.
- **Méretek**: minden mérethez egy számmező tartozik képpontban, például háttér-, nyíl-, jelölő- vagy betűméret. A mezők a kinézettől függenek.
- **Betűtípus** (csak a füleknél): a fülek szövegének betűtípusa, ugyanabból a listából, mint a [Stílus panelen](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-panelek-stilus/). Csak a szöveget rajzoló kinézeteknél van meg.

A nyilak kinézetének mezői a helyi felületen jelenleg angol feliratot viselnek (például Left Icon, BG Color, Arrow Size).

## Elrendezés fül

Itt azt adod meg, hol áll a vezérlő a modulon, és mennyi helyet foglal el. Ez az a fül, ahol az öt panel a legjobban eltér.

Több közös beállítás neve és jelentése:

- **Elhelyezés**: mihez képest áll a vezérlő. A tartalomfolyam a modul tartalmi területéhez igazodik (és vele mozog, ha a modul keskenyebb a képernyőnél), a teljes munkaterület a teljes színpadhoz, szélről szélre.
- **Igazítás**: a 3×3-as rács kilenc pozíciója közül azt adja meg, hová horgonyozzon a vezérlő; az X és Y ettől a ponttól tolja el. Az X és Y mező értéke a mezőn balra-jobbra húzással is állítható, -1000 és 10000 képpont között.
- **Tájolás**: a vezérlő elemei sorban (vízszintes) vagy oszlopban (függőleges) állnak.
- **Határ** (fülek, bélyegképek, csúszka): belső esetén a vezérlő rálóg a diára; külső esetén a dián kívül áll, és a dia összehúzódik, hogy legyen neki hely.
- **Látható darabszám**: egyszerre hány elem látszik, 1 és 100 között. Ha a modulnak több diája van, az elemek görgetve mutatják az aktuálisat.
- **Térköz**: az elemek közti hely képpontban; a mezőn húzással is állítható.

### Nyilak

A bal és a jobb nyíl külön szakaszban, azonos négy beállítással (elhelyezés, igazítás, X, Y) pozicionálható.

### Felsorolásjelek

A **Pozíció** szakasz elhelyezéssel, tájolással, igazítással, X és Y mezővel helyezi el a pontsort, a **Felsorolásjelek** szakasz térköz mezője a pontok közti távolságot adja. Az egyes pontok méretét nem itt, hanem a kinézet méret mezői adják a Stílus és megjelenés fülön.

### Fülek és bélyegképek

Mindkét panelnek négy szakasza van, azonos beállításokkal:

- A fülek / bélyegképek szakasz: látható darabszám és térköz.
- **Pozíció**: határ, tájolás, elhelyezés, igazítás, X és Y.
- **Méret**: a méretezés módja. Régi mód: minden elem egy minimális szélesség, egy maximális szélesség és egy maximális magasság között skálázódik a modullal. Egyedi többszintű mód: minden elem fix szélességet és magasságot kap, amelyet az eszközválasztóval eszközönként állíthatsz. A régi mód mezői (min. szélesség, max. szélesség, max. magasság) és az egyedi mód mezői (szélesség, magasság) csak a megfelelő módban látszanak.
- **Burkoló**: a vezérlőket tartó sáv háttérszíne, a széles burkoló kapcsolója (a sáv a modul teljes szélességét vagy magasságát kitölti, vagy csak annyi, amennyit az elemei kitesznek), a belső margó (0 és 500 képpont között), valamint az X és Y eltolás, amely a pozíció beállításai által megadott helyről tolja el a sávot. A margó és az eltolások eszközönként állíthatók.

### Csúszka

Az elrendezés három szakaszból áll: az elemek (látható darabszám és térköz), a pozíció (határ, tájolás, elhelyezés, igazítás, X, Y) és a méret (az egyes elemek szélessége és magassága eszközönként). A fogantyút, a sávot és a burkolót a **Vezérlők** fül állítja.

## Vezérlők fül (csak a csúszkánál)

Itt a fogantyú viselkedését és megjelenését, a haladásjelzést és a sáv, valamint a burkoló kinézetét állítod.

- **Fogantyúnyilak**: a fogantyú két oldalán lévő nyilak animációja. A szakasz kapcsolójával megjelenítheted vagy elrejtheted őket. Beállítások: halványítás (a nyilak elhalványulnak a fogantyú mozgásakor), méretezés (nőnek és zsugorodnak), forgatás (elfordulnak), eltolás (milyen messzire csúsznak kifelé, képpontban).
- **Fogantyú beállításai**: bélyegkép (a fogantyú az aktuális dia bélyegképét mutatja), nagyítás egér fölött, dőlés (fokban, -100 és 100 között), a bélyegkép eltolása a fogantyún belül (a fogantyú méretének százalékában, 0 és 500 között), a bélyegkép nagyítása (100 és 1000 százalék között) és a fogantyú nagyítása (100 és 1000 százalék között).
- **Haladás megjelenítése**: a dia lejátszási előrehaladását rajzolja a csúszkára, a szakasz kapcsolójával be- és kikapcsolható. A haladás igazítása megadja, honnan rajzolódik: balról, középről vagy jobbról.
- **Burkoló**: a sáv mintázata (nincs, pontok, függőleges vonalak vagy vízszintes vonalak), a tétlen sáv mérete (a teljes méret százaléka, 10 és 100 között; ennyi látszik, amikor a csúszka nyugalomban van), a háttérszín, a kiterjesztés (a burkoló a modul teljes szélességét vagy magasságát kitölti-e), a belső margó, a minimális méret (milyen kicsire zsugorodhat a csúszka keskeny képernyőn, a teljes méret százalékában) és az X és Y eltolás.

## Viselkedés fül

Itt azt állítod be, mikor jelenik meg a vezérlő, hogyan animálódik be és ki, mely eszközökön látszik, és marad-e folyamatosan a képernyőn.

### Be- és kilépő animáció

| Beállítás | Mit csinál |
| --- | --- |
| Bal és jobb nyíl animációja | Csak a nyilaknál: a nyíl megjelenésének és eltűnésének animációja. |
| Be- és kilépő animáció | A felsorolásjeleknél, füleknél, bélyegképeknél és a csúszkánál: a vezérlő megjelenésének és eltűnésének animációja. |
| Animáció sebessége | Mennyi ideig tart a be- és kilépő animáció, 0 és 10000 ezredmásodperc között. A 0 azonnal megjeleníti a vezérlőt. |
| Dia kattintásonként | Csak a nyilaknál, és csak körhinta elrendezésnél: egy nyílkattintás hány diát lép (1 és 50 között), így egy nyíl a körhinta egész sorát lapozhatja. |
| Megjelenítés késleltetése | Mennyit vár a vezérlő az egér megmozdulása után, mielőtt megjelenik, 0 és 10000 ezredmásodperc között, eszközönként állítható. |
| Megjelenítés ezeken | Mely eszközökön látszik a vezérlő. Az eszközre kattintva adhatod hozzá vagy veheted el; a nem szereplő eszközökön a vezérlő rejtve van. Választható: széles képernyő, asztali gép, notebook, tablet, mobil. |

Az animáció választható értékei: halványítás, balról, jobbról, felülről vagy alulról csúszás, kicsinyítés és nagyítás.

### Láthatóan tartás

A szakasz kapcsolójával a vezérlőt folyamatosan a képernyőn tarthatod. Kikapcsolt állapotban megjelenik a késleltetés, amely megadja, mennyi ideig marad látható a vezérlő, miután az egér megállt, mielőtt elrejtőzik (0 és 10000 ezredmásodperc, eszközönként állítható).

## Stíluszerkesztő fül

Itt a kinézet CSS-ét, HTML-sablonját és szerkeszthető részeit módosíthatod, vagy saját kinézetet hozhatsz létre. A fül mind az öt panelen ugyanolyan.

- **Kinézet**: azt a kinézetet választja, amelyen a szerkesztő dolgozik. A lista az adott vezérlőtípus minden kinézetét tartalmazza, beépítettként vagy saját kinézetként jelölve; a lista tetején lévő mező és a mellette lévő plusz gomb nevet adva új kinézetet hoz létre.
- **Szerkesztő módja**: megadja, a kinézet melyik részét mutatja a szerkesztő: CSS (a kinézet stíluslapja), HTML-jelölés (a HTML-sablon) vagy metalista (a szerkeszthető részek, amelyekből a **Beállítások** szakasz mezői lesznek).

### CSS

A kinézet stíluslapja sorszámozva, szintaxiskiemeléssel, a helyén szerkeszthető. A `##bg-color##` jellegű helyettesítők a kinézet meta értékeit jelentik, így a Beállításokban megadott szín eljut ide a CSS-be. Három legördülő menü segít beszúrni a kurzor helyére: a meta értékek helyettesítői, a vezérlő jelölése által használt CSS-választók és a használt osztályok.

### HTML-jelölés

A vezérlő egy elemét felépítő HTML-sablon, sorszámozva, a helyén szerkeszthető. A kizárólag CSS-sel rajzoló kinézeteknél üres. Két legördülő menü szúr be a kurzorhoz: a dia értékei (cím, leírás, a számozott paraméter-mezők) és a vezérlőhöz való jelölésrészletek.

### Metalista

A kinézet szerkeszthető részeinek kezelése. Minden sor egy metát jelent, és mindegyikből egy mező lesz a **Stílus és megjelenés** fül **Beállítások** szakaszában: ha itt színmetát adsz hozzá, ott színminta jelenik meg.

| Oszlop vagy mező | Mit csinál |
| --- | --- |
| Azonosító | A meta azonosítója, amely a CSS-ben és a jelölésben a helyettesítőben szerepel. |
| Cím | A mező felirata a Beállítások szakaszban. |
| Érték | A meta alapértéke. A vezérlő típusa a meta típusától függ: színmintát kap a szín, számmezőt a méret, ikonlistát az ikon és betűtípus-listát a betűtípus. |
| Törlés | Eltávolítja a metát a kinézetből, és a mezőjét a Beállítások szakaszból. |
| Meta azonosítója | Az új meta azonosítója, a hozzáadás előtt kell megadni. |
| Típus | Az új meta értékének fajtája: egyéni (szabad szöveg vagy szám), szín, ikon vagy betűtípus. |
| Meta hozzáadása | Felveszi a megadott azonosítójú és típusú metát új sorként a listába. |