Hur man visar före- och efterbilder i WordPress (med skjutningseffekt)

Att försöka visa upp en dramatisk förvandling med statiska, sida vid sida-bilder kan kännas lite platt. Du har gjort ett fantastiskt jobb, men wow-faktorn går förlorad när besökare inte kan interagera med förändringen själva.

Vi har upptäckt att ett av de bästa sätten att lyfta fram effekten av en produkt eller tjänst är med en interaktiv före-och-efter-reglage. Det är ett kraftfullt verktyg som vi har använt i våra egna projekt för att låta resultaten tala för sig själva.

I den här artikeln delar vi med oss av våra två beprövade metoder för att lägga till en före- och efterbildsskjutreglage på din WordPress-webbplats. Vi har ett enkelt alternativ för nybörjare och ett mer anpassningsbart för dem som vill ha mer kontroll.

När du ska använda en före-efter-bildskjutreglage i WordPress

En före-och-efter-bild är en interaktiv bild som vanligtvis visar någon form av förändring.

Besökare kan använda en skjutreglage för att växla mellan olika 'versioner' av bilden på ett engagerande och interaktivt sätt.

Om du driver en webbutik med ett plugin som WooCommerce, kan en före-och-efter-bild visa effekten av dina produkter eller tjänster.

Du behöver bara visa ett 'före'-foto som kunden kan relatera till och ett önskvärt 'efter'-foto. Detta kommer att få shoppare att vilja köpa det som tar dem från 'före'-tillståndet till 'efter'-tillståndet.

Om du är en affiliate-marknadsförare, är det ett utmärkt sätt att marknadsföra dina affiliatelänkar och få fler försäljningar genom att visa övertygande före- och efterbilder på din webbplats.

Att dra en skjutreglage för att visa 'efter'-bilden är också ett enkelt sätt att få mer engagemang, vilket kan hålla besökare på din webbplats längre. Detta kan också hjälpa till att öka dina sidvisningar och minska avvisningsfrekvensen i WordPress.

Med det sagt, låt oss se hur du kan skapa ett före-och-efter-foto i WordPress med en skjutningseffekt. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du vill använda:

• Metod 1: Visa ett före- och efterfoto med ett gratis plugin (enkelt)
• Metod 2: Visa ett före- och efterbild med SeedProd (mer anpassningsbar)
• Frequently Asked Questions About Before and After Sliders

Metod 1: Visa ett före- och efterfoto med ett gratis plugin (enkelt)

Det enklaste sättet att skapa före- och efterbilder är att använda pluginet Ultimate Before After Image Slider & Gallery – BEAF.

BEAF-pluginet låter dig skapa horisontella och vertikala bildkaruseller och anpassa bilden med olika etiketter och färger.

Viktigt tips: För att skjutningseffekten ska fungera perfekt måste dina 'före'- och 'efter'-bilder vara exakt lika stora (samma bredd och höjd i pixlar). Detta säkerställer att de linjerar korrekt. Du kan använda vilket bildredigeringsverktyg som helst för att beskära eller ändra storlek på dina bilder innan du laddar upp dem.

Det första du behöver göra är att installera och aktivera pluginet Ultimate Before After Image Slider & Gallery (BEAF). För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till Före och efter-reglage » Lägg till nytt i din instrumentpanel.

För att börja, skriv in ett namn för bildreglaget. Detta är bara för din referens, så du kan använda vad som helst som hjälper dig att identifiera det.

När det är gjort kan du lägga till bilden 'före' genom att skrolla till sektionen 'Före-bild'.

Klicka här på ‘Ladda upp’ och välj sedan antingen en bild från WordPress mediebibliotek eller ladda upp en ny bild från din dator.

För att hjälpa sökmotorer att förstå den här bilden och visa den för rätt personer, är det en bra idé att lägga till lite bildalttext. För att göra detta, skriv helt enkelt i fältet ‘Image Alt’.

För mer information om alt-text, se vår nybörjarguide till bild-SEO.

