# Ikonlista widget

> Ikonos felsorolás készítése: elrendezés, tételek, linkek, elválasztó, ikon- és szövegstílus.

Az **Ikonlista** widget olyan felsorolást készít, amelyben minden tétel előtt ikon áll. Az ikont kiválaszthatod a könyvtárból, vagy feltölthetsz sajátot. Az ikonok és a szöveg mérete, színe és igazítása, valamint a tételek közti térköz is állítható, így a lista illeszkedik a webhely kinézetéhez.

Használhatod például tagsági csomagok előnyeinek, termékjellemzőknek, egy szolgáltató kínálatának vagy egy szálloda szolgáltatásainak bemutatására.

## A widget hozzáadása

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

## Ikonlista készítése lépésről lépésre

1. Add az **Ikonlista** widgetet a vászonra.
2. A **Tartalom** fülön az **Elrendezés** mellett válaszd ki a megjelenést: az alapértelmezett függőleges lista vagy a vízszintes (soros) elrendezés.
3. A widget három alapértelmezett tétellel érkezik. A **Tételek** között a **Elem hozzáadása** gombbal újat veszel fel; a tétel mellett a másolás ikonnal megkettőzöd, az **×** ikonnal törlöd.
4. Kattints egy tételre a beállításai megnyitásához:
   - **Szöveg**: a tétel szövege,
   - **Ikon**: az ikonkönyvtárból választott vagy feltöltött SVG,
   - **Link**: a tétel URL-je. A fogaskerék ikonnal új ablakban nyithatod meg, vagy `rel="nofollow"` értéket adhatsz hozzá. Az **Egyéni attribútumok** mezőben a kulcsot és az értéket függőleges vonal (`|`) választja el, az attribútumpárokat vessző.
5. A **Link alkalmazási helye** listában add meg, hogy a link a **Teljes szélesség**re vagy csak a szövegre (**Soron belül**) vonatkozzon.

A tétel szövege és linkje dinamikus is lehet: kattints a mező melletti adatbázis ikonra, és válaszd ki az adatforrást.

![Az Ikonlista widget Tartalom füle: Elrendezés, Tételek, Elem hozzáadása és Link alkalmazási helye](./kepek/widgetek-ikonlista-tartalom.webp)

*Az Ikonlista widget Tartalom füle: Elrendezés, Tételek, Elem hozzáadása és Link alkalmazási helye* (https://minta-bolt.hu/wp-admin/post.php?post=72&action=elementor)

A képen az **Elrendezés** kapcsolói, a három tétel (másolás és törlés ikonnal) és a **Link alkalmazási helye** lista látszik.

## Tartalom fül

| Beállítás | Mit csinál |
|---|---|
| **Elrendezés** | Függőleges (alapértelmezett) vagy vízszintes, soros lista |
| **Tételek** | A lista elemei: **Szöveg**, **Ikon**, **Link** |
| **Link alkalmazási helye** | A link a teljes sorra vagy csak a szövegre vonatkozik |

## Stílus fül

![Az Ikonlista widget Stílus füle: Lista szekció a tételek közti térközzel, igazítással és elválasztóval](./kepek/widgetek-ikonlista-stilus.webp)

*Az Ikonlista widget Stílus füle: Lista szekció a tételek közti térközzel, igazítással és elválasztóval* (https://minta-bolt.hu/wp-admin/post.php?post=72&action=elementor)

A képen a **Lista** szekció látszik, alatta az **Ikon** és a **Szöveg** szekció.

**Lista** szekció:

| Beállítás | Mit csinál |
|---|---|
| **Térköz az elemek között** | A tételek közti távolság |
| **Igazítás** | A tételek igazítása a widgeten belül |
| **Elválasztó** | Bekapcsolva vonal jelenik meg a tételek között. Beállítható a **Stílus** (**Folytonos**, **Dupla**, **Pontozott** vagy **Szaggatott**), a **Vastagság**, a **Szélesség** (a konténerhez képest) és a **Szín** |

**Ikon** szekció:

| Beállítás | Mit csinál |
|---|---|
| **Szín** | Az ikon színe **Normál** és **Rámutatás** állapotban |
| **Átmenet időtartama** | Rámutatáskor ennyi idő alatt vált az ikon megjelenése |
| **Méret** | Az ikon pontos mérete |
| **Térköz** | Az ikon és a szöveg távolsága |
| **Vízszintes igazítás** | Az ikon vízszintes helye a saját tárolójában |
| **Függőleges igazítás** | Az ikon függőleges helye a saját tárolójában |
| **Függőleges pozíció módosítása** | Az ikon finom függőleges eltolása |

**Szöveg** szekció: **Tipográfia** (lásd: [Betűtípus, méret és szín](https://hub.hellowp.io/hu/plugins/elementor/stilus-betutipus-meret-es-szin/)), **Szövegárnyék**, **Szín** (**Normál** és **Rámutatás** állapotban) és **Átmenet időtartama**.

## Haladó fül

A **Haladó** fülön a widget helyét, térközeit és egyedi kódját állíthatod. Lásd: [Haladó fül](https://hub.hellowp.io/hu/plugins/elementor/stilus-halado-ful/).

## Az eredmény az oldalon

![Az oldalon a háromtételes ikonlista pipa ikonokkal](./kepek/widgetek-ikonok-es-kepek-elol.webp)

*Az oldalon a háromtételes ikonlista pipa ikonokkal* (https://minta-bolt.hu/widget-demo-4/)

A képen az ikondoboz alatt a háromtételes lista látszik.