# Advanced 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

- 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

1. Nyisd meg a **The Plus Addons → Extensions** oldalt.
2. Keresd meg az **Advanced Shadows** kártyát a **Plus Effects** csoportban (vagy keress rá), és kapcsold be a kapcsolóját.
3. Nyisd meg az oldalt az Elementorban, és jelölj ki egy widgetet vagy tárolót.
4. A **Haladó** fülön bontsd ki az **Advanced Shadows** szakaszt.
5. Kapcsold be a **Box Shadows**, **Text Shadows** vagy **Drop Shadows** kapcsolót. Ugyanazon az elemen mindhárom használható.

![A Haladó fül Advanced Shadows szakasza a három kapcsolóval: Box Shadows, Text Shadows, Drop Shadows](./kepek/kiterjesztesek-2-arnyek-panel.webp)

*A Haladó fül Advanced Shadows szakasza a három kapcsolóval: Box Shadows, Text Shadows, Drop Shadows* (https://minta-bolt.hu/wp-admin/post.php?post=361&action=elementor)

A képen a szakasz három kapcsolója látszik, mindegyik ki van kapcsolva.

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

Minden típus azonos felépítésű: előbb a célpont, utána a **Normal** és a **Hover** fül.

![Az Advanced Shadows szakasz bekapcsolt Box Shadows kapcsolóval, az Apply to listával és a Normal/Hover fülekkel](./kepek/kiterjesztesek-2-arnyek-doboz.webp)

*Az Advanced Shadows szakasz bekapcsolt Box Shadows kapcsolóval, az Apply to listával és a Normal/Hover fülekkel* (https://minta-bolt.hu/wp-admin/post.php?post=361&action=elementor)

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

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

- 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

- 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

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