Elementor Image Comparison Slider: Sådan oprettes en før efter showcase

Statiske side-by-side billeder yder ikke dit arbejde retfærdighed. En fotoredigering, en boligrenovering, en produkttransformation, de fortjener alle bedre end to billeder, der sidder ved siden af hinanden. En elementor billedsammenligningsskyder løser det. Besøgende trækker et håndtag hen over billedet for at afsløre før og efter versionerne selv, og den smule interaktion holder dem på din side længere.

Jeg har brugt Master Addons Image Comparison widget på klientlandingssider, og det får konsekvent mere engagement end statiske skærmbilleder. Denne vejledning dækker opsætning, tilpasning og et par ting, der er værd at vide, før du udgiver. Widgetten er gratis, den sidder inde i Elementors panel som enhver anden widget, og du kan have den kørende på cirka to minutter.

Hvad denne vejledning dækker:

• Hvad en billedsammenligningsskyder er
• Hvem har brug for en før/efter skyder
• Hvad du får med den gratis widget
• Sådan opretter du en (trin for trin)
• Tips til en bedre sammenligning
• Fejlfinding af almindelige problemer
• Master Addons vs. alternativer
• Hvorfor Master Addons
• Kom i gang
• Ofte stillede spørgsmål

Hvad Er en Billedsammenligning Slider?

En billedsammenligningsskyder lægger to billeder oven på hinanden med en dragbar skillevæg mellem dem. Brugere skubber den til venstre og højre (eller op og ned) for at afsløre det ene billede over det andet. Du indstiller et “før”-billede og et “efter”-billede i editoren, og widgetten håndterer resten.

Du har sikkert set disse på fotograferingsporteføljer, tandlægewebsteder eller ejendomssider, der viser renoveringsprojekter. I stedet for passivt at se på to separate billeder, interagerer besøgende fysisk med sammenligningen. Den interaktion øger tiden på siden, hvilket hjælper din SEO og trækker afvisningsprocenterne ned.

Hvem har brug for en før efter skyderen i Elementor?

Alle, der vil vise en forvandling. Det er de use cases, jeg oftest støder på:

Webdesignere og agenturer

Website redesign ser godt ud i en sammenligningsskyder. At lade en potentiel klient trække mellem det gamle og nye design bygger mere tillid end et fladt skærmbillede nogensinde vil. Du kan parre dette med Image Hover Effects widget hvis du ønsker ekstra visuel variation på porteføljesider.

Fotografer og Fotoredaktører

Sandsynligvis den mest naturlige pasform. Hvis du laver retouchering, farvegradering eller restaureringsarbejde, lader en billedsammenligningsskyder potentielle kunder se præcis, hvad du kan gøre. Råfil til venstre, redigeret version til højre. Siger mere end nogen billedtekst kunne.

E-handel Butikker

Sælger hudpleje, rengøringsmidler, eller noget med synlige resultater? A før efter billedsammenligning på din produktside er mere overbevisende end et afsnit af kopi. Jeg har set dette arbejde særligt godt for kosmetiske og hjem forbedring produkter, hvor den visuelle forskel er dramatisk.

Fast ejendom og arkitektur

Renoveringsprojekter er et naturligt match. Tag et billede, før arbejdet starter, tag et andet, når det er færdigt, slip begge dele i sammenligningswidgetten. Din portefølje bliver mere interaktiv, og besøgende har en tendens til at bruge mere tid på at gennemse dine projekter.

Digitale marketingfolk

Analytics dashboards, annonce ydeevne, website trafik diagrammer. Vis “før du arbejder med os” og “efter at have arbejdet med os” resultater med en træk-til-sammenligne skyder. Fungerer bedre end at indsætte to skærmbilleder i et casestudie.

Master Addons Billede Sammenligning Widget: Hvad du får

Der er flere måder at tilføje en før efter skyder i Elementor. Nogle kræver selvstændige plugins, nogle har brug for brugerdefineret kode, og nogle er låst bag premium addon abonnementer. Master Addons inkluderer den Billedsammenligningswidget i den gratis version. Værd at bemærke, fordi de fleste konkurrerende tilføjelser (Ultimate Addons, PowerPack, The Plus Addons) sætter denne funktion bag en betalingsmur.

Widgetten indeholder:

• Native Elementor integration: Træk og slip fra Elementor panelet. Ingen kortkoder, ingen separate indstillingsside. Installer fra WordPress plugin repo og det dukker op i din widgetliste med det samme.
• Gratis at bruge: Billedsammenligningswidgetten er en del af den gratis version. Ingen Pro-licens påkrævet.
• Flere kontrolstile: Skyderhåndtag (træk), musebevægelse (svæve), eller klik. Både vandrette og lodrette sammenligningsorienteringer understøttes.
• Brugerdefinerede etiketter: Skift “Før” og “Efter” tekst til noget, du ønsker, på ethvert sprog. Label farver, typografi, og positionering er alle justerbare.
• Responsive: Virker på desktop, tablet og mobil. Touch og swipe bevægelser virker på mobile enheder.

