# Ikondoboz widget

> Ikon, cím és leírás együtt: az Ikondoboz widget tartalmi és stílusbeállításai.

Az **Ikondoboz** widget ikont, címet és leírást jelenít meg egymás mellett vagy egymás alatt. Szolgáltatások, termékjellemzők vagy egy folyamat lépéseinek bemutatására jó: az ikon felhívja a figyelmet, a cím és a leírás elmagyarázza a lényeget.

## A widget hozzáadása

1. A szerkesztőben kattints a **+** gombra, hogy megjelenjen az összes widget.
2. Kattints az **Ikondoboz** 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/).

## Példa: szolgáltatások kiemelése

Egy marketingügynökség nyitóoldalán minden szolgáltatáshoz egy ikondoboz tartozik: az ikon a szolgáltatást jelképezi, a cím a nevét adja, a leírás a részleteket.

1. Add az **Ikondoboz** widgetet a vászonra.
2. A **Tartalom** fülön az **Ikon** mezőben kattints a csillag gombra, ha az ikonkönyvtárból választanál, vagy az SVG gombra, ha saját SVG-t töltenél fel. Az SVG használatáról lásd: [SVG és ikonok](https://hub.hellowp.io/hu/plugins/elementor/globalis-beallitasok-svg-es-ikonok/).
3. A **Megtekintés** listából válaszd ki az ikon megjelenését: **Alapértelmezett**, **Halmozott** (teli háttér) vagy **Keretezett** (keret az ikon körül). Halmozott és keretezett nézetnél a **Forma** listában **Kör** vagy **Négyzetes** alakot adhatsz.
4. A **Cím** mezőbe írd a doboz címét.
5. A **Leírás** mezőbe írd a szöveget.
6. Ha a doboz kattintható legyen, a **Link** mezőbe írd be a cél URL-jét.
7. A **Cím HTML-címkéje** listában válaszd ki a cím címkéjét: **H1**-től **H6**-ig, **div**, **span** vagy **p**.

![Az Ikondoboz widget Tartalom füle: Ikon, Megtekintés, Forma, Cím, Leírás, Link és Cím HTML-címkéje](./kepek/widgetek-ikondoboz-tartalom.webp)

*Az Ikondoboz widget Tartalom füle: Ikon, Megtekintés, Forma, Cím, Leírás, Link és Cím HTML-címkéje* (https://minta-bolt.hu/wp-admin/post.php?post=72&action=elementor)

A képen az **Ikon** előnézete, a **Megtekintés** és a **Forma** lista, valamint a **Cím**, a **Leírás** és a **Link** mező látszik.

## Tartalom fül

| Beállítás | Mit csinál |
|---|---|
| **Ikon** | Az ikon: az ikonkönyvtárból választott vagy feltöltött SVG |
| **Megtekintés** | **Alapértelmezett**, **Halmozott** (teli háttér) vagy **Keretezett** (keret) |
| **Forma** | **Kör** vagy **Négyzetes**, halmozott és keretezett nézetnél |
| **Cím** | A doboz címe |
| **Leírás** | A doboz szövege |
| **Link** | A doboz linkje. A fogaskerék ikonnal beállíthatod, hogy új ablakban nyíljon meg, vagy `rel="nofollow"` kerüljön rá (ez megakadályozza, hogy a kereső a webhelyedet a hivatkozott oldallal társítsa). 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ő |
| **Cím HTML-címkéje** | A cím címkéje: **H1**-**H6**, **div**, **span** vagy **p** |

## Stílus fül

![Az Ikondoboz widget Stílus füle: Doboz szekció az ikon pozíciójával, igazítással és térközökkel](./kepek/widgetek-ikondoboz-stilus.webp)

*Az Ikondoboz widget Stílus füle: Doboz szekció az ikon pozíciójával, igazítással és térközökkel* (https://minta-bolt.hu/wp-admin/post.php?post=72&action=elementor)

A képen a **Doboz** szekció látszik, alatta az **Ikon** és a **Tartalom** szekció.

**Doboz** szekció:

| Beállítás | Mit csinál |
|---|---|
| **Ikon pozíciója** | Az ikon helye: balra, jobbra, felül vagy alul |
| **Igazítás** | A doboz tartalmának igazítása |
| **Ikon térköze** | Az ikon és a cím közötti távolság |
| **Tartalom térköze** | A cím és a leírás közötti távolság |

**Ikon** szekció:

- **Normál** állapot: **Elsődleges szín** (az ikon színe; halmozott vagy keretezett nézetnél itt állíthatod a **Másodlagos színt** is), **Méret** és **Forgatás**. Lásd: [Színválasztó](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-szinvalaszto/).
- **Rámutatás** állapot: **Elsődleges szín** és **Rámutatás animációja**, vagyis az effekt, amely az ikonra mutatáskor lejátszódik.

**Cím** szekció: **Térköz** (a cím és a leírás távolsága), **Szín**, **Tipográfia**, **Szöveg körvonala** és **Szövegárnyék**. A tipográfiáról lásd: [Betűtípus, méret és szín](https://hub.hellowp.io/hu/plugins/elementor/stilus-betutipus-meret-es-szin/), az árnyékról: [Árnyék](https://hub.hellowp.io/hu/plugins/elementor/stilus-arnyek/).

**Leírás** szekció: **Szín**, **Tipográfia** és **Szövegárnyék**.

## Haladó fül

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

## Az eredmény az oldalon

![Az oldalon a kék körben lévő csillag ikon, alatta a cím és a leírás](./kepek/widgetek-ikonok-es-kepek-elol.webp)

*Az oldalon a kék körben lévő csillag ikon, alatta a cím és a leírás* (https://minta-bolt.hu/widget-demo-4/)

A képen az oldal tetején a halmozott, kör alakú ikondoboz látszik.