Haladó tipográfia: szöveghatások

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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: minden elemnek saját Haladó aláhúzási opciók mezője van.