# Stílus panel

> A Stílus panel szakaszai: szöveg, SVG-stílus, kiemelések, háttér, tárolósormagasság, szegély és térközök.

A **Stílus** panelen a rétegek megjelenését állítod: a betűtípust, a színeket, a hátteret, a szegélyt és a térközöket. A legtöbb szakasz csak akkor látszik, ha az adott típusú réteg van kijelölve.

## A panel megnyitása

1. Jelölj ki egy réteget a színpadon vagy a [Rétegek oldalsávon](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-bejaras-retegek-oldalsav/).
2. A jobb oldalsávon kapcsolj [Tervezési módba](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-bejaras-tervezesi-mod/).
3. Nyisd meg a **Stílus** fület.

![A Stílus panel egy szövegrétegnél](./kepek/szerkeszto-panelek-stilus-panel.webp)

*A Stílus panel egy szövegrétegnél* (https://minta-bolt.hu/wp-admin/admin.php?page=revslider&view=editor&module=1&slide=1)

A képen a szövegréteg **Szöveg** szakasza látszik a betűtípussal, mérettel és színnel, alatta a további szakaszok.

## Szöveg

A szakasz szövegrétegnél látszik. A betűtípus-ikon rétegek közönséges szövegrétegek, ezért őket is itt stílusozod.

| Beállítás | Mit csinál |
| --- | --- |
| Betűtípus | A betűcsalád. A lista az általánosan elérhető („websafe”) betűket és a Google-betűtípusokat tartalmazza, és megjelennek benne a **Globális beállítások** betűtípusok füléről hozzáadott egyéni betűtípusok is. Minden bejegyzés a saját betűtípusával látszik. A Brand Kitben mentett betűk elöl, a **Brand Fonts** csoportban állnak: ha ilyet választasz, a réteg betűcsaládja a márkabetűhöz kapcsolódik, és a **Globális beállításokban** a márkabetű módosítása a réteget is módosítja. A vastagság, a méret és a stílus a rétegé marad. Bármilyen más betűtípus választása megszünteti a kapcsolatot. |
| Betűméret | Képpontban vagy `rem`-ben, 4 és 5000 között. A puszta szám képpont, a `rem` végű érték (például `1.5rem`) rem. A képpontos érték kisebb képernyőkön a modullal együtt kicsinyedik, a rem érték nem, tehát az `1.5rem` minden eszközön `1.5rem`. |
| Sormagasság | A sorok magassága (a betűk és a fölöttük, alattuk lévő hely együtt), képpontban vagy `rem`-ben, 4 és 5000 között; az értelmezés ugyanaz, mint a betűméretnél. |
| Betűköz | A betűk közti többlethely képpontban, 0 és 100 között. |
| Betűvastagság | A betű vastagsága: 100 Thin, 200 Extra-Light, 300 Light, 400 Regular, 500 Medium, 600 Semi-Bold, 700 Bold, 800 Extra-Bold, 900 Black. A választható értékek a betűtípustól függnek. |
| HTML-címke | A réteget körbevevő HTML-elem (SEO-célra hasznos lehet): `<sr7-layer>`, `<div>`, `<p>`, `<h1>` és `<h6>` között, `<span>`, `<label>`. |
| Szöveg színe | A színmintára kattintva színválasztó nyílik. |
| Nagybetű, Első betű nagy, Kisbetű | Kapcsolók: a szöveg csupa nagybetűvel, minden szó nagy kezdőbetűvel, illetve csupa kisbetűvel jelenik meg. |
| Dőlt, Aláhúzott, Áthúzott | Kapcsolók a megfelelő szövegformázáshoz. |

## SVG-stílus

A szakasz SVG-rétegnél látszik. Az SVG-grafika színét, háttérképét és körvonalát módosíthatod benne.

| Beállítás | Mikor látszik | Mit csinál |
| --- | --- | --- |
| Eredeti színek megtartása | Mindig | Be: az SVG színei az eredeti fájlból származnak. Ki: megjelennek a színek módosításának beállításai. |
| Kép | Mindig | Be: az SVG háttere kép. Ki: egyszínű háttér. |
| SVG színe | Ha az eredeti színek megtartása és a kép is ki van kapcsolva | Az SVG színe, színválasztóval. |
| Bélyegkép | Ha az eredeti színek megtartása ki, a kép be van kapcsolva | Az SVG-hátterű kép előnézete. Fölé víve gombokkal cserélheted a médiatárból, az elemkönyvtárból vagy AI által generált képre. |
| Képigazítás | Mint a bélyegkép | 3×3-as rács: a kép igazítása az SVG-rétegen belül. |
| Képméret | Mint a bélyegkép | **Cover**, **Contain** vagy **Auto**. |
| Körvonal színe | Ha az eredeti színek megtartása ki van kapcsolva | A körvonal színe. |
| Körvonal szélessége | Mint a körvonal színe | 0 (nincs körvonal) és 500 között; 1-nél kisebb szám is megadható. A szélesség nem abszolút, hanem a grafika eredeti méretéhez viszonyított: egy kis eredeti SVG-n az `1` felnagyítva igen vastag lehet, ilyenkor használj 1-nél kisebb számot. |
| Szaggatás | Mint a körvonal színe | 0-nál nagyobb szám szaggatott vonallá alakítja a körvonalat. Minél nagyobb, annál hosszabbak a szaggatások és a közük. |
| Szaggatás eltolása | Mint a körvonal színe | Ha a szaggatás 0-nál nagyobb, eltolja a szaggatások helyét az alakzat mentén (0 és 100 között). |

## Kiemelések

A szakasz szövegrétegnél látszik. A kiemelés effektus a szöveg megjelölt szavain: egy doboz mögöttük, egy rajtuk végigfutó szín, vagy egy alájuk húzott vonal. A szakasz kapcsolójával be- és kikapcsolod. Csak azok a szavak kapnak kiemelést, amelyeket megjelöltél: a **Réteg** panel tartalom mezőjében jelöld ki a szavakat, és kattints a **Mark** gombra.

A szakasz tetején hat kinézet csempéje áll: Coral Box, Marker Yellow, Colour Sweep, Aqua Sweep, Underline és Bold Underline. Egy csempe kiválasztása egyszerre állítja be a szakasz összes beállítását.

A kiemelések a réteg belépő animációjának vége után indulnak, egymás után szavanként vagy kifejezésenként. A réteg távozásakor visszaállnak, és a dia minden megjelenésekor újra lejátszódnak. Annak a látogatónak, akinek az eszköze csökkentett mozgást kér, a kiemelések mozgás nélkül, azonnal megjelennek.

| Beállítás | Mikor látszik | Mit csinál | Alapérték |
| --- | --- | --- | --- |
| Stílus | Be van kapcsolva | **Box behind the Words**: a szavak mögött balról jobbra kiszélesedik egy doboz a megadott színben, és a szavak a „Words on the Box” színre váltanak. **Colour Sweep**: a szín balról jobbra végigfut a megjelölt szavak betűin. **Underline**: balról jobbra kiszélesedő vonal a szavak alatt, minden sorban, ahová a szavak tördelődnek. | Box behind the Words |
| Szín | Be van kapcsolva | A kiemelés színe: a doboz, a betűkön végigfutó szín vagy az aláhúzás. | |
| Szavak a dobozon | Ha a stílus Box behind the Words | A szavak színe, amelyre a doboz kiszélesedésével váltanak. | |
| Időtartam | Be van kapcsolva | Egy megjelölt szó vagy kifejezés kiemelésének hossza ezredmásodpercben, 100 és 5000 között. | 900 ms |
| Eltolás (Stagger) | Be van kapcsolva | Két megjelölt szó kiemelésének kezdete közti idő, 0 és 3000 ezredmásodperc között. | 350 ms |
| Késleltetés | Be van kapcsolva | Ennyit vár az első kiemelés a belépő animáció vége után, 0 és 10000 ezredmásodperc között. | 0 ms |
| Vastagság | Ha a stílus Underline | Az aláhúzás magassága a betűméret százalékában, 1% és 60% között. | 8% |

## Háttér

A szakasz minden rétegtípusnál látszik, kivéve a videót és a dia hátterét. A réteg háttérszínét és háttérképét állítod benne.

| Beállítás | Mit csinál |
| --- | --- |
| Háttérszín | A réteg háttérszíne, színválasztóval. |
| Háttérkép | Be: a réteg hátterébe kép kerül. |
| Bélyegkép | A kiválasztott háttérkép előnézete. Fölé víve gombokkal cserélheted a médiatárból, az elemkönyvtárból vagy AI által generált képre. |
| Képigazítás | 3×3-as rács: a háttérkép igazítása a rétegen belül, ha a kép képaránya eltér a rétegétől. |
| Egyéni igazítás | Bekapcsolva a **Kép X pozíciója** és a **Kép Y pozíciója** szerkeszthető. Kikapcsolva olvasható, és a rács szerinti értéket mutatja. |
| Képméret | **Cover**, **Contain**, **Auto**, **%** (a kép szélessége a réteg szélességének arányában), **px** (a kép szélessége képpontban), **Repeat X**, **Repeat Y**. |
| Kép X pozíciója, Kép Y pozíciója | A kép vízszintes, illetve függőleges helye százalékban. |
| Kép URL-je | A kiválasztott kép címe, szükség esetén átírható. |
| Képváltozat | Ha a képnek több méretű változata van (például **Original Source**, **Thumbnail Source**), ezek közül választasz. |
| Levágás | Csak szövegrétegnél. **Nincs:** a háttér nincs levágva. **Szöveg:** a háttér a szöveg alakjára vágódik. A **Szövegkitöltés** átlátszóra állításával együtt azt éred el, mintha a szöveget a háttérszín vagy háttérkép töltené ki. Ha az **Extra stílus** panel **Szöveg körvonala** szakaszában körvonalat adtál a szövegnek, annak szélessége is beleszámít a levágott területbe, és ilyenkor a levágott háttér akkor is látszhat, ha a szövegkitöltés **Nincs**. |
| Szövegkitöltés | Szöveg-, SVG- és hangrétegnél. **Nincs:** az alapértelmezett szövegszín marad. **Átlátszó:** a szövegkitöltés átlátszó, így a levágott háttérszín vagy háttérkép látszik. |

## Tárolósormagasság

A szakasz csoport- és oszlopréteg kijelölésekor látszik. A **Tárolósormagasság** a tárolóban lévő azon gyermekrétegek sormagasságát adja meg, amelyeknek a **Réteg → Elrendezés viselkedése → Megjelenítés** értéke soron belüli blokk. Képpontban vagy `rem`-ben adható meg (a puszta szám képpont), 4 és 5000 között. Nem a gyermekrétegben lévő szöveg sormagasságára vonatkozik, hanem magának a rétegnek a sormagasságára: ha például `100px` az értéke, a gyermekrétegek alkotta minden sor legalább `100px` magas, akkor is, ha maguk a gyermekrétegek kisebbek.

## Szegély

A szakasz minden rétegtípusnál látszik, kivéve a dia hátterét.

| Beállítás | Mit csinál |
| --- | --- |
| Szegély | A szegély színe, színválasztóval. |
| Szegély stílusa | **None** (nincs), **Solid** (folytonos), **Dotted** (pontozott), **Dashed** (szaggatott), **Double** (dupla), **Groove**, **Ridge**, **Inset**, **Outset** (háromdimenziós hatású szegélyek). |
| Szegély lekerekítése | A réteg minden sarkának lekerekítése képpontban. Akkor is lekerekíti a sarkokat, ha nincs látható szegély. Ha minden sarkot egyformára akarsz állítani, módosítás előtt kapcsold be a lakat ikont. |
| Szegély szélessége | A látható szegély vastagsága képpontban oldalanként. Csak akkor látszik, ha a stílus nem **None**. Az egyforma beállításhoz kapcsold be a lakat ikont. |

## Térközök

A szakasz minden rétegtípusnál látszik, kivéve a dia hátterét.

- **Margó:** a réteg külső térköze képpontban. Az azonos értékű beállításhoz módosítás előtt kapcsold be a lakat ikont.
- **Kitöltés:** a réteg belső térköze képpontban. Ugyanígy a lakat ikon teszi egyformává az összes oldalt.