Billedsammenligning

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 Billedsammenligning widget 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, et klik eller en svævning.

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: træk eller stryg, klik eller hold markøren for at flytte skyderen.

Skift orienteringen #

The Orientering toggle vender splittet fra lodret til vandret. Lodret giver en venstre-højre serviet. Vandret 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: kanttype, radius og kasseskygge omkring hele skyderen.
• 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 passer til skrivebordet. Hover føles hurtig, men kan fange touch-brugere off guard, så test det på en telefon, før du sender.
• Brug vandret 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 #

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 kontrollere de prissætning side for hvad hver plan indeholder.