När det är gjort, skrolla till sektionen 'Efter-bild'.

Du kan nu lägga till ‘efter’-bilden genom att följa samma process som beskrivs ovan. Glöm inte att lägga till lite alt-text till den här bilden också, eftersom det är viktigt för WordPress SEO.

Du kan också visa text under bilden genom att lägga till en titel och en beskrivning (som en bildtext).

Till exempel kan du uppmuntra besökare att interagera med skjutreglaget. Detta är ett utmärkt sätt att guida besökare som kanske inte är bekanta med hur interaktiva skjutreglage fungerar.

Detta är också ett enkelt sätt att lägga till lite kontext till bilden.

För att lägga till text, skriv helt enkelt i fälten 'Bildtext' eller 'Bildbeskrivning'.

Du kan också lägga till en 'Läs mer'-URL, som kan länka till vilket inlägg eller sida som helst på din WordPress-webbplats eller till och med en extern webbplats. Du kan till exempel skicka besökare till en sida där de kan köpa produkten som visas i skjutreglagebilden.

Den här länken kommer att visas under före/efter-bilden och även under eventuell bildtext eller beskrivning du använder.

Om du länkar till en annan webbplats, rekommenderar vi att du väljer 'Ny flik' så att du inte skickar besökare bort från din WordPress-blogg.

När det är gjort kan du välja om du vill skapa en vertikal eller horisontell skjutreglage genom att klicka på en av miniatyrbilderna i avsnittet ‘Orientation Style’.

Därefter, scrolla till toppen av skärmen och klicka på 'Alternativ'.

Här ser du att 'Standardförskjutning' är inställt på 0,5. Detta innebär att besökaren ser hälften av 'före'-bilden när sidan först laddas.

Om du vill visa mer av före-bilden, skriv då ett större nummer, som 0.6, 0.7, eller högre.

Om du vill visa hela förhandsbilden, skriv då 1.

Detta placerar bildkarusellen högst upp eller till höger om före-bilden, som du kan se på följande bild.

Som standard visar pluginet etiketterna ‘Före’ och ‘Efter’ när besökaren för muspekaren över bilden.

Du kanske vill ersätta dessa etiketter med något mer beskrivande.

För att göra detta, gå helt enkelt vidare och skriv i fälten "Företikett" och "Efteretikett".

Som standard kommer besökare att flytta reglaget genom att dra och släppa. Vissa personer kan tycka att detta är svårt, särskilt om de har rörlighetsproblem eller använder mindre enheter som smartphones eller surfplattor.

Med det sagt kanske du vill ändra hur besökare flyttar reglaget.

Om du växlar till knappen 'På' bredvid 'Flytta skjutreglaget vid muspekaren?' kan besökare flytta skjutreglaget genom att bara föra muspekaren över bilden.

Om du aktiverar knappen 'Klicka för att flytta', kan besökare klicka var som helst på bilden för att flytta skjutreglaget till den punkten.

Även om dessa alternativ kan förbättra tillgängligheten, ändrar de standardbeteendet för reglaget. Vi föreslår att du testar dem för att se vad som känns mest intuitivt för din webbplats besökare.

Klicka sedan på fliken 'Stil'.

Här kan du ändra färgerna som används för de olika etiketterna, bakgrunderna, rubrikerna, beskrivningarna och knappen "läs mer". Detta kan hjälpa bilden före/efter att smälta in med ditt WordPress-tema eller till och med sticka ut från resten av din webbplats design.

Du kan också ändra teckenstorleken och textjusteringen.

När du är nöjd med hur reglaget är inställt, klicka på knappen "Publicera".

Detta skapar en kortkod som låter dig lägga till före/efter-bilden och skjutreglaget till vilken sida, inlägg eller widget-klar yta som helst.

För mer information om hur du placerar kortkoden, se vår guide om hur man lägger till en kortkod i WordPress.

Efter att ha lagt till kortkoden på din webbplats, klicka helt enkelt på knappen "Publicera" eller "Uppdatera" för att göra före/efter-bilden och slide-effekten live.

