# Sorháttér widget: áttekintés, rétegek és fedőréteg

> A Sorháttér widget három rétege (Mély, Középső, Felső), a widget bekapcsolása, a fedőréteg (szín, színátmenet, textúra) és a túlcsordulás elrejtése.

A **Sorháttér** (Row Background) widget egy tároló vagy klasszikus szakasz mögé tesz összetett hátteret. Egy widgetben akár három réteget is egymásra építhetsz: például egy fényképet, rajta mozgó részecskéket, fölötte pedig egy sötét fedvényt. Így mélységet adsz a szakasznak, és nem kell plusz widgetet tenned a tartalmad fölé.

A widget a Pro bővítmény része. Ha csak az ingyenes bővítmény aktív, a **Sorháttér** zárolt csempeként látszik az Elementor paneljén, rákattintva figyelmeztetést kapsz, a vele készült oldalon pedig nem jelenik meg háttér, amíg a Pro újra nem aktív.

## A widget bekapcsolása

1. Nyisd meg a **The Plus Addons → Widgets** oldalt a WordPress vezérlőpultján.
2. Keresd meg a **Row Background** widgetet (PRO jelzés van rajta), és kapcsold be a kapcsolóját.

## Hogyan működik

1. Húzd a **Sorháttér** widgetet bárhová abba a tárolóba (vagy szakaszba), amelyik a hátteret kapja.
2. A **Tartalom** lapon válassz réteget a **Mély réteg**, a **Középső réteg** és/vagy a **Felső réteg** szakaszban. Használhatsz egy réteget, de mindhármat is.
3. Mentsd és nézd meg az oldalt. A widget maga nem foglal helyet: a rétegek kitöltik a teljes tárolót, a többi widgeted mögött.

![A három réteggel készült háttér: háttérkép, mozgó részecskék és sötét fedvény egy tárolóban](./kepek/kepek-media-hatter-attekintes-harom-reteg.webp)

