# Harmonika widget beágyazott elemekkel

> A Harmonika widget hozzáadása, tételek szerkesztése, ikonok, GYIK séma, alapállapot, valamint a Stílus és Haladó beállítások.

A beágyazott elemekkel működő **Harmonika** rugalmasabb szerkezetet ad, mint a hagyományos harmonika: minden panelbe további elemeket (képet, gombot, listát, widgetet) tehetsz. Az új Harmonika átvette a Váltó widget képességeit, ezért a Váltó widget már nem érhető el. A weboldalad meglévő Harmonika és Váltó widgetjeit ez nem érinti: a korábbi beállításokkal szerkeszthetők, és úgy is működnek tovább.

**Fontos:** a Harmonika widget nem kompatibilis a Ciklus (Loop) widgettel, mert a beágyazott elemek nem működnek ismétlődő elemekkel.

## Mire jó?

Egy fotós weboldalán például egyetlen interaktív részben bemutathatod a munkáidat, időpontot foglalhatsz, és megmutathatod a csomagajánlataidat. Az egyik panelben portfólió, a másikban időpontfoglaló gomb, a harmadikban listás csomagajánlat áll. További ötletek:

- vásárlói vélemények egy panelben,
- étterem menüje, asztalfoglalás és a séf ajánlata,
- webáruházban termékkategóriák, akciók, szállítás és visszaküldés.

## Widget hozzáadása

1. Kattints az Elementor szerkesztőben a **+** jelre: megjelenik az összes elérhető widget.
2. Kattints a widgetre, vagy húzd a vászonra.

Alapból az **1. tétel** ki van nyitva a vásznon, és minden tételhez tartozik egy beépített konténer. Ebbe az üres konténerbe húzhatsz elemeket.

![A Harmonika widget két tétellel a vásznon és a Haladó fül](./kepek/kontenerek-harmonika-vaszon.webp)

*A Harmonika widget két tétellel a vásznon és a Haladó fül* (https://minta-bolt.hu/wp-admin/post.php?post=19&action=elementor)

A képen a két tételes harmonika látható, a bal oldalon a widget panelje.

### Harmonika létrehozása

1. Add hozzá a Harmonika widgetet a vászonhoz.
2. A **Tartalom** fülön, az **Elrendezés** szekcióban kattints a szerkesztendő tételre.
3. A **Cím** mezőbe írd be a tétel nevét, és ha kell, adj neki **CSS ID** azonosítót.
4. Új tételt az **Elem hozzáadása** gombbal veszel fel.

## Tartalom fül

![A Harmonika Tartalom füle kinyitott tétellel: Cím és CSS ID](./kepek/kontenerek-harmonika-tetel.webp)

*A Harmonika Tartalom füle kinyitott tétellel: Cím és CSS ID* (https://minta-bolt.hu/wp-admin/post.php?post=19&action=elementor)

### Tételek

Minden tétel a harmonika egy lapja. Egy tételre kattintva szerkesztheted:

- **Cím:** a tétel neve.
- **CSS ID:** egyedi azonosító a tételhez.

A tételeket duplikálhatod vagy törölheted a sor mellett lévő ikonokkal.

### Menüpont pozíciója

Azt adja meg, hol jelenjen meg a tétel neve: **Indítás**, **Középre**, **Vége** vagy **Nyújtott**.

### Ikon

Alapból egy ikon áll a tétel neve mellett, erre kattintva nyílik és csukódik a tétel.

- **Pozíció:** az ikon a név bal vagy jobb oldalán legyen (**Indítás** vagy **Vége**).
- **Kibontás:** a kibontó ikon: **Nincs** (nincs ikon), **SVG feltöltése** (saját SVG-fájl, ehhez be kell kapcsolni az SVG-támogatást) vagy **Ikonkönyvtár** (ikon a könyvtárból).
- **Összecsukás:** a bezáró ikon, ugyanazzal a három lehetőséggel.

### Cím HTML-címkéje

A cím HTML-címkéje: **H1**-től **H6**-ig, **div**, **span** vagy **p**.

### GYIK séma

Ha bekapcsolod, jelzed a mesterségesintelligencia-eszközöknek, hogy a widget GYIK-et (gyakori kérdéseket) tartalmaz. A GYIK sémához a gyorsítótár beállításának **Alapértelmezett** vagy **Inaktív** értéken kell maradnia. A Google már nem támogatja a GYIK sémát, de néhány AI-eszköz és nyelvi modell még használhatja.

## Interakciók

![A Harmonika Interakciók szekciója: Alapértelmezett állam, Kibontott tételek maximális száma, Animáció időtartama](./kepek/kontenerek-harmonika-interakciok.webp)

*A Harmonika Interakciók szekciója: Alapértelmezett állam, Kibontott tételek maximális száma, Animáció időtartama* (https://minta-bolt.hu/wp-admin/post.php?post=19&action=elementor)

- **Alapértelmezett állam:** **Elsőként kibontva** (az első tétel nyitva van) vagy **Minden összecsukva**.
- **Kibontott tételek maximális száma:** **Egy** (egyszerre csak egy tétel nyitható) vagy **Többes kiválasztás** (korlátlan számú tétel nyitható).
- **Animáció időtartama:** a nyitás és zárás animációjának hossza ezredmásodpercben.

## Stílus fül

![A Harmonika Stílus füle: térközök, háttér, szegély és padding](./kepek/kontenerek-harmonika-stilus.webp)

*A Harmonika Stílus füle: térközök, háttér, szegély és padding* (https://minta-bolt.hu/wp-admin/post.php?post=19&action=elementor)

**Harmonika** szekció:

- **Elemek közötti térköz:** a tételek közötti hely csúszkával.
- **Távolság a tartalomtól:** a tétel címe és a tételben lévő elemek közötti hely.
- **Háttér típusa:** klasszikus vagy színátmenet, a **Normál**, **Rámutatás** és **Aktív** füleken külön (az Aktív a kinyitott tétel stílusa).
- **Szegély típusa:** a szegély típusa, ugyancsak a három állapotban.
- **Sarkok lekerekítése:** a négy sarokra külön.
- **Padding:** a tartalom széle és a harmonika széle közötti belső hely.

![A Fejléc szekció: cím tipográfiája, szín, szövegárnyék, szöveg körvonala és ikon](./kepek/kontenerek-harmonika-fejlec.webp)

*A Fejléc szekció: cím tipográfiája, szín, szövegárnyék, szöveg körvonala és ikon* (https://minta-bolt.hu/wp-admin/post.php?post=19&action=elementor)

**Fejléc** szekció:

- **Cím:** **Tipográfia**, **Szín**, **Szövegárnyék** és **Szöveg körvonala** a **Normál**, **Rámutatás** és **Aktív** állapotra.
- **Ikon:** **Méret**, **Térközök** (a cím és az ikon között) és **Szín** a három állapotra.

**Tartalom** szekció: **Háttér típusa** (klasszikus vagy színátmenet), **Szegély típusa**, **Sarkok lekerekítése** és **Padding** a tétel tartalmi részére.

## Haladó fül

A **Haladó** fül a widget pozícióját, térközét, egyedi kódját és más beállításait tartalmazza, ugyanúgy, mint más widgeteknél (lásd a [Haladó beállításokat](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-halado-beallitasai/)).

- **CSS ID:** ennél a widgetnél a CSS ID nem használható.
- **Gyorsítótár beállításai:** a Harmonika widgetnél a gyorsítótár alapból inaktív. Ha a widget GYIK sémát használ, a gyorsítótár beállítása maradjon **Alapértelmezett** vagy **Inaktív**.