Hur man visar före och efter foto i WordPress (med bildeffekt)

Vill du visa bilder före och efter på din webbplats? Ett före och efter foto kan vara användbart för att visa sida vid sida jämförelse av två identiska bilder med mindre skillnader. I den här artikeln kommer vi att dela hur du enkelt kan visa före och efter foto i WordPress.

Hur fungerar före och efter fotoeffekten?

Vanligtvis använder människor Photoshop för att skapa en före och efter bild. Det är ett enda foto som visar före / efter effekter, och du kan lägga till det som en statisk bild på din WordPress-webbplats.

En funktionell bildreglage är ett interaktivt sätt att visa 2 olika versioner av en liknande bild i full storlek. Du kan flytta reglaget för att jämföra båda bilderna sida vid sida.

Låt oss ta en titt på hur du enkelt kan visa före och efter foto i WordPress.

Video Tutorial

Om du inte vill titta på videoklippet kan du fortsätta läsa textversionen nedan:

Visar före och efter foto i WordPress

Det första du behöver göra är att installera och aktivera Twenty20 Image före-efter-plugin. För mer information, se vår steg för steg guide om hur du installerar ett WordPress-plugin.

Vid aktivering måste du skapa eller redigera en sida / post i ditt WordPress-administrativa område där du vill visa före och efter bilden. Klicka nu på Lägg till Twenty20 knappen ovanför textredigeraren.

Det öppnar WordPress Media Library i en popup. Härifrån måste du välja två bilder för reglaget före och efter.

När bilderna väljs klickar du på Föra in knapp.

Därefter visas textfälten för att lägga till innehåll ovanpå bilderna före och efter. Du kan också lägga till bredd för skjutreglaget, offsetvärdet, skjutreglaget och mer.

Därefter klickar du på Sätt in kortnummer knappen för att lägga till före och efter fotot på din WordPress-sida.

Du kan också använda Twenty20 bild widget för att visa före och efter foto i WordPress sidobalk. Helt enkelt gå till Utseende »Widgets avsnittet i din WordPress-administratör, och dra sedan widgeten Twenty20 Slider i widgetfältet Sidebar.

Twenty20 Slider-widgeten har liknande inställningar för före och efter foto som vi delade ovan i den här guiden. Du kan välja de två bilderna en efter en i widgetinställningarna för att skapa före och efter bildreglaget.

Nu kan du besöka din webbplats för att se före och efter fotot i åtgärd.

När användarna skjuter handtaget mot varje bild blir den andra bilden synlig. Användare kan ta skjutreglaget helt åt höger eller vänster för att se hela bilden före och efter bilden. När användarna glider, förloras etiketterna före och efter automatiskt.

Denna plugin fungerar bra med de populära WordPress-sidabyggarna som Beaver Builder och Elementor för att snabbt visa före och efter foto på dina webbsidor utan att använda kortkoder.

Vi hoppas att den här artikeln hjälper dig att lära dig hur du visar före och efter foto i WordPress. Du kanske också vill se vår guide om hur du lägger till förstoringszoom för bilder i WordPress.

Om du gillade den här artikeln kan du prenumerera på vår YouTube-kanal för WordPress-videoinstruktioner. Du kan också hitta oss på Twitter och Facebook.