Hotspot widget: pinek képen, szöveges és képes jelölő, kattintásra nyíló tooltip

A Hotspot widget egyetlen képre tetszőleges számú jelölőt (pint) tesz. A jelölőre rámutatva rövid szöveg, egy kis buborék (tooltip) jelenik meg: egy kabát gallérján, egy szoba lámpáján vagy egy ábra egy részén. A jelölők helyét százalékban adod meg, ezért a kép átméretezésekor is a helyükön maradnak.

Használat előtt kapcsold be: The Plus Addons → Widgets, keress rá a Hotspot szóra, és kapcsold be a kapcsolóját. A widget a Pro kiadás része. Ha csak az ingyenes bővítmény aktív, az oldalon nem jelenik meg semmi, még helykitöltő sem.

Jelölő felvétele a képre

1. Add az oldalhoz a Hotspot widgetet.
2. A Tartalom → Tartalom szakaszban a Hotspot kép mezőnél válaszd ki a képet. A Képfelbontás maradjon Teljes, hacsak nem kell kisebb fájl.
3. Nyisd meg a Több hotspotjelölő hozzáadása lista első sorát. A Cím csak a sor neve a panelen, hogy megkülönböztesd a jelölőket. A látogató nem látja.
4. A Jelölő típusa mezőt hagyd Ikon-on és válassz ikont, vagy válts Kép, Szöveg vagy Lottie típusra.
5. A Jelölő pozíciója → Asztali gép csoportban a Bal (automatikus / %) és a Fent (automatikus / %) kapcsolóval, majd a csúszkákkal told a jelölőt a kívánt helyre.
6. A Jelölő tartalma alatt a Leírás mezőbe írd a buborék szövegét.
7. Újabb jelölőhöz adj új sort a listához.

https://minta-bolt.hu/tp-hotspot-alap/

A képen a két jelölő látszik a megadott helyén: a bal oldali szöveges, a jobb oldali képes.

https://minta-bolt.hu/tp-hotspot-alap/

Alapértelmezésben a buborék rámutatáskor nyílik meg, a jelölő fölött, sötét háttérrel, benne a Leírás szövegével.

Pozíció és beállítások

Minden jelölőnek külön Asztali gép, Tablet és Mobil csoportja van. A tablet és a mobil csak akkor él, ha az adott eszköznél bekapcsolod a Reszponzív értékek kapcsolót. Különben mindenhol az asztali pozíció érvényes.

Beállítás	Mit csinál	Alapérték
Jelölő típusa	A jelölő típusa: Ikon, Kép, Szöveg vagy Lottie.	Ikon
Bal (automatikus / %)	Bekapcsolva a jelölő a bal szélhez képest, százalékban helyezkedik el.	Be, 40%
Fent (automatikus / %)	Bekapcsolva a jelölő a felső szélhez képest, százalékban helyezkedik el.	Be
Folyamatos hatás	A jelölő folyamatos animációja: Pulzálás, Lebegtetés, Dobálás, Normál csepphullámok, Folyamatos csepphullámok vagy Rámutatáskor megjelenő csepphullámok.	Normál csepphullámok
Képfelbontás	A kép mérete a regisztrált képméretek közül.	Teljes

Hivatkozás a jelölőn

A jelölő Link kapcsolóját bekapcsolva az egész jelölő kattintható, és a megadott címre visz.

Tudnivalók

• A jelölők helye a kép százalékában értendő, ezért a kép átméretezésekor is a megfelelő ponton maradnak.
• A buborék szövege a Leírás. A Cím csak a lista soránál jelenik meg a szerkesztőben.
• A jelölők elhelyezése csúszkákkal történik, a vásznon nincs húzással való elhelyezés.
• A widget nem tölt be ikonbetűkészletet. Ha az oldalon semmi más nem tölti be a Font Awesome-ot, az Ikon típusú jelölő üresen jelenhet meg. Ilyenkor használj Kép vagy Szöveg típust, vagy gondoskodj róla, hogy az oldalon egy másik elem betöltse a Font Awesome-ot.

Szöveges jelölő

Ha a jelölőnek maga is információt kell hordoznia (sorszám, ár, rövid felirat), a Jelölő típusa legyen Szöveg.

1. Nyisd meg a jelölő sorát a Több hotspotjelölő hozzáadása listában.
2. A Jelölő típusa értéke legyen Szöveg.
3. A Jelölő szövege mezőbe írd a feliratot. Alapértéke Theplus, ezt cseréld le.
4. Tartsd rövidre: egy-két szó vagy egy szám. A jelölő a szöveghez igazodva nő.
5. A megjelenést a Stílus → Jelölő szövege szakaszban állíthatod.

