Slik viser du før og etter bildet i WordPress (med Slide Effect)

Vil du vise bilder før og etter på nettstedet ditt? Et bilde før og etter kan være nyttig for å vise side om side sammenligning av to identiske bilder med mindre forskjeller. I denne artikkelen vil vi dele hvordan du enkelt kan vise før og etter bildet i WordPress.

Hvordan virker før og etter bildeeffekten?

Normalt bruker folk Photoshop til å lage et før og etter bilde. Det er et enkelt bilde som viser før / etter effekter, og du kan legge det til som et statisk bilde på WordPress-nettstedet ditt.

En funksjonell fotolaster er en interaktiv måte å vise 2 forskjellige versjoner av et tilsvarende bilde i full størrelse. Du kan flytte skyvehåndtaket for å sammenligne begge bildene side ved side.

La oss ta en titt på hvordan du enkelt kan vise før og etter bildet i WordPress.

Videoopplæring

Hvis du ikke vil se videoopplæringen, kan du fortsette å lese tekstversjonen nedenfor:

Viser før og etter bilde i WordPress

Første du må gjøre er å installere og aktivere Twenty20 Image Before-After-plugin. For mer informasjon, se vår trinnvise veiledning om hvordan du installerer et WordPress-plugin.

Ved aktivering må du opprette eller redigere en side / post i WordPress-administrasjonsområdet der du vil vise før og etter bildet. Nå klikker du på Legg til Twenty20 knappen over teksteditoren.

Det åpner WordPress Media Library i en popup. Herfra må du velge to bilder for før og etter skyveknappen.

Når bildene er valgt, klikker du på Sett inn knapp.

Deretter vil det vise tekstfeltene for å legge til innhold på toppen av før og etter bildene. Du kan også legge til bredde for glidebryteren, forskyvningsverdien, skyveretningen og mer.

Deretter klikker du på Sett inn kortnummer knappen for å legge til før og etter bildet på WordPress-siden din.

Du kan også bruke Twenty20 bilde widgeten til å vise før og etter bildet i WordPress sidebjelken. Bare gå til Utseende »Widgets delen i WordPress-administrasjonen din, og dra deretter Twenty20 Slider-widgeten i sidebar-widget-området.

Twenty20 Slider-widgeten har lignende innstillinger for før og etter bildet som vi delte over i denne veiledningen. Du kan velge de to bildene en etter en i widgetinnstillingene for å lage før og etter fotobryteren.

Nå kan du besøke nettstedet ditt for å se før og etter bildet i aksjon.

Når brukerne skyver håndtaket mot hvert bilde, blir det andre bildet synlig. Brukere kan ta glidebryteren helt til høyre eller venstre for å se full før og etter bildet. Etter hvert som brukerne skyver før og etter, forsvinner etiketter automatisk.

Denne plugin fungerer bra med de populære WordPress-sidenbyggerne som Beaver Builder og Elementor for raskt å vise før og etter bildet på nettstedene dine uten å bruke kortkoder.

Vi håper denne artikkelen hjalp deg med å lære å vise før og etter bildet i WordPress. Du vil kanskje også se vår guide om hvordan du legger til forstørrelseszoom for bilder i WordPress.

Hvis du likte denne artikkelen, vennligst abonner på vår YouTube Channel for WordPress-videoopplæringsprogrammer. Du kan også finne oss på Twitter og Facebook.