# Sorháttér widget: szegmentált háttér és háttérváltás görgetéskor

> A Sorháttér widget Képszegmentálás és Háttéranimáció görgetéskor opciója: 3D-ben mozgó képdarabok, illetve az egész oldal mögötti háttér, amely szakaszonként vált.

A **Sorháttér** (Row Background) widget további két opciója a **Képszegmentálás**, amely a képet mozgó darabokra vágja, és a **Háttéranimáció görgetéskor**, amely az egész oldal mögötti hátteret váltja, ahogy a látogató görget. Az opciót mindig a **Tartalom → Mély réteg → Válaszd ki az opciót** listából választod. A videó- és diavetítés-opciókról a [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/) fejezet szól.

A widget a Pro bővítmény része.

## Mielőtt elkezdesz

- Kapcsold be a **Row Background** widgetet a **The Plus Addons → Widgets** oldalon.
- Húzd a widgetet abba a tárolóba (vagy klasszikus szakaszba), amelyik a hátteret kapja. A widget maga semmit nem rajzol, a háttér a tárolót tölti ki.

## Szegmentált háttér

A szegmentált háttér a képet darabokra vágja, amelyek 3D-ben mozognak, amikor a látogató rámutat a szakaszra. Hat kész szegmentálás és egy egyéni elrendezés közül választhatsz, kép vagy szín hátterekhez.

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 **Képszegmentálás** elemet.
3. A **Háttér** értéke legyen **Kép**, és a **Kép feltöltése** mezőben válaszd ki a képet. Ha színt szeretnél, válaszd a **Folytonos szín** elemet.
4. Az **Elrendezés stílusa** listából válassz **Stílus 1** és **Stílus 6** között, vagy **Egyéni** értéket, ha te magad helyeznéd el a szegmenseket.
5. **Egyéni** elrendezésnél vegyél fel szegmenseket a **Szegmensek száma pozíciónként** listában, és állítsd be a **Szegmensek darabszámát**, az **Egér rámutatásakor megjelenő parallax effektet**, az átlátszatlanságot, az árnyékokat és az animáció időzítését.

![A Képszegmentálás beállításai: háttér, feltöltött kép, elrendezés stílusa és dobozárnyék](./kepek/kepek-media-hatter-panel-szegmens.webp)

*A Képszegmentálás beállításai: háttér, feltöltött kép, elrendezés stílusa és dobozárnyék* (https://minta-bolt.hu/wp-admin/post.php?post=237&action=elementor)

![A kép átfedő szegmensekre bontva a szakaszon, rámutatás után](./kepek/kepek-media-hatter-szegmens.webp)

*A kép átfedő szegmensekre bontva a szakaszon, rámutatás után* (https://minta-bolt.hu/km7-hatter-szegmens/)

- A szegmensek az oldal betöltése után nagyjából két másodperccel épülnek fel.
- Amikor az egérmutató a tároló fölé ér, a szegmensek megmozdulnak. A vizsgálatban a **Stílus 1** 9, a **Stílus 2** 4 szegmenst adott.
- A kész stílusokhoz saját szegmensszám, időzítés és parallax tartozik. Az **Egyéni** beállítások csak az **Egyéni** elrendezésre érvényesek.

**Korlátozás:** a **Háttér** **Színátmenet színe** értéke nem működik: a szegmensek üresek maradnak, és csak egy sima színátmenet látszik. Használj **Képet** vagy **Folytonos színt**.

**Hibaelhárítás.** Ha sima színátmenetet látsz szegmensek nélkül, a **Háttér** legyen **Kép**. Ha rámutatásra semmi nem mozdul, várj pár másodpercet az oldal betöltése után, és mozgasd újra az egeret a tároló fölött.

## Háttérváltás görgetéskor

Egy hosszú oldal részei kaphatnak saját hangulatot, ha a háttér görgetés közben vált. A **Sorháttér** az egész oldal mögé tesz egy hátteret, és a következő színre vagy képre vált, amikor a következő szakasz a képernyőre ér.

Az oldalon több felső szintű tárolóra van szükség, minden háttérváltáshoz egyre.

1. Add hozzá a **Sorháttér** widgetet az oldal első tárolójához, és nyisd meg a **Tartalom → Mély réteg** szakaszt.
2. A **Válaszd ki az opciót** listában válaszd a **Háttéranimáció görgetéskor** elemet.
3. A **Több szín kiválasztása** listában minden elemhez adj egy **Színt** vagy egy **Kép kiválasztása** értéket. Az 1. elem az első szakaszhoz tartozik, a 2. a másodikhoz, és így tovább.
4. A **Változás görgetéskor** maradjon **Közvetlen színváltási effektus** értéken, és állítsd be az **Átmenet időtartamát** (alapérték 0,7 másodperc).

![A Háttéranimáció görgetéskor: az oldal második szakasza a piros háttérrel](./kepek/kepek-media-hatter-gorgetes.webp)

*A Háttéranimáció görgetéskor: az oldal második szakasza a piros háttérrel* (https://minta-bolt.hu/km7-hatter-gorgetes/)

- A háttér az egész oldal mögött rögzített, nem csak a widgetet tartalmazó tároló mögött.
- A vizsgálatban három színnel és három szakasszal a háttér az oldal tetején az 1. színt mutatta, a második szakasz láttán a 2.-ra, a harmadiknál a 3.-ra váltott. Visszagörgetéskor visszaváltott.
- A képelemek ugyanígy váltanak.
- Ha az oldalon több szakasz van, mint amennyi elemet felvettél, a felesleges szakaszok az első elem hátterét mutatták, nem folytatták a listát. Vegyél fel szakaszonként egy elemet.

**Korlátozások:**

- A **Színátmenetszerű effektus** nem keveredett simán: a háttér az oldal tetején feketén indult, görgetés közben pedig ugrált a színek között. Használd a **Közvetlen színváltási effektust**.
- A **Színátmenetszerű effektus** figyelmen kívül hagyja a képelemeket: csak képekkel a háttér üres maradt.

**Hibaelhárítás.** Ha a háttér nem vált, ellenőrizd, hogy az oldalon több felső szintű tároló van, és a widget **Háttéranimáció görgetéskor** opcióval, **Közvetlen színváltási effektussal** működik. Ha az utolsó szakaszok az első színt mutatják, vegyél fel egy elemet szakaszonként a **Több szín kiválasztása** listában.