# Speciális maszkolás és haladó videó

> Kép, képdoboz és videó maszkolása PNG, SVG vagy clip-path alakzattal, és a Videó widget egyéni lejátszóvezérlői.

A bővítmény két beépített Elementor-widgetet (Kép, Videó) egészít ki új beállításokkal. Ezek a **D** jellel jelölt vezérlők.

## Speciális maszkolás

A **Speciális maszkolás** a **Kép**, **Képdoboz** és **Videó** widgeten teszi lehetővé, hogy a tartalmat egy alakzat formájára vágd. A beállítást a **Kép** szakaszban találod (a **Videó** widgetnél a **Haladó** szakaszban). Három lehetőség van:

- **Nincs**: nincs maszk;
- **Kép**: PNG vagy SVG maszk;
- **Clip-Path**: CSS-vágóalakzat.

Maszkként használhatsz előre elkészített PNG-ket, saját PNG-fájlt, saját SVG-fájlt (ehhez az Elementor SVG-támogatását be kell kapcsolni), vagy alapértelmezett CSS clip-path alakzatot.

### Kép maszk

A **Képmaszk kiválasztása** mezőben egy előre elkészített maszkot választasz, vagy saját képet töltesz fel. A PNG-maszkot háttérként kezelheted a következők állításával:

- **Pozíció**;
- **Ismétlés**;
- **Méret**.

![A Kép maszk beállításai](./kepek/animaciok-es-effektek-maszkolas-kep.webp)

*A Kép maszk beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=58&action=elementor)

### Clip-Path

A **Clip-Path** CSS-függvényeken alapuló, koordinátákkal megadott alakzatokat használ maszkként. Az **Előre meghatározott clip-path** listából választhatsz, például háromszög, trapéz, rombusz, sokszögek, nyíl, csillag, kereszt, kör vagy ellipszis közül.

![A Clip-Path beállításai](./kepek/animaciok-es-effektek-maszkolas-clip-path.webp)

*A Clip-Path beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=58&action=elementor)

## Haladó videó

A **Haladó** szakasz a Videó widgetben egyéni lejátszóvezérlőket ad. A következő videótípusokra működik:

- YouTube;
- Vimeo;
- saját tárhelyen tárolt MP4.

Eldöntheted, mely vezérlők jelenjenek meg, és hogyan nézzenek ki.

![A Haladó szakasz kikapcsolt állapotban](./kepek/animaciok-es-effektek-halado-video.webp)

*A Haladó szakasz kikapcsolt állapotban* (https://minta-bolt.hu/wp-admin/post.php?post=58&action=elementor)

Az **Egyéni vezérlők** kapcsoló bekapcsolása után további beállítások jelennek meg:

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Vezérlők megjelenítése csak rámutatáskor** | A vezérlők csak akkor látszanak, ha az egér a videó fölött van. | Nem |
| **Ezeknek a vezérlőknek a megjelenítése** | A látható vezérlők listája: **Nagy lejátszógomb**, **Újraindítás**, **Visszatekerés**, **Lejátszás**, **Előretekerés**, **Folyamatjelző**, **Aktuális idő**, **Időtartam**, **Némítás**, **Hangerő**, **Feliratok**, **beállítások**, **Kép a képben**, **AirPlay**, **Letöltés**, **teljes képernyő**. | A legtöbb be van jelölve, az újraindítás, visszatekerés, előretekerés, időtartam és letöltés nem |
| **Feliratok alapértelmezés szerint bekapcsolva** | A feliratok alapból megjelennek. | Nem |

Saját tárhelyen tárolt videónál az **Egyéni vezérlők** alatt a videó letöltése is megakadályozható.

![Az Egyéni vezérlők bekapcsolva](./kepek/animaciok-es-effektek-halado-video-vezerlok.webp)

*Az Egyéni vezérlők bekapcsolva* (https://minta-bolt.hu/wp-admin/post.php?post=58&action=elementor)

### Stílus

Az **Egyéni vezérlők** bekapcsolása után a **Stílus** fülön megjelenik az **Egyéni vezérlők** szakasz, ahol a következőket színezheted és formázhatod:

- **Vezérlők**: a vezérlők színe, a gombok háttere, a rámutatáskori szín, a folyamatjelző színe, a vezérlősáv háttere és belső margója;
- **Lejátszógomb**: ikonszín, háttér, szegély, méret és lekerekítés;
- **Videó**: a háttérszín, a lekerekítés, a külső dobozárnyék, valamint a szegély stílusa és színe.

A vezérlők kinézete CSS-sel is testre szabható; a lejátszó Plyr-alapú, így a Plyr CSS-osztályaival módosíthatod.