Letar du efter den bästa före- och efterbildsreglaget för din webbplats? Oroa dig inte mer! För vi har rätt lösning för dig. Idag ska vi visa dig hur du enkelt kan göra en med hjälp av Elementor.

En bildslider med före- och efterbilder skapar ett bildspel genom att placera två liknande bilder sida vid sida. Med en slider bar kan du dra den fram och tillbaka för att se båda de jämförande bilderna. Det är trots allt ett intressant sätt att visa upp nyinkomna produkter, ditt företags tillväxt eller speciella betydelser. Det gör inte bara att dina besökare lockas till det, utan det visar också effekterna av din produkt eller tjänst. Det är faktiskt en ganska bra bit av ett verktyg!

I allmänhet använder människor fotoredigeringsverktyg för att göra den här typen av effekt. Men med hjälp av en enkel Bildjämförelse widget, du kan enkelt uppnå denna prestation. Observera att företaget Element Pack har utvecklat denna widget. Denna widget är en fullt fungerande bildslider som hjälper dig att visa 2 olika versioner av samma bild. Dessutom kan du använda den på vilket sätt du vill.

Inget mer småprat. Låt oss komma in i det!

Infoga och anpassa bildreglage före och efter

Infoga widget

Gå först till din webbsida där du vill använda den här slidern. Eftersom vi gör detta med elementor, se till att installera Elementor och Element Pack Lite plugins i din instrumentpanel. Vi kommer dock inte att prata om installationsprocedurer i den här bloggen.

Även om det inte är värt att nämna, kan fortfarande nybörjare tycka att det är svårt. Sök bara efter Bildjämförelse widget i widgetmenyn. När du ser den (den har ElementPack logotypen på den), dra och släpp den i ett avsnitt i redigeraren.

Anpassa layouten för bildslidern

När du släpper den kommer du att se standardinställningen för skjutreglaget i början. Detta är dock den Layout avsnittet i Innehåll fliken. Du kan välja vilken typ av bild som helst för att visa den här i bildreglaget.

Låt oss ändra bilderna. Till att börja med, låt oss välja normala.

När du har infogat en bild kan du ändra storleken på den från Bildstorlek alternativ. Generellt gäller att ju större bilden är, desto mer utrymme tar den. För en bild med en höjd på 1000 pixlar men en bredd på 500 pixlar kommer sliderns längd att öka med 1000 pixlar.

Dessutom kan du ändra taggarna "Efter" och "Före" härifrån. Låt oss prata om den här delen senare och gå vidare till nästa avsnitt.

Inställningar för gränssnitt

Gå till Fliken Innehåll> Ytterligare

Den Ytterligare är också känt som gränssnittsinställningar. Härifrån kan vi ändra skjutreglagets orientering till antingen vertikal eller horisontell. Du kan också ändra 'före bild' synlighet. Den Överlägg switcher slår på/av överlägg på hela före- och efterbildsreglaget.

Återigen finns det några saker att prata om i det här avsnittet. Lägg märke till att du kan lägga till en cirkel i mitten av skjutreglaget. Du kan också lägga till en oskärpeeffekt i cirkeln.

En annan intressant sak här är att du har möjlighet att jämna ut svävarens dragning av bildfältet. Slå på växlaren Utjämnande? för att jämna ut svävardragningen. Du kan dock justera känsligheten för bildreglaget med scrollknappen nedan.