# Információs doboz widget: beállítások, szolgáltatásdoboz, képes doboz és teljes doboz link

> Az Információs doboz widget elrendezései, stílusai, ikon- és képtípusai, a gomb, a cím és a teljes dobozra kiterjedő link.

Az **Információs doboz** (angolul Info Box) egy ikont vagy képet, egy címet és egy rövid leírást fog össze egy blokkban, így az olvasó egy pillantással megérti az üzenetet. Több dobozból szolgáltatásrács, funkciólista vagy lépéssor építhető. A widget az Elementor szerkesztőjében a **Plus Essential** csoportban található.

## Előkészületek

- Kapcsold be a widgetet: **The Plus Addons → Widgets**, keress rá az **Info Box** szóra, kapcsold be, majd mentsd.
- Szerkeszd az oldalt Elementorral, és húzd az **Információs doboz** widgetet a vászonra.
- A widget nagy része az alap bővítményben is elérhető. A **Körhinta** elrendezés, három stílus (2., 5. és 6. stílus), a **Lottie** ikon és a **Teljes információs dobozra kiterjedő link** a Pro kiadás része.
- Egy frissen ledobott widgetben már van tartalom: a cím **The Plus**, a leírás pedig az Elementor helyőrző szövege. Publikálás előtt írd át mindkettőt.

![Az Információs doboz widget Tartalom panelje](./kepek/dobozok-gombok-6-infobox-panel.webp)

*Az Információs doboz widget Tartalom panelje* (https://minta-bolt.hu/wp-admin/post.php?post=124&action=elementor)

A képen az **Elrendezés kiválasztása**, az **Információs doboz stílusa**, a cím, a leírás, a **Link** és az **Ikon kiválasztása** mező látszik.

## Elrendezés és stílus

Az **Elrendezés kiválasztása** az első döntés, mert a további mezők nagy része ettől függ.

| Elrendezés | Mit kapsz |
| --- | --- |
| **Lista** (alap) | Egyetlen információs doboz. Több dobozhoz tegyél több widgetet egy Elementor-tárolóba vagy rácsba. |
| **Körhinta** | Több doboz egyetlen widgetben, amelyek csúsznak. Lásd az [Információs doboz körhinta](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-infobox-karusszel/) fejezetet. |

Az **Információs doboz stílusa** hat elrendezést kínál az ikon, a cím és a szöveg helyére: **1. stílus** és **6. stílus** között. A **2. stílus**, az **5. stílus** és a **6. stílus** Pro. Válaszd ki a stílust, mielőtt a **Stílus** fülön finomhangolsz: minden stílus máshová teszi az ikont és a címet, ezért az egyiknél beállított térközök a másiknál ritkán jók.

## Tartalom

- **Az információs doboz címe**: a doboz címe. A **Cím HTML-címke** mező adja meg, milyen HTML-elemet használ. Az alapérték `div`, nem címsor. Ha a dobozok valódi szakaszcímek az oldalon, állítsd H3-ra vagy H4-re, hogy a keresők és a képernyőolvasók lássák a szerkezetet.
- **Leírás**: a rövid szöveg a címe alatt.
- **Link**: csak a cím szövegét linkeli. A teljes doboz linkjétől különbözik, lásd lentebb.

## Mi áll a cím mellett: Ikon kiválasztása

| Beállítás | Mit mutat | Kiadás |
| --- | --- | --- |
| **Nincs** | Semmit, csak a címet és a leírást. | alap |
| **Ikon** (alap) | Betűtípus-ikont. Az **Ikonbetűkészlet** adja meg a készletet: **Font Awesome**, **Font Awesome 5**, **Icons Mind** vagy **Icon Image** (az utóbbi kettő Pro). | alap |
| **Kép** | Képet a médiatárból. A **Képfelbontás** mezővel választasz méretet. | alap |
| **SVG** | Feltöltött vagy előre elkészített SVG-t. | Pro |
| **Lottie** | Lottie-animációt URL-ből. Lásd az [Információs doboz körhinta](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-infobox-karusszel/) fejezetet. | Pro |
| **Szöveg** | Rövid szöveget ikon helyett, például lépések számozásához. A mező kezdőértéke `0`, ezért a doboz addig egy kósza nullát mutat, amíg át nem írod. | alap |

A Font Awesome 5 ikonok beágyazott SVG-ként jelennek meg, ezért akkor is látszanak, ha az oldal nem tölti be a Font Awesome stíluslapját.

## Gomb

A **Gomb** kapcsoló alapból kikapcsolt. Bekapcsolva ezek a mezők jelennek meg:

| Beállítás | Mit csinál |
| --- | --- |
| **Gomb típusa** | **Alap** (a lenti stílusok) vagy **Globális stílus** (egy mentett globális gombstílus). |
| **Gomb stílusa** | **Stílus 1**, **Stílus 2** (alap) vagy **Stílus 3**. |
| **Gomb szövege** | A felirat. |
| **Gomb hivatkozása** | A cél: teljes URL vagy horgony, például `#arak`. |
| **Ikon**, **Ikon pozíciója**, **Ikon térköze** | A gomb ikonja. |

## Stílus fül

A **Stílus** fül szakaszai: **Cím**, **Alsó szegély**, **Leírás**, **Háttérbeállítások**, **Gomb**, **SVG**, **Lottie**, **Ikon**, **Kép**, **Jelölő szövege**, **Carousel beállításai**, **Szöveg**, **Extra opciók** és **On Scroll View Animation**. A szerkesztő csak azt a szakaszt mutatja, amely az aktuális elrendezésre és ikontípusra vonatkozik, ezért a lista dolgozás közben bővül és szűkül. A **Háttérbeállítások** a doboz hátterét tartalmazza normál és rámutatásos állapotra; az **Extra opciók** a doboz rámutatásos hatásait, a **Jelölő szövege** pedig a kitűzött szöveget (jelvényt) kezeli.

## Szolgáltatásdoboz készítése

A szolgáltatásdoboz egy kis kártya: megnevezi a szolgáltatást, egy mondatban leírja, és tovább is visz. Ehhez az alap bővítmény elég.

1. Húzd az **Információs doboz** widgetet az oldalra.
2. Hagyd az **Elrendezés kiválasztása** mezőt **Lista** értéken.
3. Az **Információs doboz stílusa** mezőben válaszd az **1. stílus**, a **3. stílus** vagy a **4. stílus** értéket: ez a három ingyenes.
4. A cím helyére írd a szolgáltatás nevét, a leírásba egy mondatot.
5. Az **Ikon kiválasztása** maradjon **Ikon**, és válassz ikont az **Ikonkönyvtár** mezőben, vagy válts **Kép** értékre.
6. Kapcsold be a **Gomb** kapcsolót, add meg a feliratot és a hivatkozást.

![Kész szolgáltatásdoboz ikonnal, címmel, leírással és gombbal](./kepek/dobozok-gombok-6-szolgdoboz.webp)

*Kész szolgáltatásdoboz ikonnal, címmel, leírással és gombbal* (https://minta-bolt.hu/tp-d6-szolgdoboz/)

A képen az ikon, a cím alatti vonal, a leírás és a **Tovább** gomb látszik.

Tudnivalók:

- Egy widget egy doboz. Négy szolgáltatáshoz négy widget kell: tegyél egy három vagy négy oszlopos tárolót, és minden oszlopba egy **Információs doboz** kerüljön. A **Körhinta** elrendezés ismétel ugyan, de ez Pro.
- A dobozok nem egyenlítik ki a magasságukat. Ha az egyik leírás hosszabb, igazítsd a tároló beállításaival, vagy kapcsold be a **The Plus Addons → Extensions** alatt az **Equal Height** kiterjesztést (lásd a [Widgetek és kiterjesztések](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/widgetek-es-kiterjesztesek/) fejezetet), vagy rövidítsd a leírásokat hasonló hosszúra.
- A gomb valódi hivatkozás, ezért horgonnyal (`#arak`) is működik.

## Képes doboz készítése

A képes doboz ugyanaz az Információs doboz, csak az ikon helyén fénykép vagy illusztráció áll. Csapattagokhoz, termékkategóriákhoz és esettanulmányokhoz jó.

1. Töltsd fel a képet a médiatárba.
2. Húzd az **Információs doboz** widgetet az oldalra, és hagyd a **Lista** elrendezést.
3. Válaszd az **1. stílus**, a **3. stílus** vagy a **4. stílus** értéket. A három stílus abban különbözik, hová kerül a kép a szöveghez képest.
4. Töltsd ki a címet és a leírást.
5. Az **Ikon kiválasztása** értéke legyen **Kép**.
6. A megjelenő **Kép használata ikonként** mezőre kattintva válaszd ki a képet.

![Képes doboz a publikált oldalon](./kepek/dobozok-gombok-6-kepesdoboz.webp)

*Képes doboz a publikált oldalon* (https://minta-bolt.hu/tp-d6-kepesdoboz/)

A képen a doboz képe a cím és a leírás fölött áll.

A **Képfelbontás** a mező alatt azt dönti el, melyik legenerált fájlt tölti be az oldal:

| Képfelbontás | Mit kér az oldal |
| --- | --- |
| **Teljes** (alap) | Az eredeti feltöltött fájlt, teljes méretben. |
| **Thumbnail** | A kis négyzetes kivágást, jellemzően 150 × 150 képpont. |
| **Medium**, **Medium Large**, **Large** | A WordPress köztes méreteit. |
| **Egyéni** | A te megadott méretedet. |

A beállítás a letöltött fájlt változtatja, nem csak a megjelenített méretet. A **Teljes** érték egy kis dobozhoz is az eredeti, nagy képet töltetné le, ezért válassz a megjelenő mérethez közeli felbontást. A **Stílus** fülön a **Kép** szakasz tartalmazza a kép szélességét, térközeit, szegélyét, lekerekítését és rámutatásos hatását.

Tudnivalók:

- A kép az ikont helyettesíti, nem egészíti ki: az **Ikon kiválasztása** egyszerre egy típust ad. Ha visszaváltasz **Ikon** értékre, a kiválasztott kép nem vész el.
- Az alternatív szöveg a médiatár kép adataiból jön, ott állítsd be.
- Nincs kivágás vagy fókuszpont: a **Képfelbontás** csak a már legenerált méretek közül választ. Átkeretezéshez szerkeszd a képet a médiatárban.
- A widget magától nem tölti késleltetve a képet, ezért sok teljes felbontású képes doboz nehéz oldalt ad.
- Egy widget egy kép. Egy sor képes dobozhoz widgetenként egy oszlop kell.
- A **2. stílus**, az **5. stílus** és a **6. stílus** Pro nélkül teljesen üres dobozt rajzol, nem esik vissza ingyenes stílusra.

## Link a teljes dobozra

Az a kártya, amelyik csak a kis címre reagál, hibásnak hat. A látogató a doboz közepére kattint, és azt várja, hogy az működjön. A **Teljes információs dobozra kiterjedő link** egyetlen hivatkozásba csomagolja az egész dobozt, így az ikonra, a címre, a leírásra vagy az üres részre kattintva is megnyílik a célod.

Ez Pro funkció, és csak a **Lista** elrendezésben van itt. Körhintában ugyanez a kapcsoló minden **Carousel információs doboz** sor belsejében található.

### Két „Link” mező

A **Tartalom** fülön két azonos nevű mező is lehet, és a panel nem különbözteti meg őket:

| Melyik | Hol van | Mit linkel |
| --- | --- | --- |
| A cím linkje | Mindig látszik, közvetlenül a **Leírás** alatt. | Csak a cím szövegét. |
| A teljes doboz linkje | Csak akkor jelenik meg, ha bekapcsolod a **Teljes információs dobozra kiterjedő link** kapcsolót. | Az egész dobozt. |

A kettő nem adódik össze. Amint a teljes doboz linkje be van kapcsolva, csak az számít, a cím mezőjébe írt hivatkozás figyelmen kívül marad. Hagyd üresen az első mezőt.

### Lépések

1. Add meg az **Információs doboz stílusát**, a címet, a leírást és az ikont a szokásos módon.
2. Hagyd üresen a leírás alatti **Link** mezőt.
3. Görgess lejjebb a **Tartalom** fülön, és kapcsold be a **Teljes információs dobozra kiterjedő link** kapcsolót.
4. Közvetlenül alatta megjelenik egy második **Link** mező: írd bele a cél URL-jét.
5. A mező beállítás ikonjával megadhatod, hogy a link új lapon nyíljon, vagy `nofollow` jelölést kapjon.

![A teljes dobozra linkelt információs doboz](./kepek/dobozok-gombok-6-teljeslink.webp)

*A teljes dobozra linkelt információs doboz* (https://minta-bolt.hu/tp-d6-teljeslink/)

A képen a doboz egyetlen hivatkozás: a cím már nem külön kattintható.

### Működés és korlátok

- A link magát a dobozt veszi körül, ezért az ikon, a cím, a leírás és a körülöttük lévő térköz is kattintható.
- A dobozban lévő **Gomb** megtartja a saját **Gomb hivatkozása** mezőt: a gombra kattintva oda jut a látogató, ahová a gomb mutat, máshová kattintva a teljes doboz linkjére.
- A link csak a publikált oldalon él. A szerkesztőben a dobozra kattintva a widget kijelölődik.
- A mező kezdőértéke `#`, nem üres. Ha bekapcsolod a kapcsolót, de nem írsz valódi URL-t, a doboz végig kattintható, de nem visz sehova, az oldal csak az elejére ugrik. Mindig adj meg valódi címet.
- A dobozban a gombon kívül nem lehet másik, eltérő célú link: a leírás szövegében lévő hivatkozást is elnyeli a külső link.
- Pro nélkül a kapcsoló látszik, de a doboz nincs linkbe csomagolva, ezért a kattintás nem csinál semmit.

## Hibaelhárítás

| Jelenség | Teendő |
| --- | --- |
| A doboz teljesen üres. | Ellenőrizd az **Információs doboz stílusa** mezőt: a 2., 5. és 6. stílus Pro nélkül nem rajzol semmit. Ha egy oldal ilyen stílussal készült, és később kikapcsolod a Pro-t, az ikon, a cím és a leírás eltűnik, figyelmeztetés nélkül. Váltsd a dobozokat 1., 3. vagy 4. stílusra, mielőtt eltávolítod a Pro-t. |
| Nem találom a Lottie lehetőséget. | Az **Ikon kiválasztása** listájában a Lottie csak aktív Pro mellett jelenik meg. |
| A doboz címe „The Plus”, alatta helyőrző szöveg. | Ezek a mezők kezdőértékei. Írd át őket. |
| A widget nincs az Elementor panelen. | Kapcsold be az **Info Box** widgetet a **The Plus Addons → Widgets** oldalon, mentsd, és töltsd újra a szerkesztőt. A **Plus Essential** csoportban van. |
| A dobozra kattintva nem történik semmi. | A **Teljes információs dobozra kiterjedő link** ki van kapcsolva, vagy a mezője még `#`. Nézd meg a publikált oldalon, ne a szerkesztőben. |
| A doboz rossz oldalra visz. | Valószínűleg a cím **Link** mezőjét töltötted ki, a teljes dobozét nem. Töröld az elsőt, és töltsd ki a másodikat. |
| Csak a cím kattintható. | A **Teljes információs dobozra kiterjedő link** nincs bekapcsolva. |
| A kép hatalmas vagy elmosódott. | Állítsd át a **Képfelbontás** értékét. |
| A kép rossz helyen van. | A helyét az **Információs doboz stílusa** adja, külön igazítás nincs. Próbáld a 3. vagy 4. stílust. |