# Hotspotok

> 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

1. Nyisd meg az oldalt vagy bejegyzést az Elementorral (**Szerkesztés Elementorral**).
2. Keresd meg a **Hotspotok** widgetet az elemlistában, és húzd az oldalra.

![A Hotspotok widget beállításai az Elementorban](./kepek/hotspots-szerkeszto.webp)

*A Hotspotok widget beállításai az Elementorban* (https://minta-bolt.hu/wp-admin/post.php?post=6&action=elementor)

A widget három szakaszból áll: **Kép**, **Hotspotok** és **Eszköztipp**.

## Kép

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

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

| 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ó)

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

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

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

![Hotspotok a látogató oldalán, az egyik eszköztipp már betöltéskor látszik](./kepek/hotspots-frontend.webp)

*Hotspotok a látogató oldalán, az egyik eszköztipp már betöltéskor látszik* (https://minta-bolt.hu/jettricks-demo/)

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.