# Before After (Előtte-utána) widget: függőleges és áttűnéses összehasonlítás

> Két kép összehasonlítása három stílusban: vízszintes és függőleges csúszkával, illetve áttűnéssel.

Az **Előtte-utána** (angolul Before After) widget két képet tesz egymásra, és a látogató az egérrel mozogva hasonlítja össze őket. Három stílusa van: vízszintes, függőleges és áttűnéses (Opacity). A widget a Pro bővítmény része.

## Bekapcsolás

1. Nyisd meg: **The Plus Addons → Widgets**.
2. Keress rá a **Before After** névre.
3. Kapcsold be a kapcsolóját.

Mindhárom stílushoz két, azonos méretű kép kell. A képek egymásra kerülnek, ezért a méretkülönbség azonnal látszik.

## Közös beállítások

![A Tartalom fül az Előtte-utána widgetnél](./kepek/kepek-media-elotte-utana-tartalom.webp)

*A Tartalom fül az Előtte-utána widgetnél* (https://minta-bolt.hu/wp-admin/post.php?post=70&action=elementor)

A képen a **Tartalom** fül látszik a három stílus kiválasztójával.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Stílus** | a három stílus közül választasz: vízszintes, függőleges vagy áttűnéses (**Opacity**) | vízszintes |
| **Előtte kép** | a kiindulási kép | nincs |
| **Előtte címke** | rövid felirat az előtte képen | üres |
| **Utána kép** | a kész kép | nincs |
| **Utána címke** | rövid felirat az utána képen | üres |
| **Képfelbontás** | a képek mérete | **Tele** |

A **Stílus** fülön a **Beállítások** szakaszban találod a többit.

![A Stílus fül Beállítások szakasza](./kepek/kepek-media-elotte-utana-stilus.webp)

*A Stílus fül Beállítások szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=70&action=elementor)

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Igazítás** | a widget igazítása | balra |
| **Teljes szélesség** | a widget kitölti a rendelkezésre álló szélességet | kikapcsolva |
| **Egérrel történő rámutatás** | a csúszka az egér mozgását követi, kattintás nélkül | bekapcsolva |
| **Elválasztóvonal** | megjeleníti a két képet elválasztó vonalat | kikapcsolva |
| **Elválasztó stílusa** | **Középen** vagy **Lent** | **Középen** |
| **Elválasztó szélessége** | a vonal vastagsága | 3 |
| **Elválasztó színe** | a vonal színe | fekete |
| **Elválasztó ikon** | saját ikon a fogantyúhoz | nincs |
| **Elválasztó pozíciója** | hol áll a vonal betöltéskor (százalék) | 50 |

Az elválasztóval kapcsolatos beállítások csak az **Elválasztóvonal** bekapcsolása után látszanak. A **Címke beállításai** szakaszban a feliratok formázhatók.

## Függőleges összehasonlítás

A függőleges stílus akkor jobb a vízszintesnél, ha a változás fentről lefelé történik: egy helyiség padlótól a mennyezetig, egy hosszú oldal vagy egy magas termékfotó. A fogantyú fel-le mozog a vízszintes helyett, minden más ugyanúgy működik.

1. Húzd az **Előtte-utána** widgetet az oldalra.
2. A **Tartalom** fülön állítsd a **Stílus** mezőt a középső, függőleges stílusra.
3. Válaszd ki az **Előtte kép** mezőben a kiindulási képet, és ha szeretnéd, írj rövid **Előtte címke** feliratot.
4. Válaszd ki az **Utána kép** mezőben a kész képet, és írd meg az **Utána címke** feliratot.
5. A **Stílus** fül **Beállítások** szakaszában kapcsold be az **Elválasztóvonal** kapcsolót, hogy a fogantyú középről induljon, ne a legfelső szélről.

![A függőleges összehasonlítás a nyilvános oldalon](./kepek/kepek-media-elotte-utana-fuggoleges.webp)