A közzétett oldalon a jelölő a beírt szöveget mutatja, ikon nélkül, és rámutatáskor ugyanúgy megnyílik a buborék, mint az ikonos jelölőnél. A fenti képen a bal oldali jelölő ilyen: AKCIÓ felirat.

Beállítás	Mit csinál	Alapérték
Jelölő típusa	Ikon, Kép, Szöveg vagy Lottie.	Ikon
Jelölő szövege	A jelölőn megjelenő szöveg.	Theplus
Cím	A sor neve a panelen, a látogató nem látja.	üres
Leírás	A buborék szövege.	Luctus nec ullamcorper mattis

Tudnivalók:

• A Jelölő szövege mező csak akkor látszik, ha a Jelölő típusa értéke Szöveg.
• Ne keverd a Jelölő szövege mezőt a Cím-mel: a Cím a szerkesztő neve a sornak, a Jelölő szövege az, amit a látogató a jelölőn olvas.
• A szöveges jelölőhöz nem kell ikonbetűkészlet, ezért ez a legbiztosabb típus, ha az ikonok üresen jelennének meg.
• Egysoros szöveg fér bele: nincs benne formázás vagy sortörés. A hosszú felirat kiszélesíti a jelölőt, és ráérhet a szomszédos jelölőre. Ilyenkor a végleges szöveg beírása után állítsd be a Jelölő pozíciója értékeit.
• Eltérő felirattal a jelölők eltérő szélességűek.

Hibaelhárítás: szöveges jelölő

• A jelölő még mindig „Theplus”: ez a Jelölő szövege gyári értéke, írd át.
• Nem találom a Jelölő szövege mezőt: előbb állítsd a Jelölő típusa értékét Szöveg-re, a többi típusnál a mező rejtve van.
• Két jelölő egymásra lóg: told őket szét a Bal (automatikus / %) és a Fent (automatikus / %) értékekkel a Jelölő pozíciója alatt.

Képes jelölő

Egy kis fotó, termékminiatűr vagy márkajel gyakran jobban működik az általános ikonnál.

1. Nyisd meg a jelölő sorát a Több hotspotjelölő hozzáadása listában.
2. A Jelölő típusa értéke legyen Kép.
3. A Jelölő képe mezőben válaszd ki a képet.
4. Ha akarod, a Jelölő képe rámutatáskor mezőben adj meg egy második képet, amely rámutatáskor jelenik meg.
5. A méretét a Stílus → Jelölő képe szakaszban a Jelölőkép mérete és a Jelölőkép szélessége értékkel állítsd.

A közzétett oldalon a jelölő a választott kép lesz: ikon helyett képelem kerül az oldalra. A buborék ugyanúgy megnyílik, mint az ikonos jelölőnél. A jobb oldali jelölő a fenti képen ilyen.

Beállítás	Mit csinál	Alapérték
Jelölő típusa	Ikon, Kép, Szöveg vagy Lottie.	Ikon
Jelölő képe	A jelölőként használt kép.	üres
Jelölő képe rámutatáskor	A kép, amely rámutatáskor jelenik meg.	üres
Jelölőkép mérete	A jelölő mérete a Stílus lapon.	a téma alapértéke
Jelölőkép szélessége	A jelölő szélessége a Stílus lapon.	a téma alapértéke

Tudnivalók:

• A Jelölő képe és a Jelölő képe rámutatáskor csak Kép típusnál látszik. Ha visszaváltasz másik típusra, a beállítások megmaradnak, csak rejtve vannak.
• A pozíció, a buborék és a hivatkozás minden típusnál ugyanúgy működik, csak a jelölő változik.
• A képes jelölőhöz nem kell ikonbetűkészlet.
• A Jelölő típusa jelölőnként állítható, így egy képen keverheted a képes és az ikonos jelölőket.
• Használj kicsi, négyzethez közeli képet: a nagy kép a Stílus lapon kicsinyíthető, de a fájlt a böngészőnek így is le kell töltenie.

Korlátok:

• A jelölő képéhez nem adható külön alternatív szöveg.
• A nagyon széles vagy magas kép torznak hat jelölőként: a Stílus lap átméretezi, de nem vágja.
• Érintőképernyőn nincs rámutatás, ezért ott a látogató csak a Jelölő képe képet látja, a rámutatáskori képet nem.

Hibaelhárítás: képes jelölő

