# Háttér létrehozása

> A háttértípusok: klasszikus, színátmenet, videó és diavetítés, és a hozzájuk tartozó beállítások.

Az elemek háttere többféle lehet, de nem mindegyik típus érhető el minden elemhez:

- **Klasszikus:** egyszínű háttér vagy kép.
- **Színátmenet:** két szín egymásba olvadása.
- **Videó:** egy videóklip a háttérben.
- **Diavetítés:** képek sorozata.

A háttér beállításai a **Haladó** fül **Háttér** szekciójában vannak (konténernél a **Stílus** fülön). Ha kiválasztottad a típust, a **Rámutatás** fülön külön hatást is megadhatsz, amely akkor érvényesül, amikor a látogató az egérrel az elem fölé mutat.

## Klasszikus

![A klasszikus háttér: szín és kép](./kepek/stilus-hatter-klasszikus.webp)

*A klasszikus háttér: szín és kép* (https://minta-bolt.hu/wp-admin/post.php?post=24&action=elementor)

A klasszikus háttér egyetlen szín vagy kép. A színt a színválasztóból választod, vagy a földgömb ikonnal globális színt használsz (lásd: [Szín kiválasztása](https://hub.hellowp.io/hu/plugins/elementor/stilus-szinvalasztas/)). Képhez kattints a **Kép** mezőre, és válaszd ki a képet a médiatárból (lásd: [Képek és ikonok hozzáadása](https://hub.hellowp.io/hu/plugins/elementor/stilus-kepek-es-ikonok/)). Ezután megjelennek a képbeállítások.

- Különböző eszközökre más-más méretű háttérképet is megadhatsz a reszponzív szerkesztéssel.
- A háttérkép reagálhat a látogató görgetésére is: függőleges, vízszintes, átlátszósági, elmosási és méretezési görgetési hatással. Megadhatod, mely eszközökön működjön a hatás, és azt is, hogy az egész oldalhoz vagy csak a látható részhez képest számítson.
- Egérhatásokkal a háttér az egér mozgására is reagál.

## Színátmenet

![A színátmenet beállításai](./kepek/stilus-hatter-szinatmenet.webp)

*A színátmenet beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=24&action=elementor)

A színátmenet két színt kever egymásba. A beállítások:

| Beállítás | Mit csinál |
|---|---|
| **Szín** és **Második szín** | A két szín. Színválasztóval vagy globális színnel adhatod meg. |
| **Helyzet** | Hol kezd el halványulni az adott szín (%). Alapból az első szín 0, a második 100. Ilyenkor az első szín az elem tetején a legerősebb, és nagyjából félúton halványul el, a második pedig az aljáról indul. |
| **Típus** | **Lineáris** vagy **Sugaras**. |
| **Szög** | Lineáris típusnál az átmenet iránya. Az alapérték 180: a színeket egy vízszintes vonal osztja el. |
| **Pozíció** | Sugaras típusnál az a pont, ahonnan az első szín kiindulva szétsugárzik az elem közepétől. |

A panel figyelmeztet, hogy a színátmenet a különböző képernyőméreteken is jól nézzen ki: állítsd be a pozíciókat és a szöget minden töréspontnál.

Színátmenetnél is használhatsz függőleges, vízszintes, átlátszósági, elmosási és méretezési görgetési hatást.

### Színátmenet készítése lépésről lépésre

A színátmenetet vizuálisan, CSS nélkül is elkészítheted:

1. Adj hozzá egy konténert (vagy szakaszt), és húzz bele egy widgetet.
2. Jelöld ki a konténert, és nyisd meg a **Stílus** fület, majd a **Háttér** részt.
3. A **Háttér típusa** mezőben kattints a színátmenet ikonjára.
4. Állítsd be a **Szín**, **Helyzet**, **Második szín**, **Helyzet**, **Típus** és **Szög** mezőket a fenti táblázat szerint.

### Színátmenet gombnak

A színátmenet gomboknak is jól áll: ugyanúgy készíted el, mint bármely elem hátterét. Jelöld ki a **Gomb** widgetet, nyisd meg a **Stílus** fület, és a háttér típusát állítsd színátmenetre. A két szín, a helyzet, a típus és a szög beállításait a fenti táblázat írja le. A színátmenet sima átmenet egyik színből a másikba, így egyetlen tömör szín helyett több színt kevernek egymásba, és látványos hatást érsz el.

A V4 elemek színátmenetéről a [Háttér a Stílus fülön](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-hatter/) fejezet szól.

### Háttérkép cseréje

**Konténer vagy szakasz hátterének cseréje:**

1. Jelöld ki a konténert vagy szakaszt, és nyisd meg a **Stílus** fület.
2. A **Háttér** részben a **Háttér típusa** legyen **Klasszikus**.
3. A **Kép** alatt kattints a + jelre, és válaszd ki a képet.

**Az egész oldal hátterének cseréje:**

1. A felső sávban kattints az **Oldal beállításai** ikonra.
2. Nyisd meg a **Stílus** fület.
3. A **Háttér típusa** mellett kattints az ecset ikonra (klasszikus háttér).
4. A **Kép** alatt kattints a + jelre, és válaszd ki a képet.

![Az Oldal beállításai panel Stílus füle a Háttér típusa mezővel](./kepek/stilus-oldal-hatter.webp)

*Az Oldal beállításai panel Stílus füle a Háttér típusa mezővel* (https://minta-bolt.hu/wp-admin/post.php?post=24&action=elementor)

A képen a **Törzs stílusa** szekció látszik: a **Háttér típusa** mezőben a klasszikus (ecset) és a színátmenet ikonja közül választhatsz.

## Videó

A videóháttér jó módszer arra, hogy felkeltsd a látogatók figyelmét. A beállításai:

- **Kezdési idő** és **Befejezési idő:** gyakran nem kell az egész klip, elég egy rövid része. Itt jelölöd ki.
- **Egyszeri lejátszás:** a videó csak egyszer fut le.
- **Lejátszás mobilon:** a mobilon böngészők sávszélessége és adatkerete korlátozott lehet. Ha kikapcsolod, a videó nem töltődik be ezeken az eszközökön, így gyorsabb az oldal, és kisebb az adatforgalom.
- **Adatvédelmi mód:** ha a háttérvideó YouTube-on van, a YouTube akkor is követi a felhasználó adatait, ha a videó nem indul el. Ezzel a kapcsolóval megakadályozhatod az adatgyűjtést.
- **Háttér tartalék:** egy kép, amely megjelenik, ha a videó nem tölt be.

További részletek: [Háttérvideó szakaszhoz és konténerhez](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-hatterviedeo/).

## Diavetítés

A diavetítés is mozgóvá teszi az oldalt. A beállításai:

- **Képek:** a diavetítés képeit itt választod ki.
- **Végtelen ismétlés:** ha kikapcsolod, a diavetítés csak egyszer fut le, és az utolsó kép marad a háttér.
- **Időtartam:** az egész diavetítés hossza ezredmásodpercben.
- **Átmenet időtartama:** két dia váltásának ideje, szintén ezredmásodpercben.
- **Háttér mérete** és **Háttér pozíciója:** a háttérkép méretét és helyét adja meg.
- **Lusta betöltés:** a képek csak akkor töltődnek be, amikor szükség van rájuk.
- **Ken Burns effektus:** a kép ráközelít, és közben pásztáz. A kapcsolóval kapcsolhatod be.

## Rétegzett háttér

A rétegzett háttér mélységet ad az elemnek: színeket, képeket és szöveget helyezel egymásra. A [Rétegzett háttér készítése](https://hub.hellowp.io/hu/plugins/elementor/stilus-retegelt-hatter/) fejezetben egy lépésről lépésre példát találsz.