Dynamic Device: görgetett weboldal-makett, összekapcsolt eszközök és portfólióoldal

A Dinamikus eszköz widget egy teljes oldalról készült magas képernyőképet is képes görgetni a készülék képernyőjén, így a látogató a teljes tervet látja, az oldal elhagyása nélkül. Két mód van: a Kép görgetése az egér fölé vitelkor végigviszi a képet fentről lefelé, a Kézi görgetés pedig valódi görgetősávot ad a képnek a keretben. A kettő közül az egyiket használod. A widget és a bekapcsolása az áttekintő fejezetben szerepel, a widget a Pro bővítmény része.

Mindkét módhoz egy magas, függőleges képernyőkép kell az oldalról. A görgetés hossza a kép magassága mínusz a képernyő magassága, ezért egy alacsony kép alig mozdul. Egy 800 × 3200 képpontos kép jól mutatja a hatást.

Görgetés egérmozgásra

1. Húzd a Dinamikus eszköz widgetet az oldalra.
2. A Tartalom fülön az Elrendezés maradjon Normál, válassz Típust és keretet. Asztali képernyőképhez jó kezdet a Laptop típus Fekete MacBook (800px x 500px) kerete.
3. A Tartalom maradjon Kép, a Médiakép mezőbe tedd a magas képernyőképet.
4. A Stílus fülön nyisd meg az Eszköz háttere szakaszt, és kapcsold be a Kép görgetése kapcsolót.
5. Az Átmenet időtartama mezőben állítsd be a görgetés idejét másodpercben.

https://minta-bolt.hu/wp-admin/post.php?post=89&action=elementor

A képen a Kép görgetése, a Kézi görgetés, az Átmenet időtartama és a Dinamikus eszközkapcsolati ID látszik.

Mentsd az oldalt, és nézd meg a nyilvános oldalon: ha az egeret a makett fölé viszed, a kép lemegy az aljáig, ha elviszed, visszamegy a tetejére.

https://minta-bolt.hu/km2-eszkoz-kep/

A képen a kép már jóval a teteje alatt áll a laptop képernyőjén.

Beállítás	Hol van	Mit csinál	Alapérték
Kép görgetése	Stílus → Eszköz háttere	egérrel fölé állva a képet a tetejétől az aljáig viszi a képernyőn	ki
Kézi görgetés	Stílus → Eszköz háttere	az egérmozgásra történő görgetést valódi görgetősávra cseréli	ki
Szélesség	Stílus → Eszköz háttere	a kézzel görgetett kép szélessége a képernyőn belül, százalékban (1 és 100 között); csak Kézi görgetésnél látszik	100%
Átmenet időtartama	Stílus → Eszköz háttere	a görgetés ideje másodpercben (0,1 és 10 között, 0,1-es lépésekkel)	4
Dinamikus eszközkapcsolati ID	Stílus → Eszköz háttere	több makettet összeköt, lásd lentebb; Kézi görgetésnél rejtve marad	üres
Dobozárnyék	Stílus → Eszköz háttere	árnyék az eszköz alatt (X, Y, Elmosás, Szín), külön Normál és Rámutatás fülön
Szélesség módosítása (%)	Stílus → Eszköz elrendezése	az egész makett átméretezése, 10% és 100% között	100

Kézi görgetés

Ha a látogató irányítsa a görgetést, vagyis nem az egér, hanem ő mozgatja a képet, kapcsold be a Kézi görgetés kapcsolót a Kép görgetése alatt. A képen ekkor valódi görgetősáv jelenik meg a készülék képernyőjén.

https://minta-bolt.hu/wp-admin/post.php?post=90&action=elementor

https://minta-bolt.hu/km2-eszkoz-kezi/

• Megjelenik a Szélesség mező, amely azt adja meg, mennyire széles a görgetett kép a képernyőn belül. Amíg nem módosítod, 100%-ként viselkedik.
• A Stílus fülön megjelenik a Képgörgetési sáv szakasz, a görgetősáv, a fogantyú és a sáv formázásához.
• Az egérre történő görgetés leáll: a Kézi görgetés felváltja, nem kiegészíti.
• A Dinamikus eszközkapcsolati ID mező eltűnik, ezért a kézzel görgetett makett nem köthető össze másikkal.

Több makett összekötése

Ha ugyanazt a tervet laptopon és telefonon is megmutatod egymás mellett, jobban néz ki, ha bármelyik fölé állva mindkettő görög. Ezt a Dinamikus eszközkapcsolati ID adja: ugyanazt az azonosítót beírva két vagy több makett egy csoporttá válik.

1. Építsd meg az első makettet: Normál elrendezés, Típus és keret, Tartalom: Kép, magas kép a Médiakép mezőben.
2. A Stílus fülön az Eszköz háttere szakaszban kapcsold be a Kép görgetése kapcsolót. A Kézi görgetés maradjon ki, mert az elrejti az azonosító mezőt.
3. Írj be egy nevet a Dinamikus eszközkapcsolati ID mezőbe, például grp-a. A mező leírása szerint ezzel több dinamikus eszközt kapcsolhatsz össze ugyanahhoz a rámutatási effekthez.
4. Add hozzá a csoport többi makettjét. Lehetnek más típusúak és más képernyőképet is mutathatnak.
5. Minden csoporttagnak ugyanaz legyen az azonosítója. Amelyik makett önállóan viselkedjen, annak adj másik azonosítót, vagy hagyd üresen.

https://minta-bolt.hu/wp-admin/post.php?post=91&action=elementor

Az azonosítót egyszerűen add meg: betű, számjegy és kötőjel. A widget CSS-osztályként használja, ezért a szóköz és az írásjelek gondot okoznak. Az azonosító pontosan egyezzen: a grp-a és a Grp-A két külön csoport. Másold át a mezőt, ne gépeld újra.

