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

> Magas képernyőkép görgetése az eszközkeretben egérmozgásra vagy kézzel, több makett összekötése azonosítóval, és portfólióoldal építése belőlük.

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](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-eszkoz-attekintes/) 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ípus**t é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.

![Az Eszköz háttere szakasz a Stílus fülön](./kepek/kepek-media-eszkoz-hatter.webp)

*Az Eszköz háttere szakasz a Stílus fülön* (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.

![A laptopmakett képernyőjén a magas kép lejjebb görgetve](./kepek/kepek-media-eszkoz-gorgetes-hover.webp)

*A laptopmakett képernyőjén a magas kép lejjebb görgetve* (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.

![Az Eszköz háttere szakasz bekapcsolt Kézi görgetéssel](./kepek/kepek-media-eszkoz-hatter-kezi.webp)

*Az Eszköz háttere szakasz bekapcsolt Kézi görgetéssel* (https://minta-bolt.hu/wp-admin/post.php?post=90&action=elementor)

![A kézi görgetésű laptopmakett a nyilvános oldalon](./kepek/kepek-media-eszkoz-gorgetes-kezi.webp)

*A kézi görgetésű laptopmakett a nyilvános oldalon* (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.

![A Dinamikus eszközkapcsolati ID kitöltve](./kepek/kepek-media-eszkoz-hatter-azonosito.webp)

*A Dinamikus eszközkapcsolati ID kitöltve* (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.

![Három makett egy oldalon: a laptop és a telefon ugyanabba a csoportba tartozik, a tablet másikba](./kepek/kepek-media-eszkoz-csoport.webp)

*Három makett egy oldalon: a laptop és a telefon ugyanabba a csoportba tartozik, a tablet másikba* (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ípus**t é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**.