Hvordan vise før og etter bilder i WordPress

Bilder er en viktig del av innholdsmarkedsføring med kraften til å tiltrekke flere publikummere til nettstedet ditt og forbedre den generelle brukeropplevelsen. De kan underholde, informere, inspirere og engasjere brukere på en gang, og det er derfor du bør strebe etter å gjøre ditt absolutt beste for å inkludere attraktive og relevante bilder i innholdet på nettstedet ditt.

Nå, selv om bildene er kraftige nok som de er, er det noen ganger ikke nok å sette opp visuelle elementer på nettstedet ditt for å holde besøkende interessert. Det er derfor vi foreslår at du tar ting opp et hakk og vurderer å legge til interaktive bilder på nettstedet ditt. Ikke bare er dette en fantastisk måte få publikum til å engasjere seg ytterligere med innholdet ditt, men det kan også hjelpe dem med å lære mer om merkevaren din eller virksomheten din som helhet. Ta for eksempel før- og etterbilder. Slike bilder brukes side om side for å vise små forskjeller mellom to bilder, og som sådan brukes de ofte som enkle statiske bilder. Men ved å legge til en pen skyveeffekt til disse to bildene, vil du umiddelbart tillate mer interaktivitet og gjøre ting mer spennende for brukerne.

Hvis du er interessert i å lære hvordan du legger til en før og etter skyveeffekt i WordPress, vil du gjerne lære at det er ganske enkelt å gjøre hvis du bruker hjelp av en passende plugin. Vi vil vise deg alle trinnene som trengs for å legge til denne nyttige funksjonen på WordPress-siden din ved å bruke Før/etter Comparison Slider-widgeten fra Qi Addons for Elementor-plugin, så sørg for å lese videre.

Hva er en glidebryter for før og etter bilde, og hvorfor er den nyttig

Som vi allerede nevnte i begynnelsen, før- og etterbilder består vanligvis av to bilder plassert side ved side for å vise frem og understreke enhver form for forskjell eller fremgang. Nå, ved å legge til en skyveeffekt til disse to bildene, gir du brukerne muligheten til å avdekke full størrelse på begge bildene ved å flytte glidebryteren og sammenligne dem på en morsom og engasjerende måte. For eksempel, hvis glidebryteren er plassert horisontalt, vil brukere kunne avsløre det første bildet ved å flytte glidebryteren med musen helt til høyre. På samme måte vil det andre bildet vises når de flytter glidebryteren helt til venstre.

Denne typen glidebrytereffekt kan være nyttig for alle som ønsker å imponere og inspirere publikum, eller ganske enkelt vise frem verdien og effektiviteten til produktene eller tjenestene deres på en interaktiv måte. Derfor kan denne typen effekter brukes av alle typer virksomheter, enten de er store eller små, relatert til fotografering, design, skjønnhet, helse eller noe helt annet.

Si at du har et treningsprogram som du ønsker å presentere for potensielle kunder. Du vil potensielt kunne øke salget ditt ved å vise før og etter bilder av folk som har klart å gå ned i vekt og/eller få mer muskler etter å ha brukt programmet. Kort sagt, du vil tiltrekke brukernes interesse ved å la dem se det visuelle beviset på påstandene dine.

Legge til en glidebryter for før og etter bilde med Qi Addons for Elementor Plugin

Nå, mens det er mange forskjellige plugins på nettet som lar deg legge til denne typen bildeglidebryter på nettstedet ditt, har vi bestemt oss for å demonstrere dette ved å bruke Qi Addons for Elementor-plugin. En av de mange tingene som skiller denne plugin-en, er det faktum at den kommer med en sett med 60 fleksible widgets som lar deg designe og tilpasse alle slags elementer og seksjoner – fra typografi og kreative elementer til forretnings- og WooCommerce-funksjoner. Kort sagt, du kan bruke Qi Addons for Elementor for omtrent alle typer nettsteder der ute, helt gratis.

Blant disse 60 widgetene kan widgeten før/etter sammenligningsglidebryteren brukes til å lag interaktive sammenligningsglidere og legg til bilder helt enkelt. Den lar deg velge mellom to orienteringstyper – horisontal og vertikal, legg til før- og etterbilder slik at brukerne kan dra glidebryteren og avdekke hvert bilde, tilpasse håndtakets tekst, farge, typografi og så videre.

Før vi begynner, bør vi minne deg på at Qi Addons for Elementor er plugin laget for Elementor sidebygger. Derfor bør du ha Elementor installert på nettstedet ditt først før du fortsetter å installere og bruke Qi Addons for Elementor-plugin.

I tilfelle du foretrekker å se videoer, har vi laget en videoopplæring om samme emne, så sjekk den gjerne ut:

Første ting først, gå til backend i side-/innleggsredigeringsprogrammet og, i Elementor-sidefeltet, søk etter widgeten før/etter sammenligning. Deretter drar du den til høyre side av skjermen.

Som du kan se, har standardwidgeten en horisontal justering og nok plass reservert for to bilder.

I Innhold fanen, vil du kunne klikke på det lille søppelikonet og fjerne standardbildene for før- og etterbildene dine.

Etterpå kan du gå videre og legge til din egen ved å klikke hvor som helst på bildefeltene.