https://minta-bolt.hu/km2-eszkoz-csoport/

A képen a laptop és a telefon azonos azonosítóval rendelkezik, ezért az egyik fölé állva mindkettő lefelé görget, a más azonosítójú tablet viszont nem mozdul.

Hogyan viselkedik a csoport:

• Nyugalmi állapotban mindegyik makett a képe tetején áll.
• A csoport egyik tagja fölé állva az összes tag az aljáig görget, a más azonosítójú makettek nem.
• Az egér elvitelekor minden makett visszatér a tetejére.
• Az eszköztípusok keverhetők: laptop és telefon is lehet egy csoportban, mindegyik a saját képével.
• Az időzítés widgetenként külön van, ezért a csoport csak akkor mozog egyszerre, ha mindenhol ugyanaz az Átmenet időtartama.

Korlátok:

• Az azonosító mező csak Normál elrendezésnél, Kép tartalomnál, bekapcsolt Kép görgetése és kikapcsolt Kézi görgetés mellett látszik. Sablon vagy IFrame tartalomnál, illetve a Speciális carouselben nincs.
• Ha egy makett nem csatlakozik a csoporthoz, ellenőrizd, hogy mindegyiknél be van-e kapcsolva a Kép görgetése, és pontosan egyezik-e az azonosító, a nagybetűkkel együtt.

Portfólió- vagy bemutatóoldal

Egy portfólióoldalon minden projekt egy-egy makett: a projekt teljes oldala laptop- vagy telefonkeretben, egérre görgetve. A projektenként egy Dinamikus eszköz widget kell, nincs ismétlődő elem vagy lekérdezés: tíz projekthez tíz widget tartozik.

1. Készíts az oldalon projektenként egy tárolót, vagy tárolókból rácsot.
2. Húzz az elsőbe egy Dinamikus eszköz widgetet.
3. A Tartalom fülön az Elrendezés legyen Normál, válassz Típust és keretet: asztali képernyőképhez laptopot, mobilhoz telefont.
4. A Tartalom maradjon Kép, a Médiakép mezőbe tedd a projekt magas képernyőképét.
5. A Stílus fülön az Eszköz háttere alatt kapcsold be a Kép görgetése kapcsolót, és állítsd be az Átmenet időtartama értékét.
6. Duplikáld a kész widgetet a további projektekhez, és cseréld a képernyőképet és a keretet. Ez gyorsabb, mint mindegyiket nulláról felépíteni.
7. A makettek egyforma méretéhez a Stílus → Eszköz elrendezése szakaszban használd a Szélesség módosítása (%) mezőt, és állítsd az Igazítás mezőt mindenhol középre.

Egy kiemelt projekthez tegyél egymás mellé két-három eszköztípust, és kapcsold össze őket: ugyanaz az azonosító mindegyiken, és az Átmenet időtartama is egyezzen. Egy másik sornak adj másik azonosítót, hogy a két sor független maradjon.

Tippek és korlátok:

• Minden projekt teljes oldalas képernyőképet igényel, és sok ilyen kép sok képadat. Feltöltés előtt tömörítsd őket.
• A görgetés egeret igényel. Érintőképernyőn nincs fölé állás, ott a makettek a képernyőképek tetejét mutatják. A Kézi görgetés az az opció, amit a látogató mindig tud használni.
• A görgetési hatások csak Kép tartalomnál működnek, IFrame tartalomnál és a Speciális carouselben nem. Sablon tartalomnak saját On Hover Scroll beállítása van.
• Az Egyéni makett csak átlátszó képernyőterülettel mutatja a tartalmat. Lásd az áttekintő fejezetet.
• Az asztali gépből egyetlen keret van (iMac, minimalista), így ott nincs mit választani.

Hibaelhárítás

Az egér fölé állva semmi nem történik. Három dolgot nézz meg ebben a sorrendben. A Kép görgetése alapból ki van kapcsolva a Stílus → Eszköz háttere szakaszban. Ha be van kapcsolva, a Kézi görgetés legyen kikapcsolva, mert az felváltja a hatást. Végül a kép legyen jóval magasabb a készülék képernyőjénél.

A kép alig mozdul. Túl alacsony a képernyőképed. A görgetés hossza a kép és a képernyő magasságának különbsége, ezért használj teljes oldalas felvételt.

A görgetés túl gyors vagy túl lassú. Módosítsd az Átmenet időtartama értékét másodpercben. Az alapérték 4, az 1 négyszer gyorsabb.

Eltűnt a Dinamikus eszközkapcsolati ID mező. A Kézi görgetés be van kapcsolva. Kapcsold ki, és visszajön.

Csak az a makett görget, amelyik fölé álltam. Az azonosítók nem egyeznek. Nyisd meg a csoport minden widgetjét, és hasonlítsd össze az azonosítót karakterről karakterre, a nagybetűkkel együtt. Ellenőrizd azt is, hogy mindegyiknél be van-e kapcsolva a Kép görgetése.

Az egyik soron való fölé állás az összes projektet görgeti. Mindegyiknek ugyanaz az azonosítója. Adj minden sornak külön azonosítót, vagy ürítsd a mezőt azoknál, amelyeknek önállóan kell viselkedniük.

A makettek mozognak, de nem egyszerre érnek le. Az Átmenet időtartama eltér. Állítsd mindenhol ugyanarra a másodpercre.

A makettek különböző méretűek, a rács egyenetlen. Minden keretnek más a saját pixelmérete (a legördülő neve mutatja). Egyenlítsd ki a Szélesség módosítása (%) mezővel, és az Igazítás legyen mindenhol középre.