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

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

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.

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.

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.

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.

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.