# Sorháttér widget: színek és színátmenetek

> Színátmenetes háttér, mozgó többszínű színátmenet (akár a teljes oldal mögött) és színről színre áttűnő háttér a Sorháttér widgettel.

A **Sorháttér** widget a **Mély réteg** szakaszban három színes hátteret kínál: egy kétszínű színátmenetet, egy mozgó, többszínű színátmenetet és egy színről színre áttűnő hátteret. A widgetet abba a tárolóba (vagy klasszikus szakaszba) kell tenned, amelyik a hátteret kapja; a bekapcsolását és a rétegeket az [áttekintő fejezet](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-hatter-attekintes/) írja le. A widget a Pro bővítmény része.

## Színátmenetes háttér

A színátmenet két színt olvaszt egybe a szakaszon, ezért kevésbé lapos, mint az egyszínű háttér. A **Sorháttér** lineáris vagy radiális színátmenetet ad a tárolónak.

1. A **Sorháttér** widgeten nyisd meg a **Tartalom → Mély réteg** szakaszt.
2. A **Válaszd ki az opciót** listában válaszd a **Színátmenet színe** elemet.
3. Válaszd ki a **Szín 1** és a **Szín 2** értékét, majd az **1. szín helye** és a **2. szín helye** csúszkával állítsd be, hol áll meg az egyes szín.
4. A **Színátmenet stílusa** lehet **Lineáris** (ekkor a **Színátmenet szöge** számít) vagy **Radiális** (ekkor a **Pozíció** adja meg, honnan indul a színátmenet).

![A tároló háttere kékről pirosra váltó lineáris színátmenet, 90 fokos szöggel](./kepek/kepek-media-hatter-szinatmenet.webp)

