# Haladó tipográfia: szöveghatások

> Körbe hajlított és forgó szöveg, keverési mód, kivágott szöveg, kép rámutatáskor, futószöveg és aláhúzás a Haladó tipográfia widgetben.

Ez a fejezet a **Haladó tipográfia** widget Normál módban használható hatásait írja le. A widget bekapcsolását, a két módot és a Stílus fület az [áttekintő fejezet](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/szovegek-adatok-tipografia-alapok/) tartalmazza. A hatások a **Pro** bővítményhez tartoznak, és mindegyiknek külön **Engedélyezés/Letiltás** kapcsolója van. Ahol Többes kiválasztás módban is működnek, azt jelezzük.

Minden példában add hozzá a **Haladó tipográfia** widgetet, hagyd a **Válaszd ki az opciót** mezőt **Normál** értéken, és írd be a szöveget.

## Függőleges szöveg

A **Szövegirány** szakasz függőlegessé fordítja a szöveget, például egy kép vagy egy szekció melletti felirathoz. A hatás a CSS `writing-mode` tulajdonságot használja, nem kell hozzá egyéni CSS.

1. Nyisd meg a **Tartalom** fül **Szövegirány** szakaszát.
2. A **Függőleges szöveg** mezőben válaszd a **Balról jobbra** vagy a **Jobbról balra** értéket.
3. Ha azt szeretnéd, hogy a betűk állva, egymás alatt jelenjenek meg (ne elforgatva), kapcsold be a **Függőleges betűk** kapcsolót.
4. Szükség esetén használd a **Normál transzformáció**, a **Transzformáció rámutatáskor** és a **Transzformáció origója** mezőt további forgatáshoz.

![A Szövegirány szakasz a Függőleges szöveg mezővel, balról jobbra értékkel](./kepek/szovegek-adatok-7-tipo-panel-irany.webp)