Master Addons har 80+ widgets og udvidelser total. Billedet sammenligning widget er en, der kommer op meget i landing page og portefølje projekter.

Sådan oprettes en før efter skyderen i Elementor (trin for trin)

Før du starter, skal du bruge begge dele Elementor og Master Addons installeret og aktiveret. Begge er gratis. Gå til Plugins > Tilføj ny, søge efter hvert plugin navn, installere, og aktivere.

Trin 1: Aktiver widgetten til billedsammenligning

Widgetten Billedsammenligning er aktiveret som standard. Hvis du har slået nogle widgets fra for at holde dit panel slankt, skal du kontrollere, at det stadig er tændt. Gå til Master Addons > Tilføjelser og udvidelser i dit WordPress dashboard og bekræft Image Comparison er skiftet på. Den Billedsammenligningsdokumentation har de fulde opsætningsdetaljer. Mens du er i det dashboard, bemærker du måske andre widgets, der er værd at tænde, f.eks Animeret overskrift eller Galleri Slider.

Trin 2: Åbn en side i Elementor

Opret en ny side eller åbn en eksisterende med Elementor. Jeg har oprettet en frisk landingsside til denne tutorial, men sammenligningsskyderen falder ind på enhver eksisterende side på samme måde.

Trin 3: Tilføj widgetten til billedsammenligning

I Elementor-panelet til venstre skal du søge efter “Billedesammenligning” (du vil se ikonet Master Addons ved siden af). Træk widgetten ind på din side, uanset hvor du vil have skyderen til at blive vist.

Trin 4: Upload dine før og efter billeder

Klik på widgeten, og du vil se to billedoverførselsfelter: et til før-billedet, et til efter-billedet. Upload begge, og forhåndsvisningen opdateres med det samme med skillehåndtaget i midten.

Hurtig heads-up: begge billeder skal have samme dimensioner. Hvis den ene er 1200×800, og den anden er 900×600, vil layoutet se ud. Beskær dem til samme størrelse, før du uploader. Dette rejser folk op mere end noget andet.

Trin 5: Tilpas etiketteksten

Standardetiketterne siger “Før” og “Efter,” men du kan ændre disse til hvad som helst. Sælger et produkt? Brug “Uden” og “Med.” Viser en renovering? Prøv “Dag 1” og “Afsluttet.” Etiketfelterne accepterer enhver tekst, herunder ikke-engelske tegn, så lokalisering er ikke et problem.

Trin 6: Konfigurer skyderindstillinger

Under fanen Indhold er der et par flere indstillinger, der er værd at justere:

• Orientering: Skift mellem vandret (venstre/højre) og lodret (øverst/nederst) sammenligning. Vandret er standard og fungerer i de fleste tilfælde.
• Synlighedsforhold: Styrer, hvor divider starter. Indstil den til 50% for en centreret opdeling, eller skift den for at vise mere af ét billede indledningsvis.
• Overlejring: Aktivér eller deaktiver en farveoverlejring på billederne.
• Håndtagstype: Vælg mellem mus træk eller mus hover til sammenligning. Træk kræver den besøgende til at klikke og trække. Hover afslører på mus bevægelse, som føles mere flydende, men kan være desorienterende på nogle layouts.

Trin 7: Style skyderen

Skift til fanen Stil for visuel tilpasning. Du kan ændre skillelinjefarven, tilføje en kant omkring sammenligningsbeholderen, justere etikettypografi (skrifttypefamilie, størrelse, vægt), tilføje boksskygger og kontrolafstand. Brug et par minutter her for at matche dit websteds design. Der er kontrol nok til, at du ikke ender med en generisk udseende skyder.

Hit Publish og din før efter skyder er live. Cirka to minutter fra start til slut, forudsat at dine billeder er klar.

Tips til en Bedre Billedsammenligning

Widgetten håndterer den tekniske side, men selve sammenligningen er kun så god som din opsætning. Et par ting, jeg har hentet fra at bygge disse på klientwebsteder:

Match dine billeddimensioner

Jeg nævnte dette allerede, men det er den fejl, jeg ser oftest. Hvis dit før billede er 1920×1080, og dit efterbillede er 800×600, vil skyderen tvinge dem til at justere, og resultatet ser forvrænget ud. Beskær begge billeder til nøjagtig samme pixeldimensioner, før du uploader. Hver gang.

Hold sammensætningen ens

Tag begge billeder fra samme vinkel, samme afstand, samme indramning. Hvis dit før-billede er et bredt billede, og efter er et nærbillede, lander kontrasten ikke, som du vil. Skyderen ser bedst ud, når den eneste forskel mellem de to billeder er den faktiske ændring.

Centrer Transformationen

