MagyarmagyarAdvanced Shadows: áttekintés és beállítások
A három árnyéktípus (doboz, szöveg, drop shadow), a közös beállítások, az Apply to működése, viselkedés és korlátozások.
Az Elementor saját árnyékbeállítása elemenként egy árnyékot ad. A lágy, valósághű mélység és az olyan hatások, mint a neumorfizmus, két vagy több egymásra rakott árnyékot kérnek. Az Advanced Shadows kiterjesztéssel annyi doboz-, szöveg- és drop shadow árnyékot rakhatsz egy widgetre vagy tárolóra, amennyit szeretnél, és rámutatáskor másik készletre cserélheted őket.
Előkészületek
Szekció neve “Előkészületek”- A kiterjesztés az ingyenes bővítmény része, a Pro-val is ugyanúgy működik.
- Kapcsold be az Advanced Shadows kiterjesztést a The Plus Addons → Extensions oldalon, a Plus Effects csoportban. Alapból ki van kapcsolva.
- A beállítások helye: jelölj ki egy widgetet vagy tárolót, nyisd meg a Haladó fület, és bontsd ki az Advanced Shadows szakaszt, közvetlenül az Egyedi CSS szakasz fölött.
A bekapcsolás lépései
Szekció neve “A bekapcsolás lépései”- Nyisd meg a The Plus Addons → Extensions oldalt.
- Keresd meg az Advanced Shadows kártyát a Plus Effects csoportban (vagy keress rá), és kapcsold be a kapcsolóját.
- Nyisd meg az oldalt az Elementorban, és jelölj ki egy widgetet vagy tárolót.
- A Haladó fülön bontsd ki az Advanced Shadows szakaszt.
- Kapcsold be a Box Shadows, Text Shadows vagy Drop Shadows kapcsolót. Ugyanazon az elemen mindhárom használható.
A képen a szakasz három kapcsolója látszik, mindegyik ki van kapcsolva.
A három árnyéktípus
Szekció neve “A három árnyéktípus”| Kapcsoló | Mit ad | Mire jó |
|---|---|---|
| Box Shadows | Árnyék az elem doboza körül (CSS box-shadow) |
Kártyák, gombok, tárolók, neumorfizmus |
| Text Shadows | Árnyék a betűk mögött (CSS text-shadow) |
Címsorok és más szövegek |
| Drop Shadows | A látható alakot követő árnyék (CSS drop-shadow szűrő) |
Átlátszó hátterű PNG, SVG és WebP képek, ikonok |
Beállítások az egyes típusokban
Szekció neve “Beállítások az egyes típusokban”Minden típus azonos felépítésű: előbb a célpont, utána a Normal és a Hover fül.
| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| Apply to | Default: a kijelölt widgetet vagy tárolót magát stílusozza. Add Custom Class: egy benne lévő elemet céloz osztálynévvel. | Default |
| Enter Custom Class Name | A célzott osztály neve. Vezető pont nélkül írd: elementor-icon, nem .elementor-icon. A mező helykitöltő szövege ponttal kezdődik, de ponttal az árnyék egyáltalán nem érvényesül. |
Üres |
| Elem hozzáadása | Egy árnyékot ad hozzá. Több tétellel árnyékokat rakhatsz egymásra, ezeket a böngésző együtt rajzolja ki. | Nincs tétel |
| Label | A tétel neve a listában. Az árnyékot nem változtatja. | Box Shadow 1 / Text Shadow 1 / Drop Shadow 1 |
| Type (csak doboznál) | Outset: a dobozon kívülre, Inset: belülre rajzol. | Outset |
| X / Y | Vízszintes és függőleges eltolás, -250 és 250 px között. | 0 |
| Blur | Lágyság. A csúszka 0 és 10 px között mozog. | 0 |
| Spread (csak doboznál) | Nagyítja vagy zsugorítja az árnyékot, -50 és 50 px között. | 0 |
| Color | Az árnyék színe. A természetes hatáshoz félig átlátszó színt használj. | Üres (halvány, átlátszó fekete) |
| Transition css | CSS-átmenet, például all .3s linear, hogy a normál és a rámutatásos állapot közötti váltás animált legyen. |
Üres |
| Hover Box Shadows / Hover Text Shadows / Hover Drop Shadows | A Hover fülön: bekapcsolva második árnyéklistát adhatsz, amely rámutatáskor felváltja a normál listát. | Ki |
Default vagy Add Custom Class?
Szekció neve “Default vagy Add Custom Class?”Három Ikon widgetre ugyanazt a két dobozárnyékot tettük. Az Add Custom Class és az elementor-icon osztálynév a kerek ikonra rakja az árnyékot. Ugyanez az osztálynév ponttal írva semmit nem rajzol. A Default a widget egész négyzet alakú dobozát árnyékolja.
A közzétett oldalon az osztálynevet így találod meg: kattints jobb gombbal az elemre, válaszd az Inspect (Vizsgálat) parancsot, és másold ki az egyik osztályt a kiemelt címkéből.
Hogyan viselkedik
Szekció neve “Hogyan viselkedik”- Az árnyékok CSS-ként kerülnek az oldalba, ezért a nyilvános oldalon minden látogató látja őket.
- Egy listában több tétel együtt rajzolódik ki, az első tétel van legfelül.
- A rámutatási lista felváltja a normál listát, nem hozzáadódik. Ami árnyékot rámutatáskor is meg akarsz tartani, azt a rámutatási listában ismételd meg.
Korlátozások
Szekció neve “Korlátozások”- A Blur csúszka 10 px-nél megáll. A nagyobb értékek, például a neumorfizmushoz gyakran használt 35 px, beállítva mégis helyesen jelentek meg az oldalon.
- Az osztálynevet vezető pont nélkül kell beírni, bár a helykitöltő szöveg ponttal kezdődik.
- A szöveg- és drop shadow árnyék nem biztos, hogy látszik az Elementor szerkesztővásznán (a Címsor és a Kép widgeten ezt tapasztaltuk). Nézd meg előnézetben vagy a közzétett oldalon.
- Nincsenek reszponzív beállítások: ugyanazok az árnyékok érvényesek asztali, táblagépes és mobil nézetben.
Hibaelhárítás
Szekció neve “Hibaelhárítás”Nem találom az Advanced Shadows szakaszt a Haladó fülön. A kiterjesztés ki van kapcsolva. Kapcsold be a The Plus Addons → Extensions oldalon, majd töltsd újra a szerkesztőt.
Az Add Custom Class nem mutat árnyékot. Töröld a pontot az osztálynév elejéről, és ellenőrizd, hogy az osztály tényleg létezik a kijelölt widgeten vagy tárolón belül.
Az árnyék az oldalon látszik, a szerkesztőben nem. Ez a szöveg- és drop shadow árnyékoknál bizonyos widgeteken várt viselkedés. Az előnézettel ellenőrizd a megjelenést.
Az egyes hatások részletes lépései külön fejezetekben vannak: neumorfizmus, szövegárnyék rámutatáskor és drop shadow rámutatáskor.
Készült: