# Kép widget és Kép elem

> Kép beszúrása és testre szabása: felbontás, igazítás, felirat, link, méret, szűrők, rámutatási hatás, szegély és árnyék; a v4 szerkesztő Kép eleme.

A képek az oldal figyelemfelkeltésében kulcsszerepet játszanak. A **Kép** widgettel képet szúrhatsz be, és testre szabhatod: méretét, igazítását, rámutatási hatásait, szűrőit, és URL-hez is kötheted.

A szerkesztő v4-es változatában ugyanez az **Kép** elem néven érhető el; ennek beállításait lent, külön szakaszban találod.

## Mire jó?

- Egy portfólió képei, amelyek mindegyike egy projektoldalra vagy részletes nézetre mutat.
- Rendezvények vagy webináriumok bannere, plakátja.
- Átalakítások előtte-utána képei (lakásfelújítás, edzés eredményei).
- Egy műhely fotója az elérhetőségi adatok mellett.

## A widget hozzáadása és törlése

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

A törléshez jelöld ki a vásznon, és nyomd meg a Delete billentyűt. Lásd: [Elemek törlése és mozgatása](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-elemek-torlese-es-mozgatasa/).

## Kép beszúrása lépésről lépésre

1. Add a **Kép** widgetet a vászonra.
2. A **Tartalom** fülön a **Kép kiválasztása** mezőre kattintva tölts fel képet a számítógépedről, vagy válassz a médiatárból. Ha nem akarsz kézzel képet megadni, használhatod a dinamikus lehetőséget: a bejegyzés kiemelt képét, a webhely logóját vagy a szerző profilképét automatikusan beilleszti. A médiatárban érdemes **Helyettesítő szöveget** (alt) is megadni a képhez: ez a keresőoptimalizálást és a hozzáférhetőséget segíti.
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. Az **Igazítás** mezővel a kép helyét adod meg: balra, középre vagy jobbra.
5. A **Felirat** listában válaszd ki a feliratot: **Nincs**, **Csatolmány felirata** (a médiatárban a képhez megadott felirat) vagy **Egyéni felirat** (a szerkesztőben közvetlenül beírt szöveg).
6. A **Link** listával kattinthatóvá teheted a képet: **Médiafájlok**, **Egyéni URL** vagy **Nincs**.
   - **Médiafájlok** esetén a **Lightbox** mezővel az alapbeállítástól eltérően kérheted vagy tilthatod a lightboxot (**Igen** / **Nem**). Lásd: [Lightbox beállításai](https://hub.hellowp.io/hu/plugins/elementor/widgetek-lightbox/).
   - **Egyéni URL** esetén a fogaskerék ikonnal új ablakban nyithatod meg a linket, 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ő.

![A Kép widget Tartalom füle: Kép kiválasztása, Képfelbontás, Felirat, Egyéni felirat és Link](./kepek/widgetek-kep-tartalom.webp)

*A Kép widget Tartalom füle: Kép kiválasztása, Képfelbontás, Felirat, Egyéni felirat é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, az **Egyéni felirat** mező és a **Link** lista látszik.

### A kép törlése vagy cseréje

A panelen vidd az egeret a kép fölé, és kattints a kuka ikonra a törléshez. Ha magára a képre kattintasz, megnyílik a médiatár, és másik képet választhatsz.

## Stílus fül

![A Kép widget Stílus füle: Igazítás, Szélesség, Maximális szélesség, Magasság, Normál és Rámutatás állapot, Szegély típusa és Dobozárnyék](./kepek/widgetek-kep-stilus.webp)

*A Kép widget Stílus füle: Igazítás, Szélesség, Maximális szélesség, Magasság, Normál és Rámutatás állapot, Szegély típusa és Dobozárnyék* (https://minta-bolt.hu/wp-admin/post.php?post=72&action=elementor)

A képen az **Igazítás**, a méretezési beállítások, az átlátszatlanság és a CSS-szűrők, a szegély és a **Dobozárnyék** látszik.

| Beállítás | Mit csinál |
|---|---|
| **Szélesség** | A kép szélessége |
| **Maximális szélesség** | A kép legnagyobb szélessége |
| **Magasság** | A kép magassága. Beállítása után az **Objektum illesztése** mezővel adod meg, hogyan illeszkedjen a kép: **Kitöltés** (a teljes helyet kitölti, akár torzítva), **Borítás** (a szélességhez nyújtja, a túllógó részt levágja) vagy **Tartalmazás** (az egész kép látszik, de üres részek maradhatnak) |
| **Átlátszatlanság** (Normál) | A kép átlátszósága |
| **CSS-szűrők** (Normál) | Elmosás, fényerő, kontraszt és telítettség |
| **Átmenet időtartama** (Rámutatás) | A rámutatási animáció időtartama |
| **Rámutatás animációja** (Rámutatás) | A kép fölé vitt egérre lejátszódó effekt |
| **Szegély típusa** | **Nincs**, **Folytonos**, **Dupla**, **Pontozott**, **Szaggatott** vagy **Hornyolt** |
| **Sarkok lekerekítése** | A kép sarkainak lekerekítése |
| **Dobozárnyék** | Árnyék a kép körül. Lásd: [Á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/).

## A Kép elem a v4 szerkesztőben

Ez a rész a v4 szerkesztőt használóknak szól. A különbségekről lásd: [A v3 és a v4 szerkesztő különbségei](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-v3-es-v4-kulonbsegek/).

A **Kép** elem a képek hozzáadására és testre szabására szolgál: kiválaszthatod a képet, beállíthatod a méretét és az igazítását, hatásokat adhatsz hozzá, és URL-hez kötheted.

Az elem felvétele és törlése ugyanúgy megy, mint a widgeté. A kép beállítása:

1. Add az elemet a vászonra. A panelen megjelennek a **Kép** elem beállításai.
2. Az **Általános** fülön vidd az egeret a **Kép** mező fölé, és kattints a **Kép kiválasztása** gombra. Online képet is használhatsz az URL beillesztésével.
3. Válassz képet a médiatárból, és kattints a **Kiválasztás** gombra. A **Felbontás** listával a kép minőségét állíthatod.
4. Ha a képnek linkelnie kell (például a foglalási oldalra), kattints a **Link** melletti **+** jelre.
5. A **Link** szövegmezőbe írd be a cél URL-jét. A képre kattintva a látogató erre az oldalra jut.

### Az Általános fül beállításai

| Beállítás | Mit csinál |
|---|---|
| **Kép** | A kép kiválasztása |
| **Felbontás** | A kép minősége. Minél nagyobb a felbontás, annál jobb a minőség, de annál nagyobb a fájl, ami lassíthatja az oldal betöltését |
| **Link** | A **+** jellel adható meg; a képre kattintva a látogató a linkre jut |
| **Megnyitás új lapon** | Link esetén ezzel a kapcsolóval új lapon nyílik meg a cél |
| **ID** | Azonosító, amellyel az elemre egyedileg hivatkozhatsz |

A **Stílus** fül szekciói: **Elrendezés**, **Térköz**, **Méret**, **Pozíció**, **Tipográfia**, **Háttér**, **Szegély** és **Effektek**. Részletek: [Stílus fül a v4 szerkesztőben](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-tipografia/), [méret](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-meret/), [pozíció](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-pozicio/), [háttér](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-hatter/) és [hatások](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-hatasok/).

## Az eredmény az oldalon

![Az oldalon a középre igazított Kép widget „Kerámia bögre” felirattal](./kepek/widgetek-ikonok-es-kepek-elol.webp)

*Az oldalon a középre igazított Kép widget „Kerámia bögre” felirattal* (https://minta-bolt.hu/widget-demo-4/)

A képen a középre igazított kép és az egyéni felirat látszik.