# Harmonika: áttekintés, sablon az elemben, horgonylink, FAQ-séma és kapcsolat körhintával

> A Harmonika widget összes beállítása egy helyen, a különbség a kapcsoló és a harmonika között, sablon használata az elemben, közvetlen link egy elemre, FAQ sémajelölés és szinkron a körhintával.

A **Harmonika** (Accordion) widget címeket tesz egymás alá, és a cím kattintásra nyitja a hozzá tartozó tartalmat. Hosszú oldalt rövidít le, ezért GYIK-hoz, súgóoldalakhoz és funkciólistákhoz használják. A bővítmény a sima harmonikán felül sablont, ikonokat, hover és vízszintes módot, keresést, lapozást, automatikus léptetést és FAQ-sémát is ad.

Előbb kapcsold be a widgetet: **The Plus Addons → Widgets**, keress rá az **Accordion** szóra, és kapcsold be a kapcsolóját.

## Ingyenes vagy Pro?

| Funkció | Ingyenes | Pro |
| --- | --- | --- |
| Szöveges elemek, vagy elemenként egy Elementor-sablon | igen | igen |
| Nyitó/záró ikon (Font Awesome, Font Awesome 5), **Cím HTML-címke** | igen | igen |
| **Aktív fül** (melyik elem induljon nyitva, egyik sem, vagy mind) | igen | igen |
| **Icons Mind** ikonok, ikon elemenként, **Egyedi ID** (horgonylink) | nem | igen |
| Elemek ACF Repeater mezőből | nem | igen |
| Hover, vízszintes elrendezés, automatikus léptetés, kinyitó/összecsukó gomb, keresősáv, lapozó | nem | igen |
| **Görgetés a tetejére**, **Lépcsőzetes animáció**, **SEO-sémajelölés**, **Carousel-kapcsolat ID** | nem | igen |

Az ingyenes bővítményben a legtöbb Pro opció látszik, de a bekapcsolásuk csak frissítési értesítést ad.

## A widget szakaszai

A **Tartalom** fülön a következő szakaszok vannak.

**Tartalom.** A **Tartalom forrása** mező adja meg, honnan jönnek az elemek: **Tételek** (te veszed fel őket itt) vagy **ACF Repeater** (Pro). Minden elemnek ez a négy mezője van:

- **Cím**: a kattintható felirat.
- **Típus**: **Tartalom** a sima szövegnek, **Oldalsablon** egy Elementor-sablon megjelenítéséhez.
- **Ikon megjelenítése** (Pro): ikon az elem címe előtt.
- **Egyedi ID** (Pro): horgony, amellyel egy link az adott elemet nyitja.

**Kapcsolóikon.** Az **Ikon megjelenítése** a nyitó és záró ikont teszi minden címre. Az **Igazítás** balra vagy jobbra teszi, az **Ikonbetűkészlet** a Font Awesome, a Font Awesome 5 vagy az Icons Mind (Pro) közül választ, és mindegyiknél külön ikon van a zárt és az aktív állapotra. A **Cím HTML-címke** a címek HTML-címkéjét adja (alapból `div`).

**Speciális opció** (Pro):

| Beállítás | Mit csinál |
| --- | --- |
| **Harmonika megnyitása rámutatáskor** | Az elem rámutatásra nyílik. A vízszintes elrendezéssel nem használható. |
| **Vízszintes harmonika** | Az elemek egymás mellé kerülnek. |
| **Automatikus lejátszás** | Néhány másodpercenként magától a következő elemet nyitja. |
| **Kibontás és összecsukás gomb** | Egy gomb, amely az összes elemet kinyitja vagy összecsukja. Vízszintes elrendezéssel nem használható. |
| **Keresősáv** | Keresődoboz, amely gépelés közben szűri az elemeket. |
| **Diavetítés és lapozás** | Oldalanként néhány elemet mutat, előző/következő nyilakkal. Vízszintes elrendezéssel nem használható. |

**Egyéb opció:**

| Beállítás | Mit csinál |
| --- | --- |
| **Aktív fül** | Melyik elem legyen nyitva betöltéskor: egy szám, 0 (egyik sem) vagy az összes. Alapérték: 1. |
| **Görgetés a tetejére** (Pro) | Az oldalt a megnyitott elemhez görgeti. |
| **Lépcsőzetes animáció** (Pro) | Az elemek egyenként úsznak be, amikor a harmonika a látótérbe kerül. |
| **SEO-sémajelölés** (Pro) | FAQ strukturált adatként jelöli meg az elemeket. |
| **Carousel-kapcsolat ID** (Pro) | Összekapcsolja a harmonikát egy Anything Carousel widgettel. |

A **Stílus** fülön az ikon, a cím (betűtípus, színek, háttér, szegély, térköz) és a tartalom szakasza van. Az automatikus léptetés, a lapozó, a keresés, a találat kiemelése és a kinyitó/összecsukó gomb szakasza csak akkor jelenik meg, ha a hozzájuk tartozó opció be van kapcsolva. A címekhez két hover-stílus közül választhatsz. A **Haladó** fül ugyanaz, mint a többi widgetnél.