*A Szövegirány szakasz a Függőleges szöveg mezővel, balról jobbra értékkel* (https://minta-bolt.hu/wp-admin/post.php?post=74&action=elementor)

A képen a **Függőleges szöveg** **Balról jobbra** értéken áll, alatta a **Függőleges betűk** kapcsoló és a transzformációs mezők láthatók.

![Függőlegesen elforgatott szöveg a nyilvános oldalon](./kepek/szovegek-adatok-7-tipo-fuggoleges.webp)

*Függőlegesen elforgatott szöveg a nyilvános oldalon* (https://minta-bolt.hu/tp-tipo-fuggoleges/)

A kép a szöveget oldalra fordítva mutatja.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Függőleges szöveg** | A **Normál** vízszintesen hagyja a szöveget, a **Balról jobbra** és a **Jobbról balra** függőlegessé teszi | Normál |
| **Függőleges betűk** | Minden betű álló helyzetben marad, egymás alatt. Csak akkor látszik, ha a **Függőleges szöveg** nem **Normál** | Ki |
| **Függőleges irány** | Ikongombok: kezdeti, balról jobbra vagy jobbról balra. A jobbról balra irány megfordítja a karakterek sorrendjét, vízszintes szövegen is | Kezdeti |
| **Normál transzformáció** / **Transzformáció rámutatáskor** | CSS-transzformáció, például `rotate(-90deg)`, alaphelyzetben és rámutatáskor | Üres |
| **Transzformáció origója** | Az a pont, amely körül a transzformáció forgat. A **Folyamatos animáció** forgáspontját is ez adja | Középre |

**Többes kiválasztás** módban nincs **Szövegirány** szakasz. Ott az egyes elemek **Normál transzformáció** mezőjét használd, például `rotate(-90deg)` értékkel.

## Körvonalas szöveg

A **Körvonal/kitöltés opciói** üres belsejű, körvonalas betűket rajzol, külön körvonal- és kitöltési színnel normál és rámutatásos állapotra.

1. Nyisd meg a **Tartalom** fül **Körvonal/kitöltés opciói** szakaszát, és kapcsold be az **Engedélyezés/Letiltás** kapcsolót. A szöveg azonnal körvonalassá válik.
2. Menj a **Stílus** fül **Körvonal/kitöltés stílusa** szakaszára, és állítsd be a **Vonalvastagságot**.
3. A **Normál** fülön válaszd ki a körvonal színét (klasszikus vagy színátmenetes), és ha szeretnéd, a **Kitöltési színt**.
4. A **Rámutatás** fülön adj meg **Kitöltési színt**: a betűk ezzel telnek meg, amikor az egér fölöttük van.

Tudnivalók:

- Stílus nélkül a körvonal 2 px vastag, sötétszürke (#313131), a betűk átlátszók.
- A **Körvonal/kitöltés stílusa** szakasz csak akkor látszik, ha a **Körvonal/kitöltés opciói** be van kapcsolva.
- A rámutatásos **Kitöltési szín** a körvonalas szöveget rámutatáskor tömör szöveggé teszi.
- **Többes kiválasztás** módban minden elemnek saját **Körvonal/kitöltés opciói** van, így akár egyetlen szót is körvonalassá tehetsz.

## Kör alakú szöveg

A **Kör alakú szöveg** körbe vagy ívbe hajlítja a szöveget, ami logó, jelvény vagy kerek kép köré jó.

1. Írd a szöveget a **Szöveg** mezőbe. A végére tegyél szóközt vagy elválasztót (például „ • ”), hogy a szöveg eleje és vége ne érjen össze.
2. Nyisd meg a **Kör alakú szöveg** szakaszt, és kapcsold be az **Engedélyezés/Letiltás** kapcsolót. A szöveg körbe hajlik.
3. Ha szélesebb ívet szeretnél, kapcsold be az **Egyéni sugár** kapcsolót, és adj meg értéket a **Válassz értéket** mezőben.
4. Ha az ellenkező irányba szeretnéd hajlítani (például egy jelvény alsó ívéhez), kapcsold be az **Irány megfordítása** kapcsolót.

![A Kör alakú szöveg szakasz a Haladó tipográfia panelen](./kepek/szovegek-adatok-6-tipo-panel-kor.webp)

*A Kör alakú szöveg szakasz a Haladó tipográfia panelen* (https://minta-bolt.hu/wp-admin/post.php?post=65&action=elementor)

A képen a szakasz kikapcsolt állapotban látszik: itt kapcsolod be a hatást.

| Beállítás | Mit csinál |
|---|---|
| **Engedélyezés/Letiltás** | A szöveget teljes körré hajlítja. |
| **Egyéni sugár** / **Válassz értéket** | A sugarat pixelben adja meg (0 és 800 között). A kör méreténél nagyobb érték szélesebb, laposabb ívet ad. Egy kisebb érték (a próbánkban 60 px) nem változtatott a körön. |
| **Irány megfordítása** | A szöveget az ellenkező irányba hajlítja. |
| **Automatikus reszponzivitás** | A kör méretét a böngészőablakhoz igazítaná, de jelenleg nincs látható hatása. |

![Körbe hajlított szöveg a nyilvános oldalon](./kepek/szovegek-adatok-6-tipo-kor.webp)

*Körbe hajlított szöveg a nyilvános oldalon* (https://minta-bolt.hu/tp-tipo-kor/)

A képen a szöveg teljes kört alkot, a végén a „•” elválasztóval.

**Korlátozások:** az **Automatikus reszponzivitás** a közzétett oldalon nem változtat semmit: keskeny képernyőn a kör ugyanúgy néz ki bekapcsolva és kikapcsolva. A **Kör alakú szöveg** Többes kiválasztás módban nem érhető el.

**Hibaelhárítás:**

- Ha a szöveg eleje és vége átfedi egymást, tegyél a szöveg végére szóközt vagy elválasztót, vagy rövidítsd a szöveget.
- Ha a **Válassz értéket** nem változtat semmit, a sugár csak akkor látszik, ha nagyobb annál a körnél, amelyet a szöveg magától kitesz. Próbálj nagyobb értéket.

## Forgó körszöveg

A körszöveg a **Folyamatos animáció** **Forgó** hatásával magától pörög, például logó vagy gomb körül.

1. Állítsd be a körszöveget az előző rész szerint (a szöveg végén szóközzel vagy elválasztóval).
2. Nyisd meg a **Stílus** fület, és a **Folyamatos animáció** szakaszban kapcsold be a **Folyamatos animáció** kapcsolót.
3. Az **Animációs hatás** mezőben válaszd a **Forgó** értéket.
4. Az **Időtartam** mezőbe írd be, hány másodperc alatt tegyen meg egy teljes fordulatot (alapérték: 2,5). Nagyobb szám lassabb forgást jelent.

![A Folyamatos animáció szakasz Forgó hatással](./kepek/szovegek-adatok-6-tipo-panel-forgo.webp)

*A Folyamatos animáció szakasz Forgó hatással* (https://minta-bolt.hu/wp-admin/post.php?post=67&action=elementor)

A képen az **Animációs hatás** **Forgó** értékre van állítva.

![Forgó körszöveg a nyilvános oldalon](./kepek/szovegek-adatok-6-tipo-forgo.webp)

*Forgó körszöveg a nyilvános oldalon* (https://minta-bolt.hu/tp-tipo-forgo/)

A kép egyetlen pillanatot mutat: az oldalon a kör megállás nélkül forog.

Hogyan működik:

- A kör egy fordulatot tesz meg az **Időtartam** alatt, és nem áll meg.
- A **Rámutatáskor megjelenő animáció** kapcsolóval a kör csak akkor forog, amikor az egér a szöveg fölött van.
- Az **Animációs hatás** a **Pulzálás**, **Lebegtetés** és **Dobálás** hatást is kínálja. A **Forgó** hatás Többes kiválasztás módban nem érhető el.

**Korlátozás:** a **Folyamatos animáció** alatti **Transzformáció origója** jelenleg nem hat. A forgás középpontját a **Tartalom** fül **Szövegirány → Transzformáció origója** mezője adja (alapérték: **Középen középen**). Ha másik pont körül szeretnéd forgatni, ott állítsd át.

Ha a kör nem forog, nézd meg a közzétett oldalon vagy az előnézetben. Ha a **Rámutatáskor megjelenő animáció** be van kapcsolva, csak rámutatáskor forog.

## Háttéren alapuló keverési mód

Ez a hatás a szöveget összekeveri a mögötte lévő képpel vagy színnel (CSS keverési módokkal), így a betűk színe a háttérrel együtt változik.

1. Adj a widgetet tartalmazó konténernek háttérképet vagy háttérszínt.
2. Add hozzá a **Haladó tipográfia** widgetet, és írd be a szöveget.
3. Nyisd meg a **Háttéren alapuló keverési mód** szakaszt, és kapcsold be az **Engedélyezés/Letiltás** kapcsolót.
4. A **Variációk** mezőben válassz keverési módot, például **Különbség**.

![A Háttéren alapuló keverési mód szakasz, a Variációk mező Különbség értékkel](./kepek/szovegek-adatok-6-tipo-panel-keveres.webp)

*A Háttéren alapuló keverési mód szakasz, a Variációk mező Különbség értékkel* (https://minta-bolt.hu/wp-admin/post.php?post=68&action=elementor)

A képen a szakasz be van kapcsolva, a **Variációk** értéke **Különbség**, a vászon szélén a lila-narancs színátmenetes háttér látszik.

![Keverési móddal megjelenő szöveg színátmenetes háttéren](./kepek/szovegek-adatok-6-tipo-keveres.webp)

*Keverési móddal megjelenő szöveg színátmenetes háttéren* (https://minta-bolt.hu/tp-tipo-keveres/)

A betűk színe a háttér színeihez igazodik.

Hogyan működik:

- A **Variációk** adja a szöveg CSS keverési módját. Az alapértelmezett **Normál** nem kever.
- Bekapcsolt keverési módnál a widget a szöveget alapértelmezetten fehérre állítja.
- Többes kiválasztás módban a **Szöveglista** minden elemének saját **Háttéren alapuló keverési mód** kapcsolója és **Variációk** mezője van.

Ha nem látsz keverést, ellenőrizd, hogy a **Variációk** nem **Normál** értéken áll-e, és hogy van-e kép vagy szín a szöveg mögött. Egy sima fehér oldalon nincs mivel keverni.

## Kivágott szöveg (képpel vagy színnel kitöltött betűk)

A **Kivágott szöveg** a betűket képpel vagy színnel tölti ki, így a szöveg maszkként működik: a háttér csak a betűk belsejében látszik.

1. Írd be a szöveget.
2. Nyisd meg a **Kivágott szöveg** szakaszt, és kapcsold be az **Engedélyezés/Letiltás** kapcsolót.
3. A **Háttér típusa** mezőnél válassz képet vagy színt (színátmenet is lehet).
4. Állítsd be a **Pozíció** és a **Megjelenítési méret** mezőt (például **Cover**).
5. A **Stílus → Haladó tipográfia → Tipográfia** résznél tedd a szöveget nagyra és vastagra, hogy minél több látsszon a képből.

![A Kivágott szöveg szakasz színátmenetes háttérrel](./kepek/szovegek-adatok-6-tipo-panel-maszk.webp)

*A Kivágott szöveg szakasz színátmenetes háttérrel* (https://minta-bolt.hu/wp-admin/post.php?post=69&action=elementor)

A képen a **Háttér típusa** színátmenet két színnel (lila és narancs), a szög 180 fok.

![Színátmenettel kitöltött, vastag szöveg a nyilvános oldalon](./kepek/szovegek-adatok-6-tipo-maszk.webp)

*Színátmenettel kitöltött, vastag szöveg a nyilvános oldalon* (https://minta-bolt.hu/tp-tipo-maszk/)

A betűk belsejében a színátmenet látszik.

- A szöveg maga átlátszóvá válik, a háttér csak a betűkön belül jelenik meg.
- Többes kiválasztás módban minden elemnek saját **Kivágott szöveg** kapcsolója és **Szöveg háttere** beállítása van.

Ha a szöveg eltűnt: bekapcsolt **Kivágott szöveg** mellett a betűk átlátszók, amíg nem adsz meg hátteret. Válassz képet vagy színt a szakaszban.

## Kép felfedése rámutatáskor

Ez a hatás képet mutat, amikor a látogató a szöveg fölé viszi az egeret.

1. Írd be a szöveget.
2. Nyisd meg a **Kép felfedése rámutatáskor** szakaszt, és kapcsold be az **Engedélyezés/Letiltás** kapcsolót.
3. A **Rámutatáskor megjelenő kép** mezőben válaszd ki a képet.
4. A **Stílus** mezőben válassz felfedési animációt (**Stílus 1** és **Stílus 6** között).
5. Tedd közzé az oldalt, és vidd az egeret a szöveg fölé.

Hogyan működik:

- A kép akkor jelenik meg, amikor az egér a szöveg fölé ér.
- A hatás akkor is működik, ha a szövegnek van linkje (**Speciális beállítások → Link**).
- Többes kiválasztás módban minden elem a saját képét mutathatja.

Ha rámutatáskor semmi nem jelenik meg, ellenőrizd, hogy van-e kiválasztva **Rámutatáskor megjelenő kép**, és a közzétett oldalon vagy az előnézetben próbáld ki.

## Futószöveg

A **Futószöveg** ajánlatokat, híreket vagy hangsúlyos márkasort görget át az oldalon balra, jobbra, felfelé vagy lefelé.

1. Írd be a szöveget.
2. Nyisd meg a **Futószöveg** szakaszt, és kapcsold be az **Engedélyezés/Letiltás** kapcsolót.
3. A **Típus** mezőben válassz az **Alapértelmezett** és az **Átmenetkor** között (lásd alább).
4. Állítsd be az **Irány** mezőt. Balról jobbra mozgáshoz válaszd a **Jobb** értéket.
5. Állítsd be a sebességet és a **Szélesség** mezőt, majd tedd közzé az oldalt.

![A Futószöveg szakasz Átmenetkor típussal és 10 másodperces animációval](./kepek/szovegek-adatok-6-tipo-panel-szalag.webp)

*A Futószöveg szakasz Átmenetkor típussal és 10 másodperces animációval* (https://minta-bolt.hu/wp-admin/post.php?post=70&action=elementor)

A képen a **Típus** **Átmenetkor**, az **Irány** **Jobb**, az **Animáció időtartama** 10.

![Futószöveg a nyilvános oldalon](./kepek/szovegek-adatok-6-tipo-szalag.webp)

*Futószöveg a nyilvános oldalon* (https://minta-bolt.hu/tp-tipo-szalag/)

A kép a mozgás egy pillanatát mutatja: a szöveg az oldal szélén kívülről érkezik.

### Alapértelmezett vagy Átmenetkor

| Beállítás | Alapértelmezett | Átmenetkor |
|---|---|---|
| Hogyan mozog | A HTML `<marquee>` elem | CSS-animáció |
| **Irány** | **Bal**, **Jobb**, **Fel**, **Le** | **Bal**, **Jobb**, **Fel**, **Le** |
| **Viselkedés** | **Görgetés** (alapérték), **Csúsztatás**, **Váltakozó** | Nincs |
| **Ismétlés** | Az ismétlések száma, alapérték: -1 | Nincs, az animáció ismétlődik |
| **Sebesség** | A görgetés lépésköze, alapérték: 6 | Nincs |
| **Animáció időtartama** | A lépések közti késleltetés, alapérték: 85 | Egy áthaladás másodpercben. Üresen a beépített sebesség érvényes (Bal és Jobb: 8 mp, Fel: 2 mp, Le: 3 mp) |
| **Szélesség** | A futószöveg területének szélessége | A szövegterület szélessége |

A `<marquee>` elavult HTML-elem, amelyet a böngészők még támogatnak. Ha szabványos kódot szeretnél, használd az **Átmenetkor** típust.

Hogyan működik:

- Ha az **Irány** **Jobb**, a szöveg balról jobbra mozog, a **Bal** ennek az ellenkezője.
- Többes kiválasztás módban minden elemnek saját **Futószöveg** beállításai vannak, így a szövegnek csak egy része mozoghat.

**Korlátozás:** a futószöveg nem lehet link. Bekapcsolt **Futószövegnél** a **Speciális beállítások → Link** nem kerül az oldalra.

Ha a szöveg nem mozog, ellenőrizd, hogy az **Engedélyezés/Letiltás** be van-e kapcsolva, majd próbáld ki a közzétett oldalon vagy az előnézetben.

## Aláhúzás és kiemelés

A **Haladó aláhúzási opciók** klasszikus aláhúzásokat és hét átfedéses stílust ad. Az átfedéses aláhúzás kiemelő filchez hasonlóan nő rá a szövegre rámutatáskor.

1. Nyisd meg a **Stílus** fület, és ott a **Haladó aláhúzási opciók** szakaszt.
2. Az **Aláhúzás stílusa** mezőben válaszd az **Átfedés** értéket (vagy a **Klasszikus** értéket a hagyományos aláhúzáshoz).
3. Az **Átfedés stílusa** mezőben válassz a **Stílus 1** és **Stílus 7** közül.
4. A **Normál** és a **Rámutatás** fülön állítsd be a **Sormagasság** értéket, és a **Háttér típusa** mezőnél válassz színt.

![A Haladó aláhúzási opciók szakasz Átfedés típussal és Stílus 1 értékkel](./kepek/szovegek-adatok-6-tipo-panel-alahuzas.webp)

*A Haladó aláhúzási opciók szakasz Átfedés típussal és Stílus 1 értékkel* (https://minta-bolt.hu/wp-admin/post.php?post=71&action=elementor)

A képen az **Aláhúzás stílusa** **Átfedés**, az **Átfedés stílusa** **Stílus 1**, alatta a **Normál** és **Rámutatás** fül.

| Beállítás | Mit csinál |
|---|---|
| **Aláhúzás stílusa** | **Nincs** (alapérték), **Klasszikus** vagy **Átfedés**. |
| **Átfedés stílusa** | **Stílus 1** és **Stílus 7** között (csak Átfedésnél). A **Stílus 7**-nek nincs **Normál**/**Rámutatás** beállítása. |
| **Alsó eltolás** | A vonal távolsága az alsó széltől (csak a **Stílus 1** átfedésnél). |
| **Sormagasság** / **Vonal magassága rámutatáskor** | Az átfedő vonal vastagsága normál állapotban és rámutatáskor. |
| **Háttér típusa** / **Szín** | Az átfedés klasszikus vagy színátmenetes színe normál állapotban és rámutatáskor. |
| **Aláhúzó vonal** | Klasszikus aláhúzásnál: **Aláhúzott**, **Felső vonal** vagy **Áthúzás** (rámutatáskor külön is állítható). |
| **Aláhúzás stílusa** (klasszikus) | **Folytonos**, **Dupla**, **Pontozott**, **Szaggatott** vagy **Hullámos**. |
| **Vonal színe** | A klasszikus vonal színe normál állapotban és rámutatáskor. |

![Aláhúzott szöveg a nyilvános oldalon átfedéses Stílus 1-gyel](./kepek/szovegek-adatok-6-tipo-alahuzas.webp)

*Aláhúzott szöveg a nyilvános oldalon átfedéses Stílus 1-gyel* (https://minta-bolt.hu/tp-tipo-alahuzas/)

A kép a **Stílus 1** átfedést mutatja rámutatás előtt: vékony vonal a szöveg alján. Saját szín nélkül a vonal piros, rámutatáskor a szöveg teljes magasságára nő.

Hogyan működik:

- Az aláhúzás az egész szövegre vonatkozik. Normál módban nem húzhatsz alá csak egy részt.
- A **Stílus 1** átfedés vékony vonalként indul (5 px, az aljtól 10 px-re), és rámutatáskor a szöveg teljes magasságára nő.
- A klasszikus aláhúzás CSS szövegdíszítést használ, például **Aláhúzott** vonalat **Hullámos** stílussal.
- Ha csak néhány szót akarsz aláhúzni, használd a [Többes kiválasztás módot](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/szovegek-adatok-tipografia-alapok/): minden elemnek saját **Haladó aláhúzási opciók** mezője van.