• Nem látom a Jelölő képe mezőt: a Jelölő típusa még Ikon, Szöveg vagy Lottie. Állítsd Kép-re.
• A jelölő túl nagy: használd a Jelölőkép mérete és a Jelölőkép szélessége értéket a Stílus → Jelölő képe szakaszban.

Lottie-animáció jelölőként

A jelölő lehet mozgó Lottie-animáció is, ami figyelemfelkeltőbb egy egyszerű pontnál. Ehhez a Lottie-fájl JSON-címe kell.

A cím beszerzése:

1. Jelentkezz be a LottieFiles oldalán (a regisztráció ingyenes), és a kiemelt, ingyenes animációk közül válassz egyet.
2. Kattints az animációra, majd a felugró ablakban a munkaterületre mentés gombra, hogy az animáció új ablakban, a szerkesztőben megnyíljon.
3. A jobb oldali panelen kapcsold be az asset-link (elérési hivatkozás) kapcsolót.
4. Másold ki az URL-t az Asset link mezőből.

A jelölő beállítása:

1. Add az oldalhoz a Hotspot widgetet, és a Hotspot kép mezőben válaszd ki a képet.
2. Nyisd meg annak a listasornak a beállításait, amelyiken a Lottie-t használnád, és a Jelölő típusa listából válaszd a Lottie értéket.
3. A Lottie URL mezőbe illeszd be a kimásolt címet.
4. A Jelölő tartalma alatt írd meg a buborék szövegét.

A kép fölött ezután az animáció látszik jelölőként. A méretét és a lejátszását a Stílus fül Lottie szakaszában állíthatod. A Lottie csak a Hotspot widget Pro kiadásával érhető el.

Buborék megnyitása kattintásra

Az asztali gépen a rámutatás jó, telefonon viszont nincs rámutatás. Ha a jelölő kattintásra nyílik meg, mindenhol ugyanúgy működik.

1. Válaszd ki a Hotspot widgetet, és nyisd meg a módosítandó jelölőt a Több hotspotjelölő hozzáadása listában.
2. A soron belül válts a Stílus lapra.
3. Kattints a Buboréksúgó opciói feliratra a csoport megnyitásához.
4. Az Eseményindító értéke legyen Kattintás.
5. Ismételd meg minden olyan jelölőnél, amelyiknél kell. Az Eseményindító jelölőnként állítható, nem az egész widgetre.

https://minta-bolt.hu/tp-hotspot-kattintas/

A közzétett oldalon kipróbálva a Rámutatás beállítással a jelölőre mutatás megnyitja a buborékot. A Kattintás beállítással a rámutatás nem nyit meg semmit, a buborék csak a jelölőre kattintás után jelenik meg.

Beállítás	Mit csinál	Alapérték
Eseményindító	Rámutatás vagy Kattintás: ez nyitja meg a buborékot.	Rámutatás
Pozíció	A buborék helye: Bal, Jobb, Felül, Fent, a kezdő pozícióban, Fent, a záró pozícióban vagy Alul.	Felül
Sablon	A buborék színváltozata: Sötét, Világos vagy Áttetsző.	Sötét
Interaktív súgóbuborékok	A látogató a buborékba is beléphet az egérrel, anélkül hogy bezárulna.	Bekapcsolva
Animáció	Hogyan jelenik meg a buborék.	Eltolás közelebb

Tudnivalók:

• Az Eseményindító a jelölő sorának Stílus lapján, a Buboréksúgó opciói alatt van, nem a Tartalom lapon, ahol a szöveg.
• A Buboréksúgó opciói ugyanaz a beállításcsoport, amelyet a bővítmény más buborékjainál is használsz.
• Egy képen keverheted a rámutatásra és a kattintásra nyíló jelölőket.
• Ha az Ikon típusú jelölő üresen jelenik meg (nincs betöltött Font Awesome), a buborék még megnyílik, de nincs mire kattintani. Használj Szöveg vagy Kép típust.

Hibaelhárítás: buborék

• A buborék még mindig rámutatásra nyílik: az Eseményindító csak az adott jelölőre vonatkozik. Nyisd meg a Több hotspotjelölő hozzáadása minden sorát, és nézd meg a Stílus lap Buboréksúgó opciói csoportját.
• Nem találom a Buboréksúgó opciói csoportot: a jelölő sorának Stílus lapján van, nem a widget Stílus lapján és nem a sor Tartalom lapján.
• Semmi sem nyílik meg: nézd meg, hogy a Jelölő tartalma alatti Leírás mezőben van-e szöveg. Üres leírásnál nincs mit megjeleníteni.