### Működés

- Egyszerre egy elem nyitva van: egy elem megnyitása bezárja az előzőt, a nyitott elemre kattintva az bezárul.
- Az **Aktív fül** „All Open” értékénél minden elem nyitva indul, utána a kattintás egyenként működik.
- Betöltés után az összes elemet csak a kinyitó/összecsukó gomb nyitja ki.

### Hibaelhárítás

- **Egy Pro opció csak frissítési értesítést ad:** az opcióhoz a Pro bővítmény kell.
- **Hiányzik egy opció, amiről olvastál:** egyes opciók elrejtenek másokat. A vízszintes elrendezés rejtve van, amíg az **Harmonika megnyitása rámutatáskor** be van kapcsolva. A kinyitó/összecsukó gomb és a lapozó rejtve van, amíg a vízszintes elrendezés be van kapcsolva.

## Harmonika vagy kapcsoló?

A kettő szinte ugyanúgy néz ki: címek, amelyek tartalmat nyitnak. A különbség az, hogy hány elem lehet egyszerre nyitva, és hogyan indul a lista.

| | Kapcsoló (toggle) | Harmonika (accordion) |
| --- | --- | --- |
| Betöltéskor | Minden elem zárva | Az első elem nyitva |
| Elem megnyitása | A többi marad, ahogy volt: több is nyitva lehet | A nyitott elem bezárul: egyszerre egy |
| Mire jó | Független jegyzetek, amelyeket a látogató összevet | GYIK és lépéslisták, ahol egy válasz látszik, és az oldal rövid marad |

A bővítmény harmonikájával mindkét viselkedést el tudod érni:

| Ezt szeretnéd | Beállítás | Kiadás |
| --- | --- | --- |
| Minden elem zárva induljon, mint a kapcsolónál | **Egyéb opció → Aktív fül → 0** | ingyenes |
| Másik elem legyen nyitva | **Aktív fül** → az elem sorszáma | ingyenes |
| Minden elem nyitva induljon | **Aktív fül → All Open** | ingyenes |
| Gomb, amely az összes elemet nyitja vagy zárja | **Speciális opció → Kibontás és összecsukás gomb** | Pro |
| Rámutatásra nyíló elemek | **Speciális opció → Harmonika megnyitása rámutatáskor** | Pro |
| Magától nyíló elemek | **Speciális opció → Automatikus lejátszás** | Pro |

Kattintásra a harmonika mindig harmonikaként viselkedik: egy elem megnyitása bezárja a nyitottat, a nyitott elemre kattintva az bezárul. A speciális módok leírása a [Harmonika: speciális módok](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-harmonika-modok/) fejezetben van.

## Elementor-sablon az elemben

Ha egy elembe szövegnél többet szeretnél (galéria, űrlap, termékrács, bármilyen Elementor-kialakítás), az elem tartalma lehet sablon. Ez az ingyenes bővítményben is működik.

1. Hozz létre egy Elementor-sablont: **Sablonok → Mentett sablonok → Új sablon hozzáadása** (vagy importálj egyet), építsd meg a tartalmat, és tedd közzé.
2. A **Harmonika** widgetben nyisd meg az elemet a **Tartalom** fülön.
3. A **Típus** mezőt állítsd **Oldalsablon** értékre.
4. A **Sablonminták** mezőben válaszd ki a sablont. Az **Edit Template** gomb megnyitja szerkesztésre, a **Create Template** újat készít.

![Harmonika, amelynek negyedik eleme Elementor-sablont tartalmaz](./kepek/dobozok-gombok-10-harmonika-sablon.webp)