*A függőleges összehasonlítás a nyilvános oldalon* (https://minta-bolt.hu/km-fuggoleges/)

A képen a fogantyú a kép felső felénél áll: fölötte az előtte, alatta az utána kép látszik.

### Hogyan viselkedik

- A fogantyú követi az egeret fel-le. A mutató alakja fel-le nyíl, így a látogató látja, hogy mozgatható.
- A függőleges stílus az előtte kép magasságát vágja, a vízszintes a szélességét, az áttűnéses nem vág.
- Az **Elválasztó pozíciója** a tetejétől számított százalék, alapértéke 50.
- Az **Előtte címke** elhalványul, amikor a fogantyú a közelébe ér, így nem kerül az elválasztó alá. Az utána címke mindig látszik.
- Az elválasztó minden beállítása (stílus, szélesség, szín, ikon, pozíció) rejtve marad, amíg az **Elválasztóvonal** ki van kapcsolva.

### Korlátok

- Ha az **Elválasztóvonal** ki van kapcsolva, az előtte kép nulla magasságról indul, és az oldal csak az utána képet mutatja, amíg a látogató meg nem mozdítja az egeret. Ezért kapcsold be.
- A két képnek azonos méretűnek kell lennie, különben a keret nem tölt ki rendesen.

### Hibaelhárítás

**Betöltéskor csak az utána kép látszik.** Kapcsold be az **Elválasztóvonal** kapcsolót a **Stílus** fül **Beállítások** szakaszában, és állítsd be az **Elválasztó pozíciója** mezőt. Kikapcsolt elválasztónál a fogantyú a felső szélről indul, ami az előtte képet nullára zsugorítja.

**A fogantyú oldalra mozog, nem fel-le.** A stílus még vízszintes. Állítsd át függőlegesre a **Tartalom** fülön.

**Nincs Elválasztóvonal kapcsoló.** Az áttűnéses stílusnál nem látszik. Válts vissza vízszintesre vagy függőlegesre.

## Vízszintes összehasonlítás

A vízszintes összehasonlítás az alapértelmezett stílus: a látogató a fogantyút balra-jobbra húzza, és a két kép különbségét látja.

1. Húzd az **Előtte-utána** widgetet az oldalra.
2. A **Tartalom** fülön a **Stílus** maradjon vízszintesen (alapérték).
3. Válaszd ki az **Előtte kép** mezőben a kiindulási képet, és ha szeretnéd, írj rövid **Előtte címke** feliratot, például „Előtte” vagy „Eredeti”.
4. Válaszd ki az **Utána kép** mezőben a kész képet, és szükség esetén írd meg az **Utána címke** feliratot.
5. A **Stílus** fül **Beállítások** szakaszában kapcsold be az **Elválasztóvonal** kapcsolót. Ezt a lépést a legtöbben kihagyják: kikapcsolt elválasztónál az előtte kép nulla szélességről indul, és az oldal csak az utána képet mutatja, amíg a látogató az egeret meg nem mozdítja. Az elválasztó bekapcsolásakor megjelenik az **Elválasztó pozíciója** is, ami alapból 50%-nál, középen indítja a fogantyút.

![A vízszintes összehasonlítás a nyilvános oldalon](./kepek/kepek-media-elotte-utana-vizszintes.webp)

*A vízszintes összehasonlítás a nyilvános oldalon* (https://minta-bolt.hu/km-elotte-utana/)

A képen a fogantyú a kép közepe táján áll: balra az előtte, jobbra az utána kép látszik, mindkettő a saját címkéjével.

### Hogyan viselkedik

- A fogantyú követi az egeret balra-jobbra, a mutató alakja ilyenkor kétirányú vízszintes nyíl. Egy 565 képpont széles widgetben az egér a szélesség 25%-ánál az előtte kép 141 képpontját hagyta láthatóan, 58%-nál 328-at, 75%-nál 424-et.
- A két címke egymással szemközti sarokban áll. Az előtte címke elhalványul, amikor a fogantyú a közelébe ér, így nem kerül az elválasztó alá. Az utána címke mindig látszik.
- Az elválasztóvonal és a hozzá tartozó beállítások rejtve maradnak, ha a stílus **Opacity**, mert ott nincs mit elválasztani.
- Az **Egérrel történő rámutatás** alapból be van kapcsolva, ez mozgatja a fogantyút az egér követésével.

### Korlátok

- A widget a Pro bővítmény része, ingyenes változata nincs. Csak az ingyenes bővítménnyel a widget meg sem jelenik az oldalon, még helyőrző sincs.
- A két kép legyen azonos méretű és képarányú, különben nem fedik egymást.

### Hibaelhárítás

**Betöltéskor csak az utána kép látszik, amíg meg nem mozdítom az egeret.** Ez az **Elválasztóvonal** alapértéke. Kapcsold be a **Stílus → Beállítások** szakaszban, és állítsd be az **Elválasztó pozíciója** mezőt oda, ahol a fogantyú indulni szeretne.

**A widget nincs az Elementor panelen.** Kapcsold be a **The Plus Addons → Widgets** oldalon a **Before After** kapcsolóját. Az ingyenes bővítménnyel nem lesz ott.

**Nem találom az Elválasztóvonal kapcsolót.** Az **Opacity** stílusnál rejtve van.

**A két kép nem fedi egymást.** Használj azonos méretű képeket: a kisebbik nem tölti ki a keretet.

## Áttűnéses (Opacity) összehasonlítás

Az áttűnéses stílusnál nincs elválasztó. A két kép egymáson fekszik, és az egér mozgatására az egyik áttűnik a másikba. Finom különbségekhez jobb a kemény vonalnál: színkorrekcióhoz, retusáláshoz vagy egy átalakított felülethez.

1. Húzd az **Előtte-utána** widgetet az oldalra.
2. A **Tartalom** fülön állítsd a **Stílus** mezőt a harmadik, **Opacity** stílusra.
3. Válaszd ki az **Előtte kép** mezőben a kiindulási képet, és ha kell, írj **Előtte címke** feliratot.
4. Válaszd ki az **Utána kép** mezőben a kész képet, és írd meg az **Utána címke** feliratot.

![Az áttűnéses stílus a nyilvános oldalon](./kepek/kepek-media-elotte-utana-atmenet.webp)

*Az áttűnéses stílus a nyilvános oldalon* (https://minta-bolt.hu/km-opacity/)

A képen az egér a kép jobb oldalán áll: az előtte kép már szinte teljesen eltűnt, az utána kép látszik.

### Hogyan viselkedik

- Egérrel a widget fölött haladva az előtte kép halványodik, az utána kép erősödik. Alaphelyzetben az előtte kép teljesen látszik, tehát az oldal ezzel tölt be.
- Semmi nem vágódik le: csak az előtte kép átlátszósága változik, mindkét kép végig teljes méretű.
- Az **Elválasztóvonal** és minden elválasztó beállítás rejtve van ennél a stílusnál. Ez nem hiba, nincs mit elválasztani.
- A címkék ugyanúgy működnek, mint a másik két stílusnál.

### Melyik stílust válaszd

| Stílus | Mit csinál a látogató | Mire jó |
|---|---|---|
| Vízszintes | balra-jobbra húzza a fogantyút | az egész szélességben ható különbségek |
| Függőleges | fel-le húzza a fogantyút | fentről lefelé ható változások |
| Áttűnéses | végigmozgatja az egeret, a képek áttűnnek | finom különbségek: színezés, retusálás, megújított felület |

### Korlátok

- Nincs elválasztó, ezért semmi nem jelzi a látogatónak, hogy a widget interaktív. A címkék segítenek.
- A kezdő keverést nem lehet beállítani: az előtte kép mindig teljesen látszik az elején. Az **Elválasztó pozíciója** erre a stílusra nem vonatkozik.
- A két képnek azonos méretűnek kell lennie.
- A hatás a nyilvános oldalon fut, az Elementor szerkesztőjének vásznán nem.

### Hibaelhárítás

**Eltűnt az Elválasztóvonal kapcsoló.** Ez a várt viselkedés, ha a stílus **Opacity**. Válts vissza vízszintesre vagy függőlegesre, ha látható elválasztót szeretnél.

**Semmi nem tűnik át.** Ellenőrizd, hogy az **Előtte kép** és az **Utána kép** is meg van adva, és hogy a két kép ténylegesen különbözik. Aztán a nyilvános oldalon nézd meg, a szerkesztő vásznán a hatás nem fut.

**A két kép nem fedi egymást az áttűnéskor.** Használj azonos méretű képeket.