# Dynamic Device widget: áttekintés, sablon és élő oldal eszközkeretben

> A Dinamikus eszköz widget elrendezései, eszköztípusai és tartalomtípusai: kép, Elementor-sablon és élő weboldal telefon-, tablet-, laptop- vagy asztali keretben.

A **Dinamikus eszköz** (Dynamic Device) widget egy képet, egy Elementor-sablont vagy egy élő weboldalt tesz telefon-, tablet-, laptop- vagy asztalikeret-makettbe, így a terv úgy látszik, ahogy a látogatók látni fogják. A widget a Pro bővítmény része, ingyenes változata nincs.

## Bekapcsolás

1. Az Elementor aktív.
2. Nyisd meg: **The Plus Addons → Widgets**, keress rá a **Dynamic Device** névre, és kapcsold be. Amíg ez nincs bekapcsolva, a widget nem jelenik meg az Elementor paneljén.
3. Szerkeszd az oldalt Elementorral, keress rá a widgetre, és húzd az elrendezésbe.

## Elrendezés és eszköztípus

![A Dinamikus eszköz widget Tartalom füle](./kepek/kepek-media-eszkoz-tartalom.webp)

*A Dinamikus eszköz widget Tartalom füle* (https://minta-bolt.hu/wp-admin/post.php?post=89&action=elementor)

A képen a **Tartalom** szakasz látszik: **Elrendezés**, **Típus**, az eszközkeret legördülője, a **Tartalom** és a **Médiakép**.

Az **Elrendezés** két értéket ad, és szinte minden alatta lévő beállítást befolyásol:

- **Normál** (alapérték): egy eszközkeret, benne egy tartalom.
- **Speciális carousel**: képcsúszka, fölötte eszközkerettel. Lásd az [Eszközcsúszka](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-eszkoz-csuszka/) fejezetet.

A **Normál** elrendezésben a **Típus** ikonsora öt lehetőséget ad: mobil, tablet, laptop (alapérték), asztali gép és egyéni. A kiválasztott típus alatt megjelenik a hozzá tartozó keretek legördülője (például **Mobil eszköz**, **Laptop**). A keretek neve mellett zárójelben a pixelméretük áll, így a meglévő képedhez illőt választhatod.

| Típus | Elérhető keretek |
|---|---|
| Mobil | nyolc keret: iPhone- és S9-típusok, köztük az alapértelmezett fehér iPhone (320 × 594 px) |
| Tablet | három keret: függőleges és vízszintes fehér iPad, iPad böngészővel; az alapértelmezett a függőleges (480 × 646 px) |
| Laptop | öt keret: Fekete MacBook (800 × 500 px, alapérték), Minimalista MacBook (700 × 414 px), Fehér, minimalista MacBook (770 × 480 px), Fehér MacBook (800 × 525 px), Windows laptop (800 × 471 px) |
| Asztali gép | egyetlen keret: iMac, minimalista (1000 × 565 px) |
| Egyéni | a saját keretképed az **Egyéni makett** mezőben |

Az egyéni keret csak akkor működik jól, ha a képernyőterülete átlátszó: a keret a tartalom fölé kerül, ezért egy átlátszatlan JPEG eltakarja a mögötte lévő képet, sablont vagy oldalt. Használj olyan PNG-t, amelyből a képernyő ki van vágva. A szerkesztő erre nem figyelmeztet.

Okosóra keret nincs a widgetben. Ha órát, vagy a carouselben tabletet szeretnél, válaszd az **Egyéni** típust, és tölts fel saját keretképet.

## Tartalom

A **Tartalom** legördülő (csak **Normál** elrendezésben látszik) dönti el, mi kerül a keretbe.

| Tartalom | Mi kerül a keretbe |
|---|---|
| **Kép** (alapérték) | egy kép a **Médiakép** mezőből. Csak ennél működnek a görgetési hatások, és csak ennél van **Link/felugró ablak kiválasztása** |
| **Sablon** | egy Elementor-sablon az **Elementor-sablonok** mezőből, élő tartalommal |
| **IFrame** | egy élő oldal az **IFrame URL** mezőben megadott címről |

A **Kép** és a **Sablon** tartalomnál megjelenik az **Ikonopciók** szakasz is: az **Ikon megjelenítése** kapcsolóval (alapból ki) egy **Ikon feltöltése** mezőt kapsz egy kis jelvényhez a makett sarkában. IFrame tartalomnál az **Ikonopciók** szakasz rejtve marad.

A képgörgetésről a [Görgethető eszközmakettek](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-eszkoz-gorgetes/) fejezet szól.

## Elementor-sablon az eszközben

A sablon tartalma élőben jelenik meg a képernyőn: a címsorok, gombok és linkek működnek, a makett pedig a sablonnal együtt változik, ha később szerkeszted.

![A Dinamikus eszköz widget sablon tartalommal](./kepek/kepek-media-eszkoz-sablon-panel.webp)

*A Dinamikus eszköz widget sablon tartalommal* (https://minta-bolt.hu/wp-admin/post.php?post=92&action=elementor)

1. Előbb mentsd el és tedd közzé a sablont: **Sablonok → Mentett sablonok**, vagy a widget **Elementor-sablonok** mezőjénél a sablonkészítő gombbal.
2. Húzd a **Dinamikus eszköz** widgetet az elrendezésbe, az **Elrendezés** maradjon **Normál**.
3. Válassz **Típus**t és keretet, például mobilnál a **Fekete iPhone X (320px x 672px)** keretet.
4. Állítsd a **Tartalom** mezőt **Sablon**ra.
5. Az **Elementor-sablonok** legördülőben válaszd ki a mentett sablont. A mező melletti **Edit Template** gomb a sablon szerkesztőjére visz, és a sablonkészítő gombbal újat is létrehozhatsz anélkül, hogy elhagynád a widgetet.

![Elementor-sablon egy telefonmakettben az oldalon](./kepek/kepek-media-eszkoz-sablon.webp)

*Elementor-sablon egy telefonmakettben az oldalon* (https://minta-bolt.hu/km2-eszkoz-sablon/)

A képen a sablon címsora és gombja a telefon képernyőjén látszik, a gomb kattintható.

- A **Sablon** tartalom csak a **Normál** elrendezésben létezik.
- Ha nincs sablon kiválasztva, a widget egy „Select Template” üzenetet ír ki a tartalom helyett. Ha a kiválasztott sablon nincs közzétéve, „Unauthorized Access” üzenet jelenik meg.
- A keret nem igazítja át a sablont: egy széles asztali sablon egy telefonkeretben összezsúfolt lesz. A sablont a keret nevében szereplő pixelmérethez tervezd.
- A **Sablon** szakasz a **Stílus** fülön a sablon helyzetét állítja, és tartalmaz egy **On Hover Scroll** beállítást, saját átmenet-időtartammal.

## Élő weboldal az eszközben

Az **IFrame** tartalom egy valódi oldalt tölt be a készülék képernyőjébe, ezért a makett mindig az aktuális oldalt mutatja, képernyőkép újrakészítése nélkül.

![A Dinamikus eszköz widget IFrame tartalommal](./kepek/kepek-media-eszkoz-iframe-panel.webp)

*A Dinamikus eszköz widget IFrame tartalommal* (https://minta-bolt.hu/wp-admin/post.php?post=93&action=elementor)

1. Húzd a **Dinamikus eszköz** widgetet az elrendezésbe, az **Elrendezés** maradjon **Normál** (a Speciális carouselben nincs IFrame tartalom).
2. Válassz **Típus**t és keretet. Egy széles keret, például a **Fekete MacBook**, asztali oldalhoz illik, egy telefonkeret mobilra szabott oldalhoz.
3. Állítsd a **Tartalom** mezőt **IFrame**-re.
4. Az **IFrame URL** mezőbe írd az oldal címét. A mező alapból üres.

![Egy élő oldal a laptopmakettben](./kepek/kepek-media-eszkoz-iframe.webp)

*Egy élő oldal a laptopmakettben* (https://minta-bolt.hu/km2-eszkoz-iframe/)

A képen a megadott oldal tölt be a laptop képernyőjén.

- A widget egy iframe-et ír ki, amely a készülék képernyőjének 100%-át tölti ki, keret nélkül, ezért követi a kiválasztott keretet és a **Szélesség módosítása (%)** értékét.
- Az iframe-nél nincsenek ikonbeállítások, és a görgetési hatások (**Kép görgetése**, **Kézi görgetés**) sem érvényesek: az iframe úgy görgethető, ahogy a betöltött oldal engedi.
- Nem minden oldal ágyazható be. Ha egy oldal az `X-Frame-Options` fejléccel vagy szigorú `Content-Security-Policy`-vel megtiltja a beágyazást, a keretben üres hely marad. Ezt a böngésző tartatja be, a widgetben nincs beállítás, ami felülírná. Idegen oldal esetén próbáld ki a címet élesítés előtt.
- A betöltött oldal minden szkriptje, betűtípusa és képe a te oldaloddal együtt töltődik, tehát egy nehéz oldal a tiédet is nehezebbé teszi.
- A beágyazott oldalt a widget nem méretezi át: egy asztali elrendezés a telefonkeretben a keret méretében jelenik meg.

## A Stílus fül

![A Dinamikus eszköz widget Stílus füle](./kepek/kepek-media-eszkoz-stilus.webp)

*A Dinamikus eszköz widget Stílus füle* (https://minta-bolt.hu/wp-admin/post.php?post=89&action=elementor)

| Szakasz | Mit állít |
|---|---|
| **Eszköz elrendezése** | **Szélesség módosítása (%)** (10 és 100 között, alapérték 100), **Igazítás** (balra, középre vagy jobbra, alapérték középre), **Margó**, **Padding**. Mindkét elrendezésben érvényes |
| **Eszköz háttere** | a görgetési hatások és a **Dobozárnyék** |
| **Kép** | képsarok-lekerekítés, magasság, szélesség, pozíció és Z-Index képtartalomnál |
| **Sablon** | a sablon helyzete és az **On Hover Scroll** sablontartalomnál |
| **Képgörgetési sáv** | a görgetősáv, a fogantyú és a sáv formázása, ha a **Kézi görgetés** be van kapcsolva |
| **Carousel-opciók**, **Carousel-dia**, **Carousel-pontok**, **Carousel nyilai** | csak Speciális carousel elrendezésben, lásd az Eszközcsúszka fejezetet |

A **Dobozárnyék** (X, Y, Elmosás és Szín) külön **Normál** és **Rámutatás** fülön állítható, és az eszköz alá vet árnyékot. Az **On Scroll View Animation** és az Elementor **Haladó** füle úgy működik, mint a többi The Plus Addons widgetnél.

## Hibaelhárítás

**A Dinamikus eszköz widget nincs a panelen.** Ellenőrizd, hogy a Pro bővítmény telepítve és aktív-e, majd a **The Plus Addons → Widgets** oldalon a **Dynamic Device** kapcsolója be van-e kapcsolva.

**Az Egyéni típusnál csak a keretképem látszik.** A képed átlátszatlan. A keret a tartalom fölé kerül, ezért cseréld átlátszó képernyőterületű PNG-re.

**A mockup üres az IFrame tartalomnál.** Először nézd meg az **IFrame URL** mezőt: elírás vagy hiányzó `https://` üresen hagyja a keretet. Ha a cím jó, valószínűleg az oldal tiltja a beágyazást. A böngésző konzolja jelzi a tiltást. Használj olyan oldalt, amit te kezelsz, vagy válts **Kép** tartalomra egy képernyőképpel.

**Nincs IFrame vagy Sablon a Tartalom legördülőben.** Az **Elrendezés** Speciális carouselre áll. Válts vissza **Normál**ra.

**Eltűnt az Ikonopciók szakasz.** IFrame tartalomnál ez a várt viselkedés. Kép vagy Sablon tartalomnál visszatér.

**Nem találom az okosóra vagy tablet keretet a carouselben.** Okosóra keret a widgetben nincs, tablet csak a Normál elrendezésben van. A carouselben az **Egyéni** típussal tölts fel saját keretet.