*A tároló háttere kékről pirosra váltó lineáris színátmenet, 90 fokos szöggel* (https://minta-bolt.hu/h8-atmenet/)

A képen a 90 fokos lineáris színátmenet a bal oldali **Szín 1** (kék) és a jobb oldali **Szín 2** (piros) között fut.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Szín 1** és **Szín 2** | A színátmenet két színe. | narancs és ciánkék |
| **1. szín helye** és **2. szín helye** | Hol áll meg az egyes szín, százalékban. | nincs |
| **Színátmenet stílusa** | **Lineáris** vagy **Radiális**. | **Lineáris** |
| **Színátmenet szöge** | A lineáris színátmenet iránya. | 180 fok |
| **Pozíció** | A radiális színátmenet kiindulópontja. | Közép |

- A színátmenet az egész tárolót kitölti a widgetek mögött. A 90 fokos lineáris színátmenet balról jobbra futott a **Szín 1**-től a **Szín 2**-ig.
- A bal felső pozíciójú radiális színátmenet a bal felső sarokból indult.
- A **Felső réteg** is tartalmaz **Színátmenet színe** opciót ugyanezekkel a beállításokkal. Az a többi réteg fölött van, ezért ott átlátszó színeket használj, ha azt szeretnéd, hogy az alatta lévők látsszanak.

**Korlátozás:** a színátmenet pontosan két színt használ. Mozgó, több színből álló színátmenethez a **Színátmenet animálása** opciót használd.

**Hibaelhárítás.** Ha a **Színátmenet szögének** változtatása nem hat, annak az az oka, hogy a szög csak a **Lineáris** színátmenetre vonatkozik. **Radiális** színátmenetnél a **Pozíciót** állítsd.

## Mozgó színátmenet

A mozgó színátmenet lassan áthúzza a színeit a háttéren, ami jól mutat nyitóképernyők mögött. A **Sorháttér** a megadott színekből építi fel a színátmenetet, és mozgásban tartja, vagy egy tárolón belül, vagy a teljes oldal mögött.

1. A **Sorháttér** widgeten nyisd meg a **Tartalom → Mély réteg** szakaszt.
2. A **Válaszd ki az opciót** listában válaszd a **Színátmenet animálása** elemet.
3. A **Több szín kiválasztása** listában minden elemhez adj meg egy **Színt**. Az **Elem hozzáadása** gombbal vegyél fel újabb színeket.
4. Állítsd be az **Animáció időtartamát** (1 és 30 másodperc között, alapérték 15) és a **Színátmenet forgatásának animálását** (a színátmenet szöge, alapérték 120).
5. Ha a teljes oldalt be szeretnéd fedni, kapcsold be a **Teljes oldalas háttér** kapcsolót, és a **Pozíció** legyen **Relatív**.

![Mozgó színátmenet a tárolóban: a kék, piros, zöld és lila színek elsodródnak egymáson](./kepek/kepek-media-hatter-mozgo-szinatmenet.webp)

*Mozgó színátmenet a tárolóban: a kék, piros, zöld és lila színek elsodródnak egymáson* (https://minta-bolt.hu/h8-anim-atmenet/)

A képen a színátmenet egy pillanatfelvétele látszik: a színek az animáció során folyamatosan továbbhaladnak.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Több szín kiválasztása** | A színátmenet színei sorrendben. | 3 szín |
| **Animáció időtartama** | Egy animációs ciklus hossza, másodpercben. | 15 |
| **Színátmenet forgatásának animálása** | A színátmenet szöge fokban. | 120 |
| **Teljes oldalas háttér** | A színátmenetet nem a tároló, hanem az egész oldal mögé teszi. | Ki |
| **Pozíció** | **Örökölt** vagy **Relatív**. Teljes oldalas háttérhez a **Relatív** való. | **Örökölt** |

- A színátmenet a tárolónál jóval nagyobb, és oda-vissza csúszik, ezért a színek áthúznak rajta. Négy színnel és 4 másodperces időtartammal a mozgás jól látszott.
- A **Teljes oldalas háttér** bekapcsolva a színátmenet az egész oldal mögé kerül, nem csak a tároló mögé. A panel ehhez az Elementor Canvas oldalelrendezést ajánlja.

**Korlátozás:** a **Teljes oldalas háttér** és az **Örökölt** pozíció együtt a színátmenet csak az oldal első képernyőjét fedte (egy 1800 pixeles oldal első 900 pixelét). Állítsd a **Pozíciót** **Relatívra**, hogy az egész oldalt befedje.

**Hibaelhárítás.**

- *A teljes oldalas színátmenet az oldal felénél véget ér.* Állítsd a **Pozíciót** **Relatívra**.
- *A színátmenet túl lassan mozog.* Csökkentsd az **Animáció időtartamát**.

## Színváltó háttér

A lassan színről színre váltó háttér magára vonja a figyelmet, és nem kell hozzá semmilyen extra tartalom. A **Sorháttér** a tároló hátterét egy színlistán át áttűnteti, újra és újra.

1. A **Sorháttér** widgeten nyisd meg a **Tartalom → Mély réteg** szakaszt.
2. A **Válaszd ki az opciót** listában válaszd az **Animált háttérszín** elemet.
3. A **Több szín kiválasztása** listában nyisd ki az elemeket, és mindegyiknél válaszd ki a **Színt**. Három elem már alapból van, az **Elem hozzáadása** gombbal többet is felvehetsz.
4. Add meg az **Animáció időtartamát** ezredmásodpercben (alapérték 3000).

![A színváltó háttér az egyik színállapotában](./kepek/kepek-media-hatter-szinvalto.webp)

*A színváltó háttér az egyik színállapotában* (https://minta-bolt.hu/h8-anim-szin/)

A képen a háttér a zöld, kék és lila színek közül éppen az egyiknél jár: a szín folyamatosan továbbváltozik.

- A háttér az első színnel indul, áttűnik a következőre, majd azután a következőre, és az utolsó után újrakezdi.
- Az **Animáció időtartama** azt adja meg, hogy milyen gyakran indul a következő színre váltás. Maga az áttűnés mindig nagyjából három másodpercig tart, ezért 3000 alatti értéknél (2000-rel próbálva) a színek folyamatosan keverednek, és egyik szín sem áll meg.
- A **Kép kiválasztása** mező az elemekben ennél az opciónál nem használt: a **Háttéranimáció görgetéskor** opcióhoz tartozik.

**Korlátozások:**

- Az áttűnés hossza nem módosítható, csak a színváltások közötti idő.
- A színek tömör kitöltésként váltanak. Mozgó, többszínű színátmenethez a **Színátmenet animálása** opciót használd.

**Hibaelhárítás.** Ha a háttér sosem mutat tiszta színt, állítsd az **Animáció időtartamát** 3000 fölé, például 5000-re, hogy minden színnek legyen ideje teljesen átúszni.