*A három réteggel készült háttér: háttérkép, mozgó részecskék és sötét fedvény egy tárolóban* (https://minta-bolt.hu/h8-attekintes/)

A képen a tájkép a **Mély réteg**, a vékony vonalakkal összekötött pontok a **Középső réteg** részecskéi, a sötét árnyalat pedig a **Felső réteg** fedvénye. A cím a rétegek fölött marad.

- Az oldalon a rétegek a widgetet tartalmazó tárolóba kerülnek, és teljesen kitöltik azt. Ez klasszikus szakaszban és belső tárolóban is működik (belső tárolónál a háttér csak azt a belső tárolót tölti ki).
- A rétegek sorrendje alulról felfelé: **Mély réteg**, **Középső réteg**, **Felső réteg**. A widgeteid mind a három fölött vannak.
- Ahol a **Válaszd ki az opciót** listát nem állítod át, ott a réteg nem ad hozzá semmit, ezért bármelyik réteget önmagában is használhatod.

## Mély réteg

A **Mély réteg** az alsó réteg. A típusát a **Válaszd ki az opciót** listából választod.

| Opció | Mit hoz létre |
|---|---|
| **Folytonos szín** | Egyetlen szín, választható lekerekítéssel. |
| **Színátmenet színe** | Lineáris vagy radiális színátmenet. |
| **Animált háttérszín** | Több szín között áttűnő háttér. |
| **Kreatív háttérkép** | Kép, amelyhez automatikus mozgás, egeres dőlés, görgetéses parallax, Mágikus görgetés vagy Ken-Burns-effektus tartozik. |
| **Kreatív háttérvideó** | Saját, YouTube- vagy Vimeo-videó. |
| **Kreatív háttérgaléria** | Képek diavetítése. |
| **Képszegmentálás** | Szegmensekre vágott kép vagy szín, amely rámutatásra mozog. |
| **Színátmenet animálása** | Mozgó, többszínű színátmenet. |
| **Háttéranimáció görgetéskor** | Az oldal hátterét görgetés közben színről színre vagy képről képre váltja. |
| **Carousel-háttér** | A carousel, a fülek vagy a harmonika állapotát követő háttér. |

A részleteket az alábbi fejezetek írják le:

- színek és színátmenetek: [Sorháttér widget: színek és színátmenetek](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-hatter-szinek/)
- kép, parallax, mozgó képek: [Sorháttér widget: háttérkép, parallax és mozgó képek](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-hatter-kep-effektek/)
- videó és diavetítés: [Sorháttér widget: háttérvideó és háttér-diavetítés](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-hatter-video-diavetites/)
- szegmentált háttér és görgetéses váltás: [Sorháttér widget: szegmentált háttér és háttérváltás görgetéskor](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-hatter-szegmens-gorgetes/)
- carousel-háttér: [Sorháttér widget: carousel-háttér](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-hatter-karusszel/)

## Középső réteg

A **Középső réteg** a **Mély réteg** fölött van. A **Válaszd ki az opciót** listában hat elem található.

| Opció | Mit hoz létre |
|---|---|
| **Canvas-effektus** | Animált részecskék (**Stílus 1** és **Stílus 8** között, vagy saját JSON). |
| **Modern, egérrel történő rámutatáskor aktiválódó parallaxis** | A háttérre helyezett képek, amelyek az egérrel együtt elmozdulnak. |
| **Automatikusan mozgó réteg** | Saját magától, megadott irányba gördülő képek. |
| **Modern képeffektus** | Képek **Pulzálás**, **Lebegtetés**, **Dobálás** vagy **Forgó** animációval és választható Mágikus görgetéssel. |
| **Többrétegű parallaxis** | Teljes méretű képrétegek, amelyek a Mágikus görgetéssel mozognak. |
| **Animált SVG (hamarosan)** | Még nem használható: kiválasztva nem ad hozzá semmit. |

A részecskékről a [Sorháttér widget: részecskék](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-hatter-reszecskek/), a mozgó és görgetésre mozduló képekről a [Sorháttér widget: háttérkép, parallax és mozgó képek](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-hatter-kep-effektek/) fejezet szól.

## Felső réteg és fedvény

A **Felső réteg** a másik két réteget takarja, ezért fedvényként használható: például elsötétíti vagy mintázattal látja el a hátteret, hogy a rajta lévő szöveg olvashatóbb legyen. Ha a fedvény színe teljesen átlátszatlan, mindent eltakar alatta, ezért használj átlátszó színt, vagy csökkentsd a textúra átlátszatlanságát.

1. Állíts be hátteret a **Mély réteg** vagy a **Középső réteg** szakaszban (vagy mindkettőben).
2. Nyisd meg a **Felső réteg** szakaszt, és a **Válaszd ki az opciót** listában válaszd a **Textúrakép** elemet.
3. Válaszd ki a **Textúrakép** mezőben a mintát, és csökkentsd az **Átlátszatlanság** értékét, amíg a háttér átlátszik rajta.
4. Színes fedvényhez válaszd inkább a **Folytonos szín** vagy a **Színátmenet színe** elemet, és átlátszó (alfa-csatornás) színeket adj meg.

![Textúrás fedvény a háttérkép fölött, 0,4 átlátszatlansággal](./kepek/kepek-media-hatter-textura-fedoreteg.webp)

*Textúrás fedvény a háttérkép fölött, 0,4 átlátszatlansággal* (https://minta-bolt.hu/h8-fedoreteg/)

A képen a vízszintes vonalas textúra látszik a tájkép fölött: a háttér átüt rajta, a cím pedig jól olvasható marad.

| Opció | Beállítások | Alapérték |
|---|---|---|
| **Folytonos szín** | **Fedvény színe** | nincs |
| **Színátmenet színe** | **Szín 1**, **Szín 2**, a helyük, **Színátmenet stílusa**, **Színátmenet szöge** vagy **Pozíció** | narancs és ciánkék, **Lineáris** |
| **Textúrakép** | **Textúrakép**, **Átlátszatlanság** (0 és 1 között) | 0,8 |

- A fedvény az egész tárolót lefedi, a **Mély réteg** és a **Középső réteg** fölött, de a te widgeteid alatt van.
- A textúrakép ismétlődve tölti ki a tárolót.
- A folytonos és a színátmenetes fedvénynek nincs átlátszatlanság-beállítása: az átlátszóságot a kiválasztott szín adja.

## Extra: túlcsordulás elrejtése

Az **Extra** szakaszban a **Túlcsordulás elrejtése a szakaszban** kapcsolóval levágod azt, ami kilóg a tárolóból, például a mozgó vagy parallax képeket. Csak a megjelenő oldalon hat, a szerkesztő továbbra is a megszokott elrendezést mutatja.

## Korlátozások

- Egy tárolóba egy **Sorháttér** widgetet tegyél. Ha ugyanabban a tárolóban kettő van, csak az utolsó rétegei maradnak meg. Minden réteget egyetlen widgetben állíts be.
- A **Felső réteg** teljesen átlátszatlan színnel eltakarja a többi réteget.
- Az **Animált SVG (hamarosan)** elem kiválasztható, de még nem csinál semmit.

## Hibaelhárítás

**A háttér nem látszik az oldalon.** Ellenőrizd, hogy a Pro bővítmény aktív-e, hogy a **Row Background** be van-e kapcsolva a **The Plus Addons → Widgets** oldalon, és hogy a widget abban a tárolóban van-e, amelyiket formázni akarod.

**Csak az egyik háttér jelenik meg.** Valószínűleg két **Sorháttér** widget van ugyanabban a tárolóban. Töröld az egyiket, és a megmaradóban állítsd be az összes réteget.

**A fedvény után eltűnt a háttér.** Csökkentsd a textúra **Átlátszatlanság** értékét, vagy a **Folytonos szín** és a **Színátmenet színe** fedvényhez átlátszó színt válassz.