# Heading Title (Címsor) widget

> Címsor, alcím és kiegészítő cím kilenc stílusban: oldalcím beillesztése, szó- és karakterkorlát, szövegmozgás és animált szövegbontás.

A **Heading Title** widget (a panelen **Címsor címe**) egy főcímből, egy alcímből és egy rövid kiegészítő címből építi fel a címsort. Kilenc kész elrendezést ad, és szövegmozgást is lehet rá tenni.

A widget az ingyenes bővítményben van. Használat előtt kapcsold be: **The Plus Addons → Widgets**, keress rá a **Heading Title** szóra, és kapcsold be. Utána az Elementor szerkesztőjében keress rá a panelen, és húzd az oldalra. Csak az **Animált szövegbontás** stílushoz kell a Pro bővítmény.

## Elrendezés

Az **Elrendezés** szakasz a címsor alakját dönti el.

![A Címsor widget Elrendezés szakasza, Címsor kiválasztása: Oldalcím](./kepek/szovegek-adatok-2-cim-layout-panel.webp)

*A Címsor widget Elrendezés szakasza, Címsor kiválasztása: Oldalcím* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

A **Stílus** lista kilenc elrendezést tartalmaz. Nyolc közülük csak az elválasztó díszítésben tér el egymástól, a kilencedik az **Animált szövegbontás**.

| Stílus | Mit csinál |
| --- | --- |
| **Modern** (alapérték) | Cím, alcím és a kiegészítő cím, elválasztó nélkül |
| **Egyszerű** | Sima cím és alcím |
| **Klasszikus** | Egy vonal választja el a címet az alcímtől |
| **Dupla keret** | Dupla vonalas elválasztó |
| **Függőleges keret** | Függőleges vonal a cím fölött vagy alatt |
| **Pontozott díszítés** | Pontok az elválasztóban |
| **Egyedi** | Díszített cím és alcím páros |
| **Stílusos** | Vonal és pontok együtt az elválasztóban |
| **Animált szövegbontás** (Pro) | A címet szavakra, karakterekre vagy sorokra bontja, és mindegyiket külön animálja |

A **Címsor kiválasztása** lista azt dönti el, honnan jön a főcím szövege: az **Alapértelmezett** a beírt szöveget használja, az **Oldalcím** az aktuális oldal címét. Az **Igazítás** az egész blokkot igazítja, tabletre és mobilra külön értékkel. Az **Import Presets** gomb kész dizájnt tölt be, amit utána szerkeszthetsz.

## Tartalom

A **Tartalom** szakasz három szövegmezőt ad, mindegyik elfogad Elementor dinamikus címkét:

- **Címsor címe**: a főcím (alapértéke `Heading`).
- **Alcím**: a kisebb sor (alapértéke `Sub Title`).
- **Kiegészítő cím**: rövid szó vagy jelvény a főcím mellett (alapértéke `Title`). Csak a **Modern** stílusban van.
- **Kiegészítő cím pozíciója**: a kiegészítő cím a főcím után (**Utótag**) vagy előtte (**Előtag**) áll. Szintén csak a **Modern** stílusban látszik.

## Oldalcím beillesztése

Ha a címsornak mindig az oldal saját címét kell mutatnia, nem kell kétszer begépelned: átnevezed az oldalt, és a címsor követi. Sablonban is jó, mert minden oldalon a saját címét oldja fel.

1. Add hozzá a **Heading Title** widgetet az oldalhoz vagy a sablonhoz.
2. Az **Elrendezés** szakaszban válassz bármilyen **Stílust** az **Animált szövegbontás** kivételével.
3. A **Címsor kiválasztása** listából válaszd az **Oldalcím** értéket.
4. A vászon azonnal az éppen szerkesztett oldal címét mutatja.
5. Ha az alatt még egy sort szeretnél, írd be az **Alcím** mezőbe a **Tartalom** szakaszban.

![A címsor az oldal saját címét mutatja, alatta az alcímmel](./kepek/szovegek-adatok-2-cim-oldalcim.webp)