Sæt den mest synlige ændring nær midten af billedet. Det er der, hvor divider starter, så det er det første, folk bemærker, når de interagerer med skyderen. Hvis ændringen er slukket til den ene side, skal du justere synlighedsforholdet for at gøre opmærksom på det.

Overdriv det ikke

En stærk sammenligning pr. sidesektion er nok. Jeg har set sider med fem eller seks skydere stablet oven på hinanden, og det udvander virkningen. Vælg dit bedste før-og-efter-par og feature den ene. Hvis du har flere sammenligninger, skal du organisere dem i en Filtrerbart billedgalleri eller Billedkarrusel i stedet.

Tilføj en CTA i nærheden

Hvis sammenligningen sidder på en salgs- eller porteføljeside, skal du slippe en call-to-action-knap lige under den. En person, der lige har trukket gennem en imponerende transformation, er allerede engageret. En “Få et gratis tilbud” eller “Shop nu”-knap lige der har tendens til at konvertere godt.

Fejlfinding: Når skyderen ikke opfører sig

De fleste opsætninger virker bare, men et par ting snubler folk op. Sådan løser du dem, jeg bliver spurgt om.

• Skyderen dukker ikke op. Ni ud af ti gange blev widgetten deaktiveret. Gå til Master Addons, derefter Addons og Extensions, og bekræft, at Billedsammenligning er slået til. Hvis den er tændt og stadig mangler, skal du rydde din cache (LiteSpeed, WP Rocket eller Cloudflare), så en gammel kopi af siden holder op med at tjene.
• Håndtaget trækker ikke. Dette er næsten altid en JavaScript-konflikt eller et caching-plugin, der kombinerede eller udsatte widgettens script. Udeluk Master Addons-scripts fra JS kombinere og udskyde, rydde cachen og teste igen.
• De to billeder ser strakte eller forkert justerede ud. De er forskellige dimensioner. Beskær både til identiske pixeldimensioner og genupload, dette er den mest almindelige årsag.
• Det virker på skrivebordet, men ikke på mobilen. Kontroller, at ingen overordnet beholder har en overløbsskjult stil, der klipper berøringsområdet, og at der ikke sidder noget over skyderen, der fanger strygningen. Touch fungerer ud af boksen, så en strygningsfejl er næsten altid et layout- eller z-indeksproblem.
• Før- og efteretiketterne er afskåret. Forkort etiketteksten eller reducer etikettens skriftstørrelse under fanen Stil; meget lange etiketter kan spilde uden for billedet på små skærme.

Hvis ingen af disse løser det, skal du skrive detaljerne i Master Addons supportforum med dit tema og aktive plugins er det normalt en konflikt, der er hurtig at fastlægge.

Billedsammenligningswidget vs. alternativer

Et hurtigt kig på, hvordan Master Addons sammenligner med andre wordpress billedsammenligningsskyder muligheder for Elementor:

Den store forskel er gratis tilgængelighed. Hvis du ikke ønsker at betale for en Pro addon bare for at få en før-og-efter skyder, Master Addons og ElementsKit er dine muligheder. Master Addons omfatter også tekstoverlejringsteknikker og billede svæve effekter i det gratis niveau, så du får et bredere sæt billedværktøjer uden at opgradere.

Hvorfor Master Addons til din billedsammenligning?

Billedsammenligningswidgetten er en af 80+ elementer og udvidelser i Master Addons til Elementor. En masse brugere installerer det til en widget og ender med at bruge flere andre på det samme projekt. Sådan kom jeg også i gang med det.

Ud over individuelle widgets får du en Tema Bygherre for brugerdefinerede sidehoveder, sidefødder og arkivsider. Der er en Popup Builder med exit hensigt og rulle udløser. Og en Skabelonbibliotek med forudbyggede sektioner kan du importere med et enkelt klik.

V3.0.0 er mærkbart hurtigere end ældre versioner, plugin'et vedligeholdes aktivt, og det kører på 40.000+ WordPress-websteder. Master Addons Pro tilføjer Widget Builder, White Label-tilstand og premium-support, hvis du har brug for dem, der er nede på linjen.

Kom godt i gang

Opsætning af en før efter billede sammenligning skyder i Elementor tager et par minutter med Master Addons. Ingen kode, ingen premium addon køb, ingen separat sammenligning plugin til at installere. Widgetten er gratis, fungerer med enhver Elementor opsætning, og tilpasningen dækker alt fra etiket tekst til divider farve.

Download Master Addons gratis og prøv widgetten Billedsammenligning på dit næste projekt. Hvis du har brug for mere på tværs af dine Elementor-builds, så tjek ud pro-planerne.

Relateret læsning: Elementor Image Carousel Tutorial | Elementor Filterable Gallery Plugins | 25 Elementor tekst over billedteknikker

Foretrækker du at se? Her er en hurtig gennemgang i Elementor:

Ofte stillede spørgsmål