MagyarmagyarHotspotok
Jelölőpontok elhelyezése képen, felugró leírással, hivatkozással és animációval.
A Hotspotok widget jelölőpontokat (hotspotokat) tesz egy képre, hogy a látogató figyelmét egy adott részletre irányítsd. Webshopokban gyakran használják arra, hogy a fotón látható termékekhez hivatkozást adjanak. A pontokhoz felugró leírás (eszköztipp) is tartozhat.
A widget hozzáadása
Szekció neve “A widget hozzáadása”- Nyisd meg az oldalt vagy bejegyzést az Elementorral (Szerkesztés Elementorral).
- Keresd meg a Hotspotok widgetet az elemlistában, és húzd az oldalra.
A widget három szakaszból áll: Kép, Hotspotok és Eszköztipp.
- Kép kiválasztása: az alapkép, amelyre a pontok kerülnek.
- Képfelbontás: a kép mérete. Egyéni értéknél megadhatod a szélességet és a magasságot, majd az Alkalmaz gombbal véglegesítheted.
- Igazítás: a kép elhelyezése balra, középre vagy jobbra.
Hotspotok
Szekció neve “Hotspotok”Itt a pontokat veheted fel és szerkesztheted. Minden elemnek két füle van: Tartalom és Stílus.
A szakasz tetején egy kapcsolóval JetEngine lekérdezést is használhatsz a pontok forrásaként. Bekapcsolás után egy lekérdezés-választó jelenik meg. Lekérdezés használatakor csak egy elemet kell beállítanod, ez lesz a sablon az eredmények megjelenítéséhez. Ehhez a JetEngine bővítmény kell.
Tartalom fül
Szekció neve “Tartalom fül”| Beállítás | Mit csinál |
|---|---|
| Icon | A pont ikonja az ikonkönyvtárból, vagy saját SVG-fájl (például logó). |
| Text | A pont mellett közvetlenül megjelenő szöveg. |
| Content Type | Plain (egyszerű szöveg) vagy Template (Elementor-sablon). |
| Choose Template | Sablon választása a leíráshoz, ha a tartalomtípus Template. |
| Description | A felugró szöveg (eszköztipp), ha a tartalomtípus nem sablon. |
| Show Tooltip on Init | Bekapcsolva az eszköztipp már az oldal betöltésekor látszik, nem kell fölé húzni az egeret. |
| Link | Az oldal, ahová a pontra kattintva jut a látogató. |
Stílus fül (pozíció)
Szekció neve “Stílus fül (pozíció)”- Horizontal Position(%) és Vertical Position(%): a pont helye a képen százalékban. A csúszkát húzhatod, vagy beírhatod az értéket.
- Width: a pont szélessége.
Az Elem hozzáadása gombbal tetszőleges számú pontot adhatsz hozzá. Az Animation listából egyetlen animáció választható (hatféle van), amely az összes pontra érvényes. A pontok ezt az animációt mutatják, amíg a látogató nem tartja az egeret a kép fölött.
Eszköztipp
Szekció neve “Eszköztipp”Az eszköztippek közös beállításai (a szöveget a pontok Description mezőjében adod meg):
- Show All Tooltips on Init: bekapcsolva az összes eszköztipp rögtön látszik. Kikapcsolva csak fölé húzáskor (vagy a beállított trigger hatására) jelennek meg.
- Interactive Tooltip: az eszköztippen belüli elemekkel (például hivatkozással) is lehet interakcióba lépni.
- Placement: az eszköztipp helye a ponthoz képest, például Top Start.
- Animation: a megjelenés animációja, például Fade.
- Animation Delay: a trigger és az eszköztipp megjelenése közötti idő.
- Appearance Duration: milyen gyorsan jelenik meg az eszköztipp.
- Disappearance Duration: milyen gyorsan tűnik el, amikor a mutató elhagyja a pontot.
- Trigger: mi váltja ki a megjelenést, például Focus (a pontra fókuszálás).
- Use Arrow: kis nyíl az eszköztipp és a pont között.
Stílus
Szekció neve “Stílus”A Stílus fülön a pontok és az eszköztippek kinézetét állíthatod:
- Hotspot: ikon mérete és színe, belső margó (Padding), szegély lekerekítése (Border Radius).
- Tooltip: a nyíl színe, háttérszínek, belső margó és szegély lekerekítése.
Végül kattints a Közzététel gombra.
Eredmény az oldalon
Szekció neve “Eredmény az oldalon”
A képen a Fül pont eszköztippje csak fölé húzáskor jelenik meg, a Máz pontnál a Show Tooltip on Init be van kapcsolva, ezért az eszköztipp már látszik.
Készült: Frissítve: