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

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

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

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ípust és keretet, például mobilnál a Fekete iPhone X (320px x 672px) keretet.
4. Állítsd a Tartalom mezőt Sablonra.
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.

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.

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ípust é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.

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

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

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.