*Harmonika, amelynek negyedik eleme Elementor-sablont tartalmaz* (https://minta-bolt.hu/tp10-sablon/)

A képen a negyedik elem nyitva van, és a sablon szövege látszik benne.

- A **Láthatóság a háttérfelületen** alapból ki van kapcsolva: a szerkesztőben ilyenkor csak a sablon neve látszik, ami gyorsan tartja a szerkesztőt. Kapcsold be, ha a szerkesztőben is látni akarod a sablont. A látogató mindig látja.
- A sablonnak közzétettnek kell lennie. A vázlat helyett a látogató „Unauthorized Access” értesítést kap, ilyenkor tedd közzé a sablont, és ürítsd a gyorsítótárat.
- Elemenként egy sablon lehet, a szöveges és a sablonos elemek keverhetők.

## Közvetlen link egy elemre (horgonylink)

Ha egy hivatkozásnak egy bizonyos elemet kell megnyitnia, adj az elemnek egyedi azonosítót. A látogató így már nyitva látja a megfelelő választ. Az **Egyedi ID** Pro funkció.

1. Nyisd meg az elemet a **Tartalom** fülön, és írj be egy azonosítót az **Egyedi ID** mezőbe, például `visszateritas`. Csak betűt, számot, kötőjelet és aláhúzást használj, szóközt ne.
2. Bármelyik linkmezőben (gomb, menüelem, e-mail) használd az oldal címét, utána `#` jellel az azonosítót: `https://pelda.hu/gyik/#visszateritas`.

![A #visszateritas címmel betöltött oldal, amelyen a Visszatérítés elem nyitva van](./kepek/dobozok-gombok-10-harmonika-horgony.webp)

*A #visszateritas címmel betöltött oldal, amelyen a Visszatérítés elem nyitva van* (https://minta-bolt.hu/tp10-horgony/)

A képen az oldalt a `#visszateritas` címmel töltöttem be: a második elem magától kinyílt.

Korlátok:

- Csak oldalbetöltéskor működik. Ha ugyanazon az oldalon kattintasz egy `#visszateritas` linkre, az oldal az elemhez ugrik, de nem nyitja ki. Ilyenkor a teljes oldalcímet add meg, hogy az oldal újratöltődjön, vagy másik oldalról linkelj.
- Az azonosító az oldalon egyedi legyen, és ne legyen benne szóköz vagy különleges karakter, különben a link nem működik.
- Csak kattintásos módban működik: ha az **Harmonika megnyitása rámutatáskor** be van kapcsolva, a horgonylink nem nyit elemet.

Ha a link nem csinál semmit, ellenőrizd, hogy az azonosító pontosan egyezik-e (kis- és nagybetűre érzékeny), és nincs-e benne szóköz. Ha az oldal az elemhez görget, de az zárva marad, ugyanazon az oldalon kattintottál, lásd fent.

## FAQ-séma (SEO-sémajelölés)

Ha a harmonikád kérdések és válaszok listája, a FAQ-séma a keresőknek gépi formában mondja el ugyanezt. A **SEO-sémajelölés** Pro funkció, egyetlen kapcsolóval megy.

1. Add hozzá a **Harmonika** widgetet. A címeket kérdésnek, az elemek tartalmát válasznak írd meg.
2. A **Tartalom → Egyéb opció** szakaszban kapcsold be a **SEO-sémajelölés** kapcsolót.
3. Tedd közzé az oldalt, és ellenőrizd a Google Rich Results Test eszközével.

A widget schema.org mikroadatot tesz a saját HTML-jébe: a harmonika `FAQPage`, minden cím `Question`, minden tartalom `Answer` lesz. Az oldal kinézete nem változik. A közzétett oldal forrásában ez látszik: a harmonika `https://schema.org/FAQPage` típusú, az elemek `Question` és `Answer` típusúak.

2023 augusztusa óta a Google csak jól ismert kormányzati és egészségügyi oldalaknál mutat FAQ-találatot. Más oldalaknál a jelölés érvényes marad, a keresők és az AI-eszközök olvashatják, de a Google találatai között általában nem lesz lenyíló GYIK.

- Oldalanként egy FAQ-blokk legyen. Ha egy SEO-bővítmény (például a Rank Math FAQ blokkja) már tesz FAQ-sémát az oldalra, itt ne kapcsold be másodszor.
- Csak a látható tartalom számít: valódi kérdéseket és válaszokat jelölj meg, amelyeket a látogató elolvashat.
- A cím nélküli elemeket kihagyja.
- Ha a Rich Results Test duplikált FAQ-t talál, egy másik bővítmény vagy blokk is tesz sémát. Egyet tarts meg.

## Kapcsolat körhintával (Carousel Connection ID)

A harmonika egy **Anything Carousel** widgethez köthető közös azonosítóval: az elem megnyitása a hozzá tartozó diára lép, és fordítva. Funkciótúrához, lépésről lépésre útmutatóhoz jó, képekkel. A harmonika oldalán a **Carousel-kapcsolat ID** Pro funkció, az Anything Carousel az ingyenes bővítményben is megvan.

1. Add hozzá az **Anything Carousel** widgetet, és vegyél fel annyi diát, ahány harmonikaelem van, ugyanabban a sorrendben. A diák Elementor-sablont is használhatnak.
2. A körhinta beállításaiban írj egy azonosítót a **Egyedi carousel-ID** mezőbe, például `gyik-korhinta`. Betűt, számot és kötőjelet használj.
3. A **Harmonika** widgetben a **Tartalom → Egyéb opció → Carousel Connection ID** mezőbe írd be ugyanezt az azonosítót.
4. Tedd közzé az oldalt.

Az első elem az első diához tartozik, a második a másodikhoz és így tovább: sorrend szerint, nem név szerint. A kapcsolat kétirányú.

- Tartsd egyenlően az elemek és a diák számát, a felesleges elemnek vagy diának nincs párja.
- Egy azonosítóhoz oldalanként egy körhinta tartozhat.
- Hover módban (**Harmonika megnyitása rámutatáskor**) a dia váltása nem nyit elemet.
- Ha semmi nem mozog, ellenőrizd, hogy a két azonosító teljesen egyezik-e (kis- és nagybetűre érzékeny), és a közzétett oldalon próbáld ki.