Indholdsfortegnelse
The Master Addons Billedsammenligningswidget lader dig slippe en gratis før-og-efter skyder ind i enhver Elementor side, ingen Elementor Pro og ingen ekstra plugin abonnement. Du installerer Master Addons, trække widget på din side, uploade to billeder, og besøgende får en draggable håndtag, der tørrer mellem dem.
Denne guide går gennem hver indstilling: aktiverer widgetten, tilføjer den til en side, dimensionsreglen, der slår næsten alle op i deres første forsøg, orientering, det synlige forhold, håndtagstype, styling og hvad du skal gøre, når skyderen opfører sig forkert på mobilen. For flere før-og-efter designideer, når mekanikerne klikker, se fuld før-efter showcase guide.
Hvad du skal bruge, før du starter
- WordPress med Elementor installeret og aktiv. Den gratis version af Elementor er nok.
- Master Addons for Elementor installeret og aktiv. Den gratis plan dækker denne widget. Se den installationsvejledning hvis plugin'et er nyt for dig.
- To billeder beskåret til nøjagtig samme pixel dimensioner. Mere om hvorfor i et øjeblik, det betyder mere end folk forventer.
Trin 1: Aktiver widgetten til billedsammenligning
Master Addons skibe med snesevis af widgets, og ikke alle af dem indlæses som standard på hver installation. Gå til Master Addons → Widgets i dit WordPress dashboard og bekræft Billedsammenligning er slået til. Hvis den ikke dukker op i Elementors Elements panel et øjeblik senere, er det næsten altid derfor.
Trin 2: Tilføj widgetten til din side
Åbn en side med Elementor, søg Billedsammenligning i panelet Elementer (se efter det lilla MA-badge), og træk det over på din side. Det indlæses med to pladsholderbilleder og en fungerende skyder, så du kan se layoutet, før du rører ved en enkelt indstilling.
Trin 3: Upload dine før og efter billeder
Åbn Content fane, så Images sektion. Den har en Før fane og en Efter fane, og hver enkelt har sit eget Vælg et billede-felt, Etiket-felt og Indstilling for Billedopløsning. Indstil før-fotoet på fanen Før, skift til Efter, og indstil det andet foto. Det er nemt at uploade begge billeder til samme fane ved en fejl, så tjek hvilken fane der er aktiv, før du vælger et billede.
Skriv en kort Etiket på hver fane, hvis du vil have en overlejringsbilledtekst, noget som “Før” og “Efter,” eller “Gamle Design” og “Omdesign.”
Reglen, der slår alle op: Matchende billeddimensioner
Begge billeder skal være nøjagtig samme pixeldimensioner, samme bredde og samme højde. Hvis det ene foto er 1600×1000, og det andet er 1200×800, strækker eller beskærer skyderen en af dem, så den passer, og sammenligningen ser skæv eller forkert justeret ud i det øjeblik, nogen trækker håndtaget.
Løs dette ved at beskære begge billeder til identiske dimensioner, før du uploader, i hvilken editor du normalt bruger, eller med WordPress' egen indbygget billedredigeringsprogram efter upload. Indstilling af en fast Billedopløsning på begge faner i widget hjælper, men det vil ikke fastsætte et vildt forskelligt billedformat mellem de to kildefotos.
Trin 4: Indstil orienteringen
I afsnittet Indstillinger skifter Orienteringsskift mellem en lodret opdeling (venstre-højre-sletning, standard) og en vandret opdeling (top-bund-sletning). Lodret passer til brede landskabsbilleder. Vandret læser normalt bedre for høje eller portrætbilleder, da en smal venstre-højre-skive ikke viser nok af et højt foto på én gang.
Trin 5: Indstil det synlige forhold og håndtagstype
Visible Ratio sætter, hvor håndtaget sidder, når siden indlæses, i procent. Åbn den omkring 50% for et neutralt førstehåndsindtryk, eller start den tættere på den ene side, hvis du vil have før eller efter billedet til at dominere ved indlæsning.
Flyt Håndtag bestemmer, hvad der udløser sliden: træk eller stryg, klik eller svæve. Træk fungerer godt på skrivebordet, hvor besøgende forventer at gribe og trække. Hover føles glat på en mus, men kan fejltænding for touch-brugere, der aldrig svæver overhovedet, så træk / stryg eller klik er den sikrere standard, hvis meget af din trafik er mobil.
Trin 6: Style skyderen
Fanen Stil dækker Layoutstil (kant, radius, boksskygge omkring hele widgetten), Håndtag (farve, størrelse, ikon) og Etiket (per-side farve, typografi, baggrund og afstand for billedtekstoverlejringen). Intet af dette ændrer, hvordan skyderen fungerer, kun hvordan den ser ud, så det er sikkert at springe på en første passage og komme tilbage, når mekanikken har ret.
Mobil og Touch Adfærd
Elementor er responsiv som standard, så widgetten ændrer størrelse med viewporten uden ekstra opsætning. Det, der faktisk skal testes på en telefon, er indstillingen Flyt håndtag. Træk og stryg fungerer naturligt med en finger, og klik fungerer også. Hover findes ikke på en berøringsskærm, så en skyder, der er indstillet til Hover, sidder simpelthen stille for mobile besøgende og viser kun startforholdet Synligt forhold uden mulighed for at flytte det.
Elementors egen guide vedr responsivt design dækker det grundlæggende i breakpoint, hvis du også skal ændre størrelsen på selve widgetten til tablet eller mobil, adskilt fra håndtagets adfærd.
Master Addons vs andre Elementor Sammenligningsmuligheder
| Option | Omkostning | Orienteringskontrol | Håndtag Triggers |
|---|---|---|---|
| Master Addons Billedsammenligning | Free | Vandret & lodret | Træk/swipe, klik, hold markøren |
| Essential Addons Image Comparison | Gratis tier tilgængelig | Ja | Drag |
| Før Efter Billedsammenligningsskyder (WordPress.org) | Gratis, selvstændigt plugin | Limited | Drag |
| Elementor Pro (indfødt) | Ingen indbygget widget | Ikke relevant | Ikke relevant |
Elementor kerne, gratis eller Pro, har ingen indfødte billede sammenligning widget af sin egen. Uanset hvilken rute du tager, du installerer en tredjeparts widget enten måde, så den ærlige sammenligning er mellem disse widgets, ikke mellem et plugin og “indbygget Elementor.”
Fejlfinding Almindelige problemer
- Widget mangler i panelet Elementer: recheck Master Addons → Widgets og bekræft Image Sammenligning er aktiveret.
- Slider ser strakt eller skævt ud: de to billeder er ikke de samme pixeldimensioner; beskær dem, så de matcher.
- Håndtaget vil ikke bevæge sig på en telefon: Flyt håndtag er indstillet til Hover; skift det til Træk/Swipe eller Klik.
- Etiketter vises ikke: bekræft, at Overlay-skift i Indstillinger er slået til, og at der faktisk er skrevet en etiket på begge faner.
Hvis du kan lide denne træk-til-afsløringsinteraktion, vil Billede Hotspot widget og the Image Hover Effects widget brug et lignende svæve- og klikmønster til at kommentere eller animere billeder.
Ofte stillede spørgsmål
Hvordan laver man en billedskyder i Elementor?
Installer en widget, der understøtter det, da hverken gratis eller Pro Elementor sender en indbygget. Det gratis Master Addons-plugin tilføjer en billedsammenligningswidget, du trækker på siden, og derefter uploader du to billeder og indstiller retningen, forholdet og håndtaget fra sektionerne Indhold og indstillinger.
Hvordan tilføjer jeg en billedskyder i WordPress?
Installer Elementor plus et widget plugin som Master Addons, og træk derefter Image Comparison widget på en hvilken som helst side. Det virker inde i Elementor editor snarere end gennem en separat WordPress indstillinger skærm, så der er ingen shortcode at huske.
Hvordan laver man en før og efter billedskyder?
Upload et før billede og et efterbillede af identiske pixeldimensioner i widgetens Før og Efter faner, og vælg derefter lodret eller vandret orientering. Widgetten genererer den draggbare divider automatisk, du designer ikke den del selv.
Hvordan vises før og efter i et dias?
En skyder før og efter stabler de to billeder i samme ramme med en skilleflade mellem dem, så et dias erstatter to statiske billeder. Besøgende trækker eller trykker på håndtaget for at flytte skilleenheden og afsløre mere af det ene eller det andet billede.
Hvordan redigerer jeg en skyder i Elementor?
Vælg widgetten Billedsammenligning på lærredet, og dens indstillinger åbnes i venstre panel. Fanen Indhold indeholder billederne og etiketterne, og sektionerne Indstillinger og Stil nedenunder styrer forholdet, håndtagets adfærd og den visuelle styling. Ændringer forhåndsvisning live på lærredet.
Hvordan sammenlignes hvis to billeder er ens?
Billedsammenligningswidgetten er bygget til en visuel, side-by-side afsløring snarere end en pixel-niveau diff. Hvis du har brug for de to billeder til at line op rent, som widget kræver for et rent resultat, beskære dem til samme bredde og højde, før du uploader snarere end at stole på widget til at opdage en mismatch.
Hvordan laver man et før og efter billede?
Skyd eller eksporter både før og efter versionen med samme opløsning og indramning, beskær dem til at matche, hvis de ikke er på linje, og upload derefter begge til en sammenligningswidget som Master Addons Image Comparison. Matchende indramning betyder mere end matchende kameraindstillinger for et overbevisende resultat.
Relateret læsning