Slå den Sett inn media -knappen når du velger før-bildet. Gjenta deretter den samme prosessen for After-bildet.

Siden du ikke kan dra skillelinjen i bakenden, bør du gå til forsiden av siden din for å se hvordan den ser ut. Du kan ganske enkelt åpne den i en annen fane for mer bekvemmelighet.

Sørg for å oppdatere siden din for å få vist det nye elementet. Dra skillelinjen fra høyre til venstre (eller omvendt) for å se hvordan bildeglidebryteren ser ut (som vi gjorde nedenfor):

Rett under alternativet som lar deg velge bildene dine, er det Håndter tekst alternativ. Dette er faktisk teksten som vises på skillelinjen. Vår er satt til Dra som standard, men du kan endre din til hva du vil.

Neste, den Orientering alternativet kan brukes til å bytte glidebryteren fra Horisontal til Vertikal.

Og der har du det – glidebryteren vår har nå en vertikal orientering.

Med en gang du Oppdater glidebryteren vil du kunne se hvordan dra-effekten ser ut med de nylig tilpassede innstillingene.

Nå som vi har vist deg hvordan den vertikale orienteringen kan se ut, skal vi bytte tilbake til dette alternativet Horisontal og treffer Oppdater. Selvfølgelig bør du velge en som fungerer best for deg.

De Standard forskyvning alternativet lar deg justere startposisjonen til skillelinjen mellom bildene dine. Den er satt til 50 prosent som standard, noe som betyr at den er plassert rett i midten.

Hvis du angir en annen verdi her, vil skilleposisjonen enten flyttes til venstre eller høyre. Ved å sette den til noe som er litt mindre, som 45 prosent (som vi gjorde), kan du umiddelbart se at posisjonen er flyttet til venstre. Vi har beholdt denne innstillingen for skilleposisjonen vår, men som med alle andre alternativer kan du velge hvilken som helst annen verdi du vil.

Gå videre til Style-fanen – det er noen få alternativer her knyttet til stylingen av glidebryteren din. Den første er Håndtak toppforskyvning. Det lar deg nemlig endre posisjonen til skillehåndtaket. Du kan enten bruke glidebryteren til å justere den eller skrive inn en ny verdi. Vi har endret verdien til prosenter for vår og satt den til 16 prosent.

Rett under er det muligheten til å justere håndtaket Sirkelstørrelse. De samme reglene gjelder også for dette alternativet – du kan enten flytte glidebryteren til venstre eller høyre for å justere størrelsen eller bare angi ønsket verdi.

De Kantstørrelse alternativet lar deg justere bredden på skillelinjen. Vi har forlatt vårt som standard, men hvis du vil, kan du justere dette alternativet på samme måte som de to foregående.

Nå, den Tekstfarge alternativet endrer fargen på håndtakets tekst. Du kan enkelt endre den til hvilken som helst farge du foretrekker ved å bruke Fargevelger feltet (enten ved å bruke fargeglidebryteren eller ved å skrive inn en sekskantkode).

Ved å klikke på Håndter typografi alternativet åpner et helt nytt sett med typografirelaterte alternativer. Her vil du kunne endre utseendet på teksten inne i skilleveggen.

Du vil få velge en skriftfamilie (enten ved å bla gjennom listen over fonter eller skrive inn din egen), endre skriftstørrelsen (ved å bruke glidebryteren eller angi en egendefinert verdi), angi fonten Vekt, bruk teksten Forvandle alternativ, Stil, Dekorasjon, og mer.

Til slutt, den Farge på håndtak alternativet lar deg endre fargen på skilleveggen og håndtakssirkelen. Dette er nyttig siden det kan la deg matche disse elementene med fargepaletten du har på bildene eller resten av nettstedets design.

Den siste, Avansert fanen har noen få nyttige alternativer knyttet til posisjonering, respons, inngangsanimasjoner og så videre. Likevel, siden den er til stede i alle andre Elementor-widgets også, vil vi ikke dekke dem i denne opplæringen.

Etter at du traff Oppdater -knappen, oppdater siden med glidebryteren for å se hvordan den ser ut live.

Pakke ting sammen

Å vise før- og etterbilder på WordPress-siden din er en morsom og interaktiv måte for de besøkende å sammenligne to forskjellige bilder og la dem se de visuelle fordelene med produktene og tjenestene dine. Ved å la dem bruke glidebryteren til å avsløre forskjellene mellom bildene dine, kan du øke potensialet for å engasjere publikum ytterligere med merkevaren din, noe som bare kan føre til mer salg i det lange løp. Så uansett om du ønsker å vise frem resultatene av å bruke rengjøringsprodukter, hudpleieprodukter, vekttapresultater av trenings- eller matprogrammet eller noe annet, er en glidebryter for før og etter bilde en vei å gå.

Å legge til en glidebrytereffekt til før- og etterbildene dine er så enkelt som det kan bli hvis du bruker hjelpen av en før/etter-sammenligning-skyve-widget fra Qi Addons for Elementor-plugin. Den er super intuitiv og inneholder mange tilpasningsalternativer som lar deg lage en unik glidebryter som passer best med ditt generelle sidedesign. Fortsett og følg instruksjonene våre, så kan du vise de vakre før- og etterbildene dine på WordPress-siden din på kort tid.