# Hatások a Stílus fülön (V4)

> Dobozárnyék, átlátszatlanság, szűrők, háttérszűrők, átalakítás, átmenet és keverési mód az atomikus elemeken.

A **Hatások** szekcióval mélységet adhatsz az elemnek, átlátszóvá teheted, elmoshatod, elforgathatod, és megadhatod, hogyan változzon az elem, amikor a látogató fölé viszi az egeret. A szekció a V4 (atomikus) elemek **Stílus** fülén van. A V3 elemek hasonló beállításai a **Haladó** fülön találhatók, lásd: [A Haladó fül beállításai](https://hub.hellowp.io/hu/plugins/elementor/stilus-halado-ful/).

## A szekció felépítése

1. Nyisd meg az oldalt az Elementor szerkesztőben, és jelölj ki egy atomikus elemet.
2. Kattints a **Stílus** fülre.
3. Nyisd ki a **Hatások** szekciót.

![A Hatások szekció a Stílus fülön: Keverési mód, Átlátszatlanság, Dobozárnyék, Átalakítás, Átmenetek, Szűrők, Háttérszűrők, mindegyik hozzáadott tétellel](./kepek/stilus-hatasok-szekcio.webp)

*A Hatások szekció a Stílus fülön: Keverési mód, Átlátszatlanság, Dobozárnyék, Átalakítás, Átmenetek, Szűrők, Háttérszűrők, mindegyik hozzáadott tétellel* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

A szekcióban ezeket találod:

| Beállítás | Mit csinál |
|---|---|
| **Keverési mód** | Az egymásra rakott elemek összekeverése. |
| **Átlátszatlanság** | Az elem átlátszósága százalékban. |
| **Dobozárnyék** | Árnyék az elem doboza körül, több réteggel is. |
| **Átalakítás** | Áthelyezés, méretezés, forgatás és ferdítés. |
| **Átmenetek** | Az elem két állapota közötti váltás időtartama. |
| **Szűrők** | Grafikai hatások az elemre, például elmosás vagy szürkeárnyalat. |
| **Háttérszűrők** | Ugyanezek a hatások, de az elem mögötti tartalomra. |

A tételek a + jellel adhatók hozzá. Ha egy hatás hozzá van adva, a címe mellett kis jelölő látszik, alatta pedig a tétel összefoglaló sora. Egy tétel törléséhez vidd az egeret a sorra, és kattints az X ikonra.

## Dobozárnyék

A dobozárnyék mélységet ad az elemnek, és kiemeli az oldalból. Az árnyékokról általánosabban az [Árnyék, szövegárnyék és dobozárnyék](https://hub.hellowp.io/hu/plugins/elementor/stilus-arnyek/) fejezet szól.

1. A **Hatások** szekcióban kattints a **Dobozárnyék** melletti + jelre.
2. A felugró ablakban állítsd be az árnyékot.
3. Kattints az ablakon kívülre, hogy bezáródjon.

![A Dobozárnyék felugró ablaka: Szín, Pozíció, Vízszintes, Függőleges, Elmosás, Kiterjedés](./kepek/stilus-hatasok-dobozarnyek.webp)

*A Dobozárnyék felugró ablaka: Szín, Pozíció, Vízszintes, Függőleges, Elmosás, Kiterjedés* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

Az ablak beállításai:

| Beállítás | Mit csinál |
|---|---|
| **Szín** | Az árnyék színe. A színválasztóról a [Szín kiválasztása](https://hub.hellowp.io/hu/plugins/elementor/stilus-szinvalasztas/) fejezet szól. |
| **Pozíció** | **Kiemelkedő**: az árnyék az elem szélétől kifelé terjed. **Süllyesztett**: az árnyék az elem szélétől befelé terjed. |
| **Vízszintes** | Az árnyék eltolása jobbra (pozitív érték) vagy balra (negatív érték). |
| **Függőleges** | Az árnyék eltolása lefelé vagy felfelé. |
| **Elmosás** | Mennyire legyen elmosva az árnyék széle. Nagyobb érték nagyobb, lágyabb sávot ad. |
| **Kiterjedés** | Mennyivel nőjön az árnyék tömör színű területe. |

Az árnyék úgy készül, hogy egy tömör színű alakzat szélét fokozatosan elmossa a program: az **Elmosás** a mosott sáv szélességét, a **Kiterjedés** a tömör rész méretét növeli.

### Több réteg

Egy árnyékhoz további rétegeket is adhatsz, így mélyebb vagy különlegesebb hatást érhetsz el.

1. Jelölj ki egy olyan elemet, amelyiken már van dobozárnyék, és nyisd ki a **Hatások** szekciót.
2. Kattints a **Dobozárnyék** melletti + jelre. Megjelenik az új réteg beállító ablaka.
3. Állítsd be a réteget, majd kattints az ablakon kívülre. Ezzel egy második árnyékréteget hoztál létre.

## Átlátszatlanság

Az átlátszatlanság azt adja meg, mennyire látszik át az elemen a háttér. Minél kisebb az érték, annál átlátszóbb az elem.

1. Jelölj ki egy elemet a vásznon, és kattints a **Stílus** fülre.
2. Nyisd ki a **Hatások** szekciót.
3. Írj egy százalékos értéket az **Átlátszatlanság** mezőbe. Például 40 esetén az elem 40 százalékban átlátszatlan, a többi áttetsző.

## Szűrők

A szűrők grafikai hatások, amelyeket az atomikus elemekre alkalmazhatsz. A szűrők a következők:

| Szűrő | Mit csinál |
|---|---|
| Elmosás | Lágy fókuszt ad az elemnek, a sugarat képpontban adhatod meg. |
| Fényerő | Az elem világosságát módosítja. |
| Kontraszt | Növeli vagy csökkenti a színek közti kontrasztot. |
| Színárnyalat elforgatása | A színeket a színkörön elforgatja. |
| Telítettség | A színek erősségét növeli vagy csökkenti. |
| Szürkeárnyalatos | Az elem színeit szürke árnyalatokra cseréli, százalékos értékkel. |
| Invertálás | A világos színek sötétek lesznek, a sötétek világosak. |
| Szépia | Barnás tónust ad, mintha régi fénykép lenne. |
| Vetett árnyék | Árnyékot ad, de csak az elem tartalmának, nem a dobozának. |

Szűrő hozzáadása:

1. Jelölj ki egy elemet a vásznon, és kattints a **Stílus** fülre.
2. Nyisd ki a **Hatások** szekciót.
3. Kattints a **Szűrők** melletti + jelre.
4. A **Szűrés** legördülő listából válaszd ki a hatást. Alapértelmezetten az **Elmosás** a kiválasztott.
5. Töltsd ki a szűrő beállításait. Minden szűrőnek saját beállításai vannak, az elmosásnál például a **Sugár**.

![A Szűrők felugró ablaka: Szűrés és Sugár](./kepek/stilus-hatasok-szuro.webp)

*A Szűrők felugró ablaka: Szűrés és Sugár* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

Egy elemhez több szűrőt is adhatsz, ezek együtt különleges hatásokat adnak. Szűrő törléséhez a **Szűrők** szekcióban vidd az egeret a szűrő sorára, és kattints az X ikonra.

## Háttérszűrők

A háttérszűrők ugyanazt a kilenc hatást adják, mint a szűrők, de nem magára az elemre, hanem az elem mögötti tartalomra hatnak. Ha például egy áttetsző elemnek elmosott háttérszűrőt adsz, a mögötte látszó tartalom lesz elmosva.

1. Jelölj ki egy elemet a vásznon, és kattints a **Stílus** fülre.
2. Nyisd ki a **Hatások** szekciót.
3. Kattints a **Háttérszűrők** melletti + jelre.
4. Válassz hatást a legördülő listából. Például a **Szépia** ad barnás színtónust az elem mögötti tartalomnak.
5. Add meg a hatás értékét, például 100 százalékot.

Több háttérszűrőt is használhatsz egyszerre. Törlés: vidd az egeret a szűrő sorára a **Háttérszűrők** szekcióban, és kattints az X ikonra.

### Példa: az elmosódó címsor

Ezzel a példával olyan címsort készíthetsz, amely elmossa a mögötte elgördülő képeket.

1. Add hozzá a **Címsor** elemet az oldal tetejére.
2. Igazítsd a szöveget középre.
3. Adj a címsornak 60 képpont felső margót. A margókról a [Térköz létrehozása margóval és paddinggel](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-terkoz-margo-padding/) fejezet szól.
4. A **Méret** szekcióban állítsd a szélességet 1400 képpontra és a magasságot 125 képpontra.
5. A **Pozíció** szekcióban válaszd a **Rögzített** értéket, és állíts be 5-ös **Z-index** értéket. Lásd: [Elemek pozíciója](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-pozicio/).
6. A **Hatások** szekcióban adj hozzá egy **Háttérszűrőt**, elmosás 10 képponttal.
7. Tegyél képeket a címsor alá. Amikor a látogató lefelé görget, a képek a címsor „alatt" haladnak el, és elmosódnak.

## Átalakítás

Az átalakítás négy dolgot módosít az elemen:

- **Áthelyezés:** az elemet eltolja a helyéről. Gyakran rámutatáskor használják.
- **Méretezés:** az elemet vízszintesen, függőlegesen vagy mindkét irányban átméretezi, az elrendezésben foglalt helyét nem változtatva. Gyakran rámutatáskor használják.
- **Forgatás:** egy pont körül elforgatja az elemet. Állandó állapotban és rámutatáskor is használják.
- **Ferdítés:** az X, Y vagy Z tengely mentén megdönti az elemet, eltorzítva az alakját. Állandó állapotban és rámutatáskor is használják.

Mind a négy hatást ráteheted egy elemre, de ugyanabból a fajtából csak egyet. Például két **Forgatás** hatást nem adhatsz ugyanannak a címsornak.

![Az Átalakítás felugró ablaka: Áthelyezés, Méretezés, Forgatás és Ferdítés fül](./kepek/stilus-hatasok-atalakitas.webp)

*Az Átalakítás felugró ablaka: Áthelyezés, Méretezés, Forgatás és Ferdítés fül* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

Az **Áthelyezés** fülön az **X irányú mozgatás**, **Y irányú mozgatás** és **Z irányú mozgatás** mezőket találod képpontos értékkel.

### Állandó átalakítás hozzáadása

1. Add hozzá a **Címsor** elemet a vászonhoz, és jelöld ki.
2. Kattints a **Stílus** fülre, és nyisd ki a **Hatások** szekciót.
3. Kattints az **Átalakítás** melletti + jelre.
4. Válaszd a **Forgatás** fület.
5. Írj 10-et a Z tengely mezőjébe. A címsor 10 fokkal elfordul.

Átalakítás törléséhez a **Hatások** szekcióban vidd az egeret az átalakítás sorára, és kattints az X ikonra.

### Átalakítás rámutatáskor

Az átalakítás akkor is beállítható, hogy csak akkor érvényesüljön, ha a látogató az elem fölé viszi az egeret. Ehhez az elem állapotát kell átváltanod, lásd: [Elemállapotok](https://hub.hellowp.io/hu/plugins/elementor/stilus-elemallapotok/).

1. Add hozzá a **Címsor** elemet a vászonhoz, és jelöld ki.
2. Kattints a **Stílus** fülre.
3. Az **Osztályok** mezőben kattints a helyi osztály melletti hárompontos menüre, és válaszd a **Rámutatás** állapotot. Mostantól azt állítod be, hogyan nézzen ki az elem, ha a látogató fölé viszi az egeret.
4. Nyisd ki a **Hatások** szekciót, és kattints az **Átalakítás** melletti + jelre.
5. Az **Áthelyezés** fülön írj 5-öt az **X irányú mozgatás**, és -5-öt az **Y irányú mozgatás** mezőbe.

A címsor ezután az egér fölé vitelekor elmozdul.

## Átmenetek

Az átmenet azt szabályozza, mennyi ideig tart, amíg az elem a normál állapotából a rámutatási állapotába vált. Ha például egy gomb pirosra vált, amikor fölé viszed az egeret, az átmenet adja meg, mennyi idő alatt lesz piros.

Az átmenetek alapesetben minden tulajdonságra egyszerre, 200 ezredmásodperc (ms) alatt futnak le, ez látszik az **Átmenetek** tétel összefoglaló sorában is („Minden tulajdonság: 200ms"). Az időtartamot minden felhasználó módosíthatja. Az Elementor Pro felhasználói az egyes tulajdonságokhoz külön átmeneti időt is megadhatnak.

### Animáció átmeneti időkből

Az átmeneti idők eltolásával érdekes animációt kaphatsz. Ezt a példát a Pro funkcióival lehet végigvinni:

1. Hozz létre egy gombot, és jelöld ki.
2. Kattints a **Stílus** fülre.
3. Az **Osztályok** mezőben kattints a helyi osztály melletti hárompontos menüre, és válaszd a **Rámutatás** állapotot.
4. Állíts be a rámutatási állapotra változásokat: a szövegszínt, a háttérszínt, a szegély színét és egy dobozárnyékot. A hozzájuk tartozó beállításokról lásd: [Betűméret, szín, család és stílus](https://hub.hellowp.io/hu/plugins/elementor/stilus-betutipus-meret-es-szin/), [Háttér a Stílus fülön (V4)](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-hatter/) és [Szegély és sarkok lekerekítése](https://hub.hellowp.io/hu/plugins/elementor/stilus-szegely-es-lekerekites/).
5. Az **Osztályok** mezőben kattints vissza a helyi osztályra, hogy ismét a normál állapotot szerkeszd.
6. Nyisd ki a **Hatások** szekciót, és kattints az **Átmenetek** melletti + jelre.
7. Kattints a **Minden tulajdonság** legördülő listára. Megnyílik az átmenet-tulajdonságok ablaka.
8. Válaszd ki a betűszínt a listából, és az időtartamot állítsd 0 ms-ra.
9. Kattints a + jelre, és a háttérszínhez adj 200 ms átmeneti időt.
10. Kattints a + jelre, és a szegély színéhez adj 400 ms átmeneti időt.
11. Kattints a + jelre, és a dobozárnyékhoz adj 600 ms átmeneti időt.

Az átmenet-tulajdonságok ablak az összes olyan tulajdonságot felsorolja, amelyhez átmenet állítható. A nemrég beállított tulajdonságok a lista elején jelennek meg. Ha nem találsz meg egy tulajdonságot, írd a nevét a keresőmezőbe.

Az eredmény: rámutatáskor a betűszín azonnal vált, a háttérszín 200 ms, a szegélyszín 400 ms, az árnyék 600 ms alatt, így a hatások egymás után lépnek életbe.

Átmenet törléséhez a **Hatások** szekcióban vidd az egeret az **Átmenetek** tétel sorára, és kattints az X ikonra.

## Keverési mód

A keverés az egymásra rakott elemeket úgy módosítja, hogy a színeik egymással keveredjenek. Az előtér elem színeit az alatta lévő elem színeivel számolja össze a program.

A **Keverési mód** lehetőségei:

| Mód | Mit csinál |
|---|---|
| Kizárás | Lágy, fordított hatást ad: a világos területek világosabbak, a sötétek sötétebbek lesznek, de kisebb kontraszttal, mint a Különbség. |
| Különbség | Az előtér és a háttér színeit összehasonlítja, a sötétebbet kivonja a világosabból. Nagy kontrasztú, fordított hatás. |
| Szorzás | A két réteg színértékeit összeszorozza, ezért ahol átfednek, sötétebb lesz. |
| Képernyő (Screen) | Invertál, szoroz, majd újra invertál, így világosabb eredményt ad, mintha több képet vetítenél egy vászonra. |
| Átfedés (Overlay) | A Szorzás és a Képernyő keveréke: a sötét részeket sötétíti, a világosakat világosítja, nő a kontraszt. |
| Sötétítés | Minden képpontnál a két réteg közül a sötétebbet tartja meg. |
| Világosítás | Minden képpontnál a világosabbat tartja meg. |
| Színfakítás | A kontrasztot csökkentve világosítja a hátteret, erősebb fényeket ad. |
| Árnyalat | Az előtér színárnyalatát átviszi a háttérre, a háttér telítettségét és fényességét megtartva. |
| Fényesség | Az előtér világosságát átviszi a háttérre, a háttér színárnyalatát és telítettségét megtartva. |
| Lágy fény | Finoman sötétíti vagy világosítja a hátteret az előtér színétől függően, lágy, szórt fényhatást ad. |
| Kemény fény | A szorzást és a képernyő-hatást az előtér színe szerint keveri, erős kontrasztot ad. |
| Telítettség | Az előtér telítettségét átviszi a háttérre, a háttér színárnyalatát és fényességét megtartva. |
| Szín | Az előtér színárnyalatát és telítettségét átviszi a háttérre, a háttér fényességét megtartva. |

A listában ezeken kívül a **Normál** (nincs keverés) és a **Színégetés** is szerepel.

### Elemek keverése

1. Hozz létre egy teljes oldalas Flexbox elemet.
2. Adj a Flexboxnak hátteret, lásd: [Háttér a Stílus fülön (V4)](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-hatter/).
3. Tegyél bele egy címsort, és igazítsd középre.
4. Jelöld ki a címsort, kattints a **Stílus** fülre, és nyisd ki a **Hatások** szekciót.
5. A **Keverési mód** legördülő listából válassz keverési módot. A címsor és a háttér összekeveredik.

A V3 elemek keverési módjáról és CSS-szűrőiről a [Keverési módok és CSS-szűrők](https://hub.hellowp.io/hu/plugins/elementor/stilus-keveresi-modok-es-szurok/) fejezet szól.