Nogle ting er nemmere at vise end at fortælle: et retoucheret foto, et rum efter en ombygning, et design før og efter en oprydning. Den gratis Billedsammenligningswidget i Master Addons til Elementor stabler to billeder og taber et trækbart håndtag mellem dem, så besøgende glider for selv at afsløre forskellen.
Du indlæser et førbillede og et efterbillede, tilføjer etiketter, vælger en lodret eller vandret opdeling og styler derefter håndtaget og etiketterne, så de passer til dit websted. Denne vejledning dækker hver indstilling i widgetten.
Hvad gør Image Comparison-widgetten #
Widgetten viser to billeder i samme ramme, det ene oven på det andet, med et skyderhåndtag ned i midten. Træk håndtaget, og det tørrer mellem før og efter billedet. Du kan mærke hver side, vende opdelingen fra venstre-højre til top-bund og beslutte, om håndtaget følger et træk (gratis) eller, med Master Addons Pro, en klik- eller musebevægelse.
Der er to faner at arbejde med. Content holder de to billeder, etiketterne og skyderens adfærd. Style styrer layoutet, overlejringsetiketterne og håndtaget. De sædvanlige Elementor Advanced-indstillinger sidder ved siden af dem.
Før du starter #
- WordPress med Elementor installeret og aktiv.
- Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
- To billeder, der står på linje, samme størrelse og indramning, så diaset læses som én scene.
Sådan tilføjes widgetten Billedsammenligning #
I Elementor-editoren skal du åbne Elementer panel og søg efter Billedsammenligning, eller rul til afsnittet Mastertilføjelser (widgetsene bærer et lilla MA-badge). Træk det over på din side, og det indlæses med to eksempelbilleder og en skyder, du kan begynde at redigere med det samme.
Indlæs de to billeder #
Åbn Content fane. Den Images sektion har en Før og en Efter fane, og hver enkelt indstiller sit eget billede, etiket og opløsning.
- Før / Efter faner: skift mellem de to sider for at indstille hvert billede.
- Vælg et Billede: vælg billedet til den side fra mediebiblioteket.
- Etiket: en kort billedtekst til siden, som Før arbejde eller endelige resultater.
- Billedopløsning: størrelsen serveret, som Full eller Large.
Vælg hvert billede fra biblioteket #
Klik Vælg et billede og WordPress mediebibliotek åbnes. Indstil før billedet på fanen Før, og skift derefter til fanen Efter og vælg den anden. Nem ting at glemme: fanen du er på bestemmer, hvilken side du ændrer, så tjek det, før du rammer vælg.
Indstil etiketterne #
Skriv a Label på hver fane og widget udskriver den som en overlejring på den side af billedet. Før etiketten sidder på den ene side, efter etiketten på den anden, så besøgende ved, hvilken der er hvilken uden at du staver det ud.
Juster skyderindstillingerne #
Åbn Indstillinger sektion for hvordan skyderen opfører sig. Det er her du indstiller startpositionen, splittets retning, og hvad der bevæger håndtaget.
- Synligt forhold (%): hvor håndtaget starter, så du kan åbne på før- eller eftersiden.
- Overlejring: vis eller skjul etiketterne før og efter.
- Flyt håndtag: Mus Træk/Swipe er gratis. Mus Flyt og Mus Klik har brug for Master Addons Pro.
Skift orienteringen #
The Orientering skift skifter mellem Vandret og Lodret. Vandret, standard, giver en venstre-højre wipe. Lodret stabler før billedet på toppen og efter nedenfor, med et op-ned håndtag, som normalt læser bedre for høje fotos.
Style layout, håndtag og etiketter #
Åbn Style fane. Der er sektioner til Layout Stil, Overlay, Håndtag, og Label, så skyderen matcher dit design i stedet for standardlooket.
- Layout Stil: kant, polstring og margin omkring hele skyderen. Border Radius og Box Shadow er Pro-muligheder.
- Håndtag: farven, størrelsen og stilen på trækkontrollen.
- Etiket: per-side farve, typografi, baggrund, kant og afstand for billedteksterne.
Almindelige brugstilfælde #
- Fotoredigering viser et råt skud ved siden af den retoucherede version.
- Hjem og renovering før og efter en ombygning eller oprydning.
- Design og dev gammelt layout versus redesign.
- Sundhed og fitness fremskridtsskud side om side.
- Products en almindelig genstand ved siden af det færdige eller stylede resultat.
Tips til at arbejde med widgetten Billedsammenligning #
- Match de to billeder. Samme størrelse, vinkel og beskæring, så diaset læses som én scene, ikke to billeder jammet sammen.
- Indstil startforholdet. Åbn halvvejs med Synligt forhold, så besøgende kan se, at der er noget at trække.
- Hold etiketter korte. Før og efter, eller to ord, sidde renere over billedet end en hel sætning.
- Vælg den rigtige aftrækker. Træk fungerer på desktop og touch-skærme. Pro Mouse Move-indstillingen føles hurtig, men gør intet på telefoner, som ikke har nogen svæve.
- Brug Lodret til høje skud. En top-bund split fungerer bedre til portrætbilleder end en smal venstre-højre wipe.
Se video tutorial #
Foretrækker du at følge med på skærmen? Videovejledningen nedenfor går gennem billedsammenligningselementet fra start til slut og viser, hvordan billederne, etiketterne, skyderindstillingerne og stylingen fungerer i Elementor-editoren.
Ofte stillede spørgsmål #
Hvad er Image Comparison-widget i Master Addons?
Det er en Elementor-widget, der stabler et før- og et efterbillede med et håndtag, der kan trækkes mellem dem. Besøgende skubber håndtaget for at tørre fra det ene billede til det andet, med valgfri etiketter på hver side, alt sammen indstillet fra Elementor-panelet uden kode.
Hvordan tilføjer jeg før og efter etiketter?
Åbn afsnittet Billeder, og skriv en etiket under fanen Før og fanen Efter. Hver etiket udskrives som en overlejring på sin side af billedet. Du kan vise eller skjule dem med Overlay-skift i Indstillinger og style dem i sektionen Etiket under fanen Stil.
Kan jeg gøre skyderen lodret eller vandret?
Ja. Afsnittet Indstillinger har en Orienteringstok. Standarden er Vandret, en venstre-højre split; skift til Lodret og billederne stables øverst og nederst med et op-ned håndtag. Lodret fungerer godt til portrætbilleder eller høje skærmbilleder.
Hvordan flytter besøgende sammenligningsskyderen?
Flyt håndtag dropdown i Indstillinger sætter udløseren. Mus Træk / Swipe er gratis og fungerer på skrivebordet og touch-skærme. Mus Flyt og Mus Klik er Master Addons Pro muligheder.
Skal jeg bruge billeder af samme størrelse?
For det bedste resultat, ja. De to billeder sidder i samme ramme, så matchende størrelse, vinkel og beskæring gør diaset læst som én scene. Hvis billederne er forskellige, skal du indstille en fast Billedopløsning, så begge serveres i samme dimensioner.
Indpakning #
Widgetten Billedsammenligning forvandler to billeder til et interaktivt før og efter: indlæs de to billeder, tilføj etiketter, indstil retningen og håndtaget, og stil derefter skyderen, så den passer til. For relaterede widgets, se Billede Hotspot widget og the Image Hover Effects widget, gennemse hele Master Addons widgets og udvidelser, og se den Billede Sammenligning widget side eller den før og efter skyderen guide for eksempler.
