# Harmonika widget

> Összecsukható címek és szövegek a Harmonika widgettel: tartalom, ikonok, GYIK-séma és stílus.

A **Harmonika** widget összecsukott, tömör formában jeleníti meg a szöveget, így sok tartalmat is kevés helyen mutathatsz meg. A látogatók a rövid címeket látják, és csak azt az elemet nyitják ki, amelyik érdekli őket.

## Mire jó?

- Gyakori kérdések (GYIK) rendezett, kategorizált megjelenítésére.
- Rendezvények programjának és részleteinek összecsukható listájára.
- Útiterv egyes szakaszainak kibontható leírására.
- Receptoldalon a hozzávalók és az elkészítés szétválasztására.

Egy példa: egy cég új projektmenedzsment-eszközt mutat be. A szolgáltatás előnyeit a harmonikával bontja apró egységekre („Csapatmunka”, „Időmegtakarítás”), a látogató pedig csak azt nyitja ki, amelyre kíváncsi. A **GYIK séma** bekapcsolásával a keresőmotorok felismerik a kérdés-válasz párokat, és könnyebben jeleníthetik meg őket a találatok között.

## A widget hozzáadása

1. A szerkesztőben kattints a **+** gombra, hogy megjelenjen az összes widget.
2. Kattints a **Harmonika** widgetre, vagy húzd a vászonra. A részleteket lásd: [Elemek hozzáadása az oldalhoz](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-elemek-hozzaadasa/).

## Különbség a Váltó (Toggle) widgettől

Az alap Harmonika a Váltó widgethez hasonlít, két fő különbséggel:

- A Harmonika **első eleme betöltéskor ki van nyitva**, a többi zárva. A Váltónál oldalbetöltéskor minden elem zárva van.
- A Harmonikában **egyszerre csak egy elem** lehet nyitva: ha másikat nyitsz ki, az előzőleg nyitott elem automatikusan becsukódik. A Váltónál a látogató annyi elemet nyithat ki, amennyit akar.

Ha a beágyazott elemek (nested elements) használatban vannak, az új Harmonika a Váltó képességeit is magába foglalja, és kiváltja azt: a Váltó widget többé nem érhető el, a meglévő váltók viszont változatlanul működnek és szerkeszthetők. Az új, beágyazott változat egyéb elemeket is tartalmazhat, erről lásd: [Harmonika beágyazott elemekkel](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-harmonika-beagyazott-elemekkel/). Az atomikus szerkesztő saját harmonikájáról: [Harmonika az atomikus szerkesztőben](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-atomic-harmonika/).

A helyi szerkesztőben, ha a régi Harmonika widgetet szerkeszted, a panel tetején ez a tájékoztatás áll: „Jelenleg a Harmonika widget régi verzióját szerkeszted. A vászonra húzott új Harmonika widget az új verzió lesz, továbbfejlesztett beágyazási lehetőségekkel.”

## A Harmonika beállítása lépésről lépésre

1. Add a Harmonika widgetet a vászonhoz.
2. A **Tartalom** fülön, a **Harmonika** szekció **Harmonikaelemek** listájában vedd fel az elemeket. Az új widget néhány mintaelemmel indul, ezeket átírhatod, törölheted, és az **Elem hozzáadása** gombbal újat is felvehetsz.
3. Kattints egy elemre, hogy szerkeszd. A cím és a tartalom mezőbe írd be az adott elem címét és leírását. A tartalomba képet is tehetsz, a szöveget pedig linkelheted.
4. Az **Ikon** mezővel választod ki azt az ikont, amely a kinyitás lehetőségét jelzi. Lehet **Nincs**, **SVG feltöltése**, vagy ikon az **Ikonkönyvtár**ból. Az ikonkönyvtárban az ajánlott ikonok külön fülön látszanak.
5. Az **Aktív ikon** mezőben azt az ikont választod, amely a nyitott elem becsukásának lehetőségét jelzi. Ugyanazok a lehetőségek.
6. A **Cím HTML-címkéje** mezőben a cím HTML-címkéjét állítod be: H1-től H6-ig vagy div.
7. A **GYIK séma** kapcsolóval be- vagy kikapcsolhatod a séma használatát.

![A Harmonika widget Tartalom füle: elemek, ikonok, címke és GYIK séma](./kepek/widgetek-harmonika-tartalom.webp)

*A Harmonika widget Tartalom füle: elemek, ikonok, címke és GYIK séma* (https://minta-bolt.hu/wp-admin/post.php?post=31&action=elementor)

A képen a három elem, az **Ikon** és **Aktív ikon** választó, a **Cím HTML-címkéje** és a **GYIK séma** kapcsoló látszik.

## Stílus fül

A **Stílus** fül szekciói:

| Szekció | Beállítások |
|---|---|
| **Harmonika** | **Keret szélessége** és **Szegélyszín**: a harmonika körüli és az elemek közötti szegély vastagsága és színe |
| **Cím** | **Háttér**, **Szín** (a nem aktív címek szövege), **Aktív szín** (az aktív cím szövege), **Tipográfia**, **Szöveg körvonala**, **Szövegárnyék**, **Padding** |
| **Ikon** | Az ikon igazítása a cím bal vagy jobb oldalához, az ikon színe és az aktív ikon színe, valamint az ikon és a cím közti távolság |
| **Tartalom** | A tartalom háttérszíne, szövegszíne, tipográfiája, szövegárnyéka és belső térköze (padding) |

![A Harmonika widget Stílus füle kinyitott Cím szekcióval](./kepek/widgetek-harmonika-stilus.webp)

*A Harmonika widget Stílus füle kinyitott Cím szekcióval* (https://minta-bolt.hu/wp-admin/post.php?post=31&action=elementor)

A képen a **Cím** szekció beállításai látszanak: háttér, szín, aktív szín, tipográfia, szöveg körvonala, szövegárnyék és padding.

A szöveg körvonaláról és az árnyékról lásd: [Árnyék](https://hub.hellowp.io/hu/plugins/elementor/stilus-arnyek/).

## Haladó fül

A **Haladó** fülön a widget pozícióját, térközeit és egyedi kódját állíthatod, ugyanúgy, mint a többi widgetnél.

## Az eredmény az oldalon

![A Harmonika az oldalon: az első elem nyitva, a többi zárva](./kepek/widgetek-harmonika-elol.webp)

*A Harmonika az oldalon: az első elem nyitva, a többi zárva* (https://minta-bolt.hu/widget-demo/)

A képen az első elem nyitva van, a másik kettő zárva, a nyitott cím színe eltér a zártakétól.