Metod 2: Visa ett före- och efterbild med SeedProd (mer anpassningsbar)

Om du bara vill lägga till en enkel skjutreglage till ett befintligt inlägg, är gratispluginet i metod 1 ett utmärkt alternativ. Men om du vill skapa en landningssida med hög konvertering, en försäljningssida eller till och med ett anpassat tema som har en jämförelse före och efter, rekommenderar vi att du använder SeedProd. Det är en kraftfull webbplatsbyggare som ger dig fullständig designkontroll.

Här på WPBeginner använder vi SeedProd flitigt för att designa anpassade webbplatser för många av våra partnervarumärken inom Awesome Motive-familjen. Dess dra-och-släpp-gränssnitt ger oss flexibiliteten att snabbt skapa sidor med hög konvertering.

SeedProd är den bästa dra-och-släpp-sidbyggaren för WordPress. Den levereras med över 300+ färdiga mallar som du kan använda för att skapa högkonverterande landningssidor, säljdesigner, anpassade WordPress-teman och mer.

Den har också ett färdigt block 'Before After Toggle' som du kan använda för att skapa vackra före-och-efter-bilder som dina användare kan interagera med.

Dra helt enkelt blocket från menyn till vänster och släpp det sedan på vilken sidlayout som helst du arbetar med, inklusive försäljningssidor.

Om du använder WooCommerce för att sälja dina produkter, så integreras SeedProd med WooCommerce och kommer till och med med speciella e-handelsblock. Detta är perfekt om du planerar att använda före-och-efter-bilder för att marknadsföra dina WooCommerce-produkter.

För information om hur du använder SeedProd, se vår guide om hur man skapar en anpassad sida i WordPress.

Efter att ha skapat en sida är det enkelt att lägga till en före-och-efter-bild i din design. I SeedProd-sidredigeraren, hitta helt enkelt blocket ‘Before After Toggle’.

Du kan sedan dra och släppa detta block var som helst i din design för att lägga till det i sidlayouten.

När det är gjort, klickar du helt enkelt för att välja blocket 'Före Efter Växling'. Menyn till vänster uppdateras nu för att visa alla inställningar du kan använda för att skapa din före-och-efter-bild.

För att börja behöver du lägga till bilden du vill använda som före-bild. Under 'Före-bild', klicka antingen på 'Använd din egen bild' eller 'Använd en arkivbild' och välj den bild du vill använda.

Som standard visar SeedProd en 'Before'-etikett ovanför denna bild. Du kan dock ändra detta till något mer beskrivande genom att skriva det i fältet 'Before Label'.

När det är gjort, skrolla till sektionen 'Efter-bild'.

Du kan nu lägga till en bild och anpassa standardetiketten 'Efter' genom att följa samma process som beskrivs ovan.

SeedProd kan lägga till en vertikal eller horisontell slide-effekt.

För att växla mellan dessa två stilar, rulla till avsnittet 'Skjutreglageorientering' och klicka sedan på antingen 'Vertikal' eller 'Horisontell'.

Som standard kommer besökare att röra sig mellan före- och efterbilderna genom att dra i skjutreglaget.

Vissa användare kan dock tycka att det är lättare att flytta bildkarusellen genom att föra muspekaren över bilden. Detta gäller särskilt för större bilder där besökaren skulle behöva dra bildkarusellen en längre sträcka.

För att prova den här inställningen, aktivera 'Flytta vid hovring' i menyn till vänster.

Därefter kanske du vill lägga till en färgad överläggning på både före- och efterbilderna. Detta kan hjälpa bilden att smälta in med resten av färgschemat eller sticka ut från bakgrunden.

Du kan till och med göra den färgade överlagringen halvtransparent för att skapa en mer subtil effekt.

För att prova olika färger, klicka på sektionen 'Overlay Color' och gör sedan dina ändringar i popup-fönstret som visas.

När det är gjort kan du anpassa skjutreglaget genom att klicka för att expandera sektionen 'Comparison Handle'.

