# Heading Animation widget: váltakozó szöveg

> A Heading Animation widget hat animációs stílusa: gépelő és forgó szöveghatás, előtag, animált szöveg és utótag.

A forgó szöveghatás egy mondatban egy szót vagy kifejezést cserél le a következőre ugyanazon a helyen, miközben a mondat többi része áll. A **Heading Animation** widget **Style 2** stílusával építheted meg.

Használat előtt kapcsold be: **The Plus Addons → Widgets**, keress rá a **Heading Animation** szóra, és kapcsold be. A widget összes tartalmi és stílusbeállítása az ingyenes bővítményben van.

## A hatás elkészítése

1. Húzd a **Heading Animation** widgetet az oldalra.
2. A **Text Animation** szakaszban az **Animation Style** résznél válaszd a **Style 2** stílust: ez a felső sor második képes csempéje.
3. A **Prefix Text** mezőbe írd a váltakozó szöveg előtti állandó szavakat.
4. Az **Animated Text** mezőbe írd a kifejezéseket, mindegyiket külön sorba. Új sort a Ctrl + Enter vagy a Shift + Enter billentyűvel kezdhetsz.
5. A **Postfix Text** mezőbe írd a váltakozó szöveg utáni állandó szavakat, majd frissítsd az oldalt.

![A Heading Animation widget Text Animation szakasza: a 2. stílus kiválasztva, előtag, három soros animált szöveg és utótag](./kepek/szovegek-adatok-2-cim-forgo-panel.webp)

*A Heading Animation widget Text Animation szakasza: a 2. stílus kiválasztva, előtag, három soros animált szöveg és utótag* (https://minta-bolt.hu/wp-admin/post.php?post=26&action=elementor)

A képen a **Style 2** csempe ki van választva, az **Animated Text** mezőben három kifejezés áll egymás alatt.

## Mit látsz az oldalon

Az oldalon egyszerre egy kifejezés látszik: az aktuális elhalványul, a következő a helyén megjelenik. Az előtag és az utótag végig a helyén marad.

![A forgó szöveg a nyilvános oldalon: egy kifejezés kiemelve az előtag és az utótag között](./kepek/szovegek-adatok-2-cim-forgo.webp)

*A forgó szöveg a nyilvános oldalon: egy kifejezés kiemelve az előtag és az utótag között* (https://minta-bolt.hu/tp-cim-forgo/)

A képen az előtag („Ez egy”) és az utótag („szöveg”) között a váltakozó kifejezés áll, háttérrel kiemelve.

## A hat animációs stílus

Az **Animation Style** hat képes csempéje közül választasz. Az **Import Presets** gomb a csempék felett kész, szerkeszthető dizájnt tölt be.

| Stílus | Mit látsz az oldalon |
| --- | --- |
| **Style 1** (gépelés) | A kifejezés betűnként törlődik, a következő betűnként íródik be |
| **Style 2** (forgás) | Az aktuális kifejezés elhalványul, a következő a helyére „esik” |
| **Style 3** (nagyítás) | A kifejezések elmosódással és méretváltással úsznak át egymásba |
| **Style 4** (aláhúzás) | A kifejezések cserélődnek, közben vékony sáv nő alattuk |
| **Style 5** (csúsztatás) | A következő kifejezés oldalról csúszik be a helyére |
| **Style 6** (betűcsere) | A betűk egyenként kicsinyednek és nagyodnak vissza |

## Gépelő (typewriter) hatás

A gépelő hatást az 1. stílus adja, ez az alapértelmezett.

1. Húzd a **Heading Animation** widgetet az oldalra, és hagyd az **Animation Style** értékét **Style 1**-en.
2. A **Prefix Text** mezőbe írd az állandó szavakat, például „Gyors ”.
3. Az **Animated Text** mezőbe írd a begépelendő kifejezéseket soronként.
4. A **Postfix Text** mezőbe írd a végén álló szöveget, majd frissítsd az oldalt.

![A Heading Animation widget panelje az 1. stílussal, előtaggal, három soros animált szöveggel és utótaggal](./kepek/szovegek-adatok-3-gepeles-panel.webp)

*A Heading Animation widget panelje az 1. stílussal, előtaggal, három soros animált szöveggel és utótaggal* (https://minta-bolt.hu/wp-admin/post.php?post=38&action=elementor)

A panelen az **Animation Style** első csempéje van kijelölve, az **Animated Text** mezőben három kifejezés áll.

![A gépelő hatás a nyilvános oldalon: az előtag és az utótag között a kifejezés betűnként íródik](./kepek/szovegek-adatok-3-gepeles.webp)

*A gépelő hatás a nyilvános oldalon: az előtag és az utótag között a kifejezés betűnként íródik* (https://minta-bolt.hu/tp-cim-gepeles/)

A képen az előtag („Gyors”) és az utótag („építünk.”) áll, a kifejezés a szürke háttérrel kiemelt blokkban íródik be.

Ha nem íródik be semmi, ellenőrizd, hogy az **Animation Style** a **Style 1**, és hogy a kifejezések az **Animated Text** mezőben vannak, soronként egy. A 2-6. stílus másképp mozog.

## Stílus és korlátok

- Az **On Scroll View Animation** a teljes widgetet animálja, ahogy a látótérbe görget az oldal.
- Az 1-5. stílusban az animált szó mögötti szürke blokk az **Animation Background Color**. Csak a 6. stílusnak nincs háttérblokkja.
- A 4. stílus aláhúzása alapbeállításnál átlátszó, és mindig az animált szöveg betűszínét (**Font Color**) használja. Állítsd be a **Stílus** fül **Animated Text** szakaszában a **Font Color** értékét, különben nem látszik az aláhúzás, és külön színe nem lehet.
- Ha szürke doboz van a szavak mögött, azt az **Animation Background Color** adja: állítsd a dizájnodhoz.

## Beállítások

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Animation Style** | Hat képes csempe, a hatás stílusa. A forgó hatás a **Style 2** | Style 1 |
| **Prefix Text** | A váltakozó rész előtti állandó szöveg | `This is ` |
| **Animated Text** | A váltakozó kifejezések, soronként egy | `Heading` |
| **Animated Text Tag** | A váltakozó rész HTML-címkéje | H1 |
| **Postfix Text** | A váltakozó rész utáni állandó szöveg | `Animation` |
| **Alignment** | A blokk igazítása | Középre |

## Stílus

A **Stílus** fülön a váltakozó szöveget az **Animated Text** résznél állíthatod: **Font Color** (betűszín), **Typography** (tipográfia) és **Animation Background Color** (az animált szöveg háttérszíne, alapértéke szürke). Az előtag és az utótag színe külön szakaszban állítható.