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

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.

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.

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 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.

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 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.

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 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.
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.

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.

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, Háttér a Stílus fülön (V4) és Szegély és sarkok lekerekítése.
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).
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 fejezet szól.