*A címsor az oldal saját címét mutatja, alatta az alcímmel* (https://minta-bolt.hu/tp-cim-oldalcim/)

A képen a főcím az oldal címe, nem a widgetbe beírt szöveg.

Tudnivalók:

- Az **Oldalcím** csak a főcímet cseréli le. Az **Alcím** és a **Kiegészítő cím** úgy jelenik meg, ahogy beírtad.
- A **Címsor címe** mező megtartja, amit beírtál, de amíg az **Oldalcím** van kiválasztva, nem látszik. Ha visszaállítod **Alapértelmezett**-re, visszajön.
- Csak annak az oldalnak a címét olvassa, amelyiken a widget áll. Nem lehet másik bejegyzésre, kategóriára vagy archívumra irányítani.
- Az **Animált szövegbontás** stílusban nincs **Címsor kiválasztása** lista.
- Ha a cím üres, az oldalnak nincs címe: adj neki egyet a WordPress oldalbeállításaiban, és töltsd újra a szerkesztőt.
- Hosszú oldalcímet a **Címsor korlátja** rövidíthet (lásd lent).

## Egyéb opció: szó- és karakterkorlát

Dinamikus forrásból érkező címek könnyen túl hosszúra nyúlnak. Az **Egyéb opció** szakasz fix számú szóra vagy karakterre vágja a címet és az alcímet, és a vágás helyére három pont kerülhet.

1. Írd be a szöveget a **Címsor címe** és az **Alcím** mezőbe a **Tartalom** szakaszban.
2. Nyisd meg az **Egyéb opció** szakaszt, és kapcsold be a **Címsor és alcím korlátja** kapcsolót. Megjelenik a **Címsor korlátja** és az **Alcím korlátja**.
3. Kattints a **Címsor korlátja** melletti ceruzára.
4. A **Korlátozás alapja** listában válaszd a **Szó** vagy a **Karakter** értéket.
5. A **Címsor karakterszáma** mezőbe írd be, hányat tartson meg.
6. Hagyd bekapcsolva a **Pontok megjelenítése** kapcsolót, ha jelezni akarod a vágást, vagy kapcsold ki a tiszta lezáráshoz.
7. Az **Alcím korlátja** ugyanígy állítható. A kettő független, az egyiket korlátozhatod, a másikat hagyhatod.

![Az Egyéb opció szakasz bekapcsolt korláttal](./kepek/szovegek-adatok-2-cim-limit-panel.webp)

*Az Egyéb opció szakasz bekapcsolt korláttal* (https://minta-bolt.hu/wp-admin/post.php?post=23&action=elementor)

A kép a bekapcsolt **Címsor és alcím korlátja** kapcsolót és a két korlát-ceruzát mutatja.

![A cím négy szóra, az alcím húsz karakterre vágva](./kepek/szovegek-adatok-2-cim-limit.webp)

*A cím négy szóra, az alcím húsz karakterre vágva* (https://minta-bolt.hu/tp-cim-limit/)

A képen a cím négy szóra van vágva a végén három ponttal, az alcím húsz karakterre pontok nélkül.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Címsor és alcím korlátja** | Főkapcsoló: kikapcsolva semmi nem rövidül | Ki |
| **Címsor korlátja** / **Alcím korlátja** | Felugró panel a három beállítással, soronként külön | Ki |
| **Korlátozás alapja** | **Karakter** vagy **Szó** szerint számol | Karakter |
| **Címsor karakterszáma** / **Alcím karakterszáma** | Hány karaktert vagy szót tartson meg | üres |
| **Pontok megjelenítése** | A vágott szöveg végére pontokat tesz | Be |

Tudnivalók:

- A korlát megjelenítéskor érvényesül, a teljes szöveg megmarad a widgetben, a szám emelésével a többi visszajön.
- A **Karakter** a szóközt is számolja. Ha a „A complete widget library” szövegre 20 karaktert adsz, az „A complete widget li” marad.
- A **Szó** szóhatárnál vág, ezért nem marad félbevágott szó. Ha a szöveg közepén vág, a **Korlátozás alapja** **Karakter**-re van állítva.
- A **Pontok megjelenítése** egyetlen pont-karaktert (…) ad, nem három külön pontot.
- Az **Animált szövegbontás** stílusban nincs **Egyéb opció** szakasz, ott nem lehet korlátot beállítani.
- Nincs „tovább” hivatkozás, és a levágott rész nem fedhető fel.

## Cím szövegének animációja

A widget saját, GSAP-alapú szövegmozgást tud, amely független az Elementor belépő animációitól. A **Cím szövegének animációja** a főcímre, az **Alcím szövegének animációja** az alcímre vonatkozik, a két szakasz azonos felépítésű és egymástól független: az egyik bekapcsolása a másikra nincs hatással.

![A Cím szövegének animációja szakasz: Animáció engedélyezése, Alap, Normál](./kepek/szovegek-adatok-2-cim-mozgas-panel.webp)

*A Cím szövegének animációja szakasz: Animáció engedélyezése, Alap, Normál* (https://minta-bolt.hu/wp-admin/post.php?post=24&action=elementor)

1. Add hozzá a **Heading Title** widgetet, válassz bármilyen **Stílust** az **Animált szövegbontás** kivételével, és írd be a címet.
2. Nyisd meg a **Cím szövegének animációja** szakaszt, és kapcsold be az **Animáció engedélyezése** kapcsolót.
3. Az **Animáció** listában hagyd az **Alap** értéket a beépített előbeállításokhoz. A **Globális** egy olyan animációt használ újra, amelyet egyszer elmentettél az oldalbeállításokban.
4. Válassz **Animáció típusát**. Az alatta lévő beállítások a választástól függően változnak.
5. Nézd meg a valódi oldalt: az animáció betöltéskor fut le, ismétléshez töltsd újra.

### Az animáció négy típusa

| Animáció típusa | Mit látsz az oldalon |
| --- | --- |
| **Normál** (alapérték) | Minden szövegdarab eltolva és láthatatlanul indul, majd sorban a helyére úszik és beúszik. A kezdő eltolást a **Transzformációs hatások** alatt állítod |
| **Robbanás / szétszóródás** | A darabok véletlen helyen és szögben szétszórva indulnak, majd forogva és méretezve a helyükre állnak |
| **Összekevert szöveg** | A cím előbb véletlen jelekből áll, majd karakterenként a valódi szöveggé áll össze |
| **Gépelési effekt** | A cím üresen indul, és karakterenként kigépelődik |

### Az Alap animáció beállításai

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Transzformációs hatások** | Felugró panel: **X pozíció**, **Y pozíció**, **X irányú ferdítés**, **Y irányú ferdítés**, **Méretezés**, **Forgatás**, **Transzformáció origója**: az az állapot, amelyből a darabok indulnak | Ki |
| **Felosztási típus** | **Karakterek** vagy **Szavak** szerint animál. Az **Összekevert szöveg** és a **Gépelési effekt** típusnál nem látszik, mert azok mindig karakterenként dolgoznak | Karakterek |
| **Animáció indítási módja** | **Betöltéskor**, **Görgetésre** vagy **Rámutatáskor** | Betöltéskor |
| **Görgetéshez igazítás bekapcsolása** | Az animáció előrehaladását a görgetési helyzethez köti, ahelyett hogy egyben lefutna | Ki |
| **Animációs vezérlők** | Felugró panel: **Időtartam**, **Késleltetés**, **Lépcsőzetes késleltetés** (két darab közti idő), másodpercben | 1,2 / 0,3 / 0,04 |
| **Animációs effektek** | A mozgás görbéje: a power1.out-tól a power4.out-ig, továbbá sine, expo, circ, back, elastic és bounce | power1.out |
| **Ismétlés** | Az animációt egyszeri lefutás helyett ismétli | Ki |

A **Normál** típusnál adj meg kezdő eltolást a **Transzformációs hatások** alatt, például **Y pozíció** 80 azt jelenti, hogy a karakterek 80 képponttal lejjebbről úsznak a helyükre, majd finomítsd az **Időtartam** és a **Lépcsőzetes késleltetés** értékét.

### Globális animáció használata

A **Globális** érték lehetővé teszi, hogy egyszer definiálj egy szövegmozgást, és minden címsoron újrahasználd, így egy helyen módosítva mindenhol változik.

1. Kapcsold be a **Text Global Animation** kiterjesztést a **The Plus Addons → Extensions** oldalon. Addig a szakasz a „Text Global Animation is disabled” üzenetet mutatja, és nincs lenyíló lista.
2. Hozz létre szövegmozgást az Elementor oldalbeállításainak Global Scroll Interactions részében.
3. A widgetben állítsd az **Animáció** listát **Globális**-ra, és a **Globális animáció** listából válaszd ki a mozgást.

A **Globális animáció** lista csak azokat a mozgásokat sorolja fel, amelyeket már elmentettél. Új oldalon csak a „Select Animation” felirat látszik benne.

### Tudnivalók és hibaelhárítás

- A widget a címet karakterenként vagy szavanként külön elemekre bontja, és ezeket animálja. A címsorra állított stílus ezután is érvényes.
- **Ismétlés** nélkül az animáció egyszer fut le, és a végállapotban marad. Újratöltésre újra lejátszódik.
- A **Lépcsőzetes késleltetés** két egymást követő darab közti idő, ezért egy hosszú cím tovább tart, mint az **Időtartam**.
- Az **Animált szövegbontás** stílus ezt a szakaszt nem használja, annak saját beállításai vannak.
- Ha az oldalon semmi nem mozog, ellenőrizd, hogy az **Animáció engedélyezése** be van-e kapcsolva, és a valódi oldalt nyisd meg, ne a szerkesztő előnézetét. Ha gyorsítótár-bővítmény régi másolatot szolgál ki, ürítsd.
- Ha a **Globális animáció** lista hiányzik, a **Text Global Animation** kiterjesztés ki van kapcsolva. Kapcsold be, és töltsd újra a szerkesztőt.
- Ha eltűnt a **Felosztási típus**, **Összekevert szöveg** vagy **Gépelési effekt** típust választottál: azok mindig karakterenként dolgoznak.
- Ha az animáció lefut, mielőtt a címsor a képernyőre érne, állítsd az **Animáció indítási módját** **Betöltéskor**-ról **Görgetésre**-re.

## Animált szövegbontás (Pro)

Az **Animált szövegbontás** stílus a címet szavakra, karakterekre vagy sorokra bontja, és mindegyik darabot sorban a helyére animálja az oldal betöltésekor.

1. Add hozzá a **Heading Title** widgetet az oldalhoz.
2. Az **Elrendezés** szakaszban állítsd a **Stílust** **Animált szövegbontás**-ra. A panel megváltozik: az alcím, a kiegészítő cím és a korlát beállításai eltűnnek, mert ez a stílus nem használja őket.
3. Írd be a címet a **Tartalom** szakasz **Címsor címe** mezőjébe.
4. Az **Elrendezés** szakaszban válaszd ki a **Típus**t. Ez dönti el, mit animál külön: **Szó** (alapérték), **Karakter** vagy **Sor**.
5. Az **Animált szövegbontás opciói** szakaszban hangold a mozgást.
6. Nézd meg az oldalt: a darabok sorban beúsznak a helyükre.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Animációs hatás** | A GSAP mozgásgörbéje: Power 0 easeNone, a Power 1 és 4 közti változatok, valamint Back, Elastic és Bounce | Alapértelmezett |
| **X**, **Y**, **Z** | Mennyit mozdul a darab az adott tengelyen, mielőtt a helyére áll | 0 |
| **Méretezés** | Milyen méretről indul a darab | 0 |
| **Forgatás** | Mennyire van elforgatva a darab a megérkezés előtt | 0 |
| **Sebesség** | Az animáció másodpercben, 0,01 és 3 között | 1 |
| **Késleltetés** | Mennyit vár az indulás előtt, másodpercben | 0 |

A **Stílus** fülön az **Animált szövegbontás** szakasz a **Cím HTML-címke**, a címsor hivatkozása, a tipográfia és a szín beállításait adja ehhez a stílushoz.

Tudnivalók:

- Az animáció egyszer fut le, betöltéskor. Nem görgetésre indul.
- A **Sor** típus a címet a jelenlegi szélességnél kialakuló sortörések szerint bontja, ezért az animált darabok száma asztali és mobil nézeten eltérhet.
- Az **Animált szövegbontás** lecseréli a megszokott címsor-elrendezést: nincs alcím, kiegészítő cím, elválasztó és szókorlát.
- Ez a stílus a Pro bővítményt igényli. Csak az ingyenes bővítménnyel egy már **Animált szövegbontás** stílusra állított címsor sima, álló címsorként jelenik meg, mozgás és figyelmeztetés nélkül.
- A **Karakter** típusnál a szavak közti szóközök elveszhetnek, és az „Animated Headings” egybeírva jelenhet meg („AnimatedHeadings”). Többszavas címnél használd a **Szó** vagy a **Sor** típust.
- A **Cím szövegének animációja** szakasz erre a stílusra nem vonatkozik.
- Ha a szavak összefolynak, a **Típus** **Karakter**-re van állítva: válts **Szó**-ra.
- Ha az animáció túl gyors, emeld a **Sebesség** értékét (legfeljebb 3 másodperc).
- Ha eltűnt az **Alcím** mező, az **Animált szövegbontás** stílus nem használja. Állítsd vissza a **Stílust** például **Modern**-re.
- Ha az animáció nélkül, azonnal megjelenik a cím, ellenőrizd, hogy a Pro bővítmény aktív-e, és a valódi oldalt nézd. Gyorsítótárból kiszolgált régi stíluslap is elnyelheti a mozgást.