# Képdoboz widget

> Kép, cím és leírás együtt: a Képdoboz widget tartalmi és stílusbeállításai.

A **Képdoboz** widget egy képet és mellé egy címet és leírást jelenít meg. Jó jellemzők, szolgáltatások, csapattagok bemutatására (fotó, beosztás, rövid bemutatkozás), rendezvények (kép, dátum, rövid leírás) vagy vásárlói vélemények (fotó, név, szöveg) megjelenítésére.

A kép és a szöveg mérete, igazítása és távolsága állítható, a képen pedig hatásokat (szűrők, áttetszőség, rámutatási animáció) adhatsz meg.

## A widget hozzáadása

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

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

1. Add a **Képdoboz** widgetet a vászonra.
2. A **Tartalom** fülön a **Kép kiválasztása** mezőre kattintva válassz képet a médiatárból, vagy tölts fel újat.
3. A **Képfelbontás** listával a kép méretét állítod: bélyegkép, teljes méret vagy egyéni méret.
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 az URL-t. 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ő.
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**.

Ha nincs kép kiválasztva, a **Képfelbontás**, a **Cím**, a **Leírás**, a **Link** és a **Cím HTML-címkéje** nem jelenik meg.

![A Képdoboz widget Tartalom füle: Kép kiválasztása, Képfelbontás, Cím, Leírás és Link](./kepek/widgetek-kepdoboz-tartalom.webp)

*A Képdoboz widget Tartalom füle: Kép kiválasztása, Képfelbontás, Cím, Leírás és Link* (https://minta-bolt.hu/wp-admin/post.php?post=72&action=elementor)

A képen a kiválasztott kép előnézete, a **Képfelbontás** lista, a **Cím** és a **Leírás** mező látszik.

## Stílus fül

![A Képdoboz widget Stílus füle: Kép pozíciója, Igazítás, Kép térköze és Tartalom térköze](./kepek/widgetek-kepdoboz-stilus.webp)

*A Képdoboz widget Stílus füle: Kép pozíciója, Igazítás, Kép térköze és Tartalom térköze* (https://minta-bolt.hu/wp-admin/post.php?post=72&action=elementor)

A képen a **Doboz** szekció látható az elrendezési beállításokkal.

**Doboz** szekció:

| Beállítás | Mit csinál |
|---|---|
| **Kép pozíciója** | A kép helye a szöveghez képest: balra, felül vagy jobbra. Mobilon a kép középre kerül |
| **Igazítás** | A képdoboz igazítása: balra, jobbra, középre vagy sorkizárt |
| **Kép térköze** | A kép é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 |

**Kép** szekció:

| Beállítás | Mit csinál |
|---|---|
| **Szélesség** | A kép szélessége 0 és 100 százalék között |
| **Szegély típusa** | A kép körüli szegély |
| **Sarkok lekerekítése** | A kép sarkainak lekerekítése |
| **CSS-szűrők** | Elmosás, fényerő, kontraszt, telítettség és színárnyalat, **Normál** és **Rámutatás** állapotban |
| **Átlátszatlanság** | A kép átlátszósága, **Normál** és **Rámutatás** állapotban |
| **Átmenet időtartama** | Az átmenet hossza ezredmásodpercben (1000 ms = 1 másodperc) |

**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**.

**Leírás** szekció: **Szín**, **Tipográfia** é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/).

## 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 „Bögre” kép a „Kerámia bögre” címmel és leírással](./kepek/widgetek-ikonok-es-kepek-elol.webp)

*Az oldalon a „Bögre” kép a „Kerámia bögre” címmel és leírással* (https://minta-bolt.hu/widget-demo-4/)

A képen a képdoboz a középre igazított képpel, a címmel és a leírással látszik.