Som standard visar SeedProd hälften av 'före'-bilden och hälften av 'efter'-bilden. För att ändra detta, dra helt enkelt i skjutreglaget 'Handle Initial Offset'.

För att visa mindre av före-bilden, dra skjutreglaget åt vänster så att den visar ett lägre nummer. För att visa mer av före-bilden, dra skjutreglaget åt höger, vilket ökar numret.

Därefter kan du ändra skjutreglagets färg med inställningarna för 'Handtagsfärg'.

Du kan också göra handtaget tjockare eller tunnare med reglaget "Handtagets tjocklek".

På så sätt kan du få handtaget att sticka ut eller skapa en mer subtil effekt.

När du är nöjd med handtaget kanske du vill ändra cirkeln. Du kan göra cirkeln större eller mindre med inställningarna för 'Cirkelbredd' och ändra 'Cirkelradie' för att skapa skarpa eller böjda hörn.

När du gör ändringar uppdateras förhandsgranskningen automatiskt, så du kan prova olika inställningar för att se vad som ser bäst ut.

När du är nöjd med cirkeln kanske du vill ändra storleken på trianglarna inuti den cirkeln. Om du till exempel har gjort cirkeln större, kanske du vill öka storleken på trianglarna också.

För att göra den här ändringen, dra reglaget ‘Triangle Size’ tills du är nöjd med hur det ser ut.

När det är gjort kan du fortsätta att lägga till nya block och anpassa innehållet på din SeedProd-sida.

När du är nöjd med hur sidan ser ut, klickar du bara på pilen bredvid knappen 'Spara' och väljer sedan 'Publicera'.

Nu, om du besöker din webbplats, kommer du att se din sidlayout med före- och efterbilderna live.

Vanliga frågor om före-och-efter-skjutreglage

Vi har besvarat några av de vanligaste frågorna våra läsare har om att skapa före-och-efter-bildskjutreglage i WordPress.

Är plugins för före- och efterbilder gratis?

Pluginet The Ultimate Before After Image Slider & Gallery som visas i Metod 1 är helt gratis. SeedProd har också en gratisversion tillgänglig, men du behöver en av deras premiumplaner för att komma åt blocket ‘Before After Toggle’.

Vilken metod är bäst för att skapa ett före-och-efter-reglage?

Den bästa metoden beror på dina behov. För att snabbt lägga till en enkel skjutreglage i ett blogginlägg är det kostnadsfria pluginet ett utmärkt val. Om du vill ha mer designkontroll eller bygger en anpassad landningssida, rekommenderar vi SeedProd för dess flexibilitet.

Kan jag skapa en bildkarusell med fler än två bilder?

Verktygen i den här guiden är specifikt utformade för att jämföra två bilder. Om du behöver visa flera bilder i en sekvens, vill du använda ett dedikerat WordPress-skjutreglage-plugin som Soliloquy.

Kommer ett före-och-efter-reglage att sakta ner min webbplats?

Precis som med alla bilder kan stora filer påverka din webbplats laddningshastighet. För att förhindra detta rekommenderar vi alltid att optimera dina bilder för webben innan du laddar upp dem till WordPress.

Läs mer WordPress bildtips och tricks

Vill du ha fler tips och tricks för att anpassa dina bilder i WordPress? Kolla in dessa guider:

• Hur man lägger till Instagram-liknande fotofilter i WordPress (steg för steg)
• Hur man skapar flipbox-överlägg och hovringar i WordPress
• Hur man automatiskt lägger till vattenstämpel på bilder i WordPress
• Hur man använder AI för att generera bilder i WordPress
• Hur man lägger till animerade GIF-filer i WordPress (på RÄTT sätt)
• Hur man enkelt skapar en responsiv slider i WordPress

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till ett före-och-efter-foto på din WordPress-webbplats med en skjutningseffekt. Du kan också gå igenom vår guide om hur du lägger till kategorier och taggar i WordPress mediebibliotek och våra experters val av de bästa WordPress-pluginsen för utvalda bilder.

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