För en viss typ av företag som en fotoredigeringstjänst kan det vara ett användbart verktyg att lägga till en bildjämförelse för att beskriva din tjänst. Du kan lägga till bildjämförelsen på startsidan, landningssidan eller vilken sida som helst där du talar om tjänsten du erbjuder.

Elementor erbjuder faktiskt ingen widget eller funktion för att lägga till bildjämförelse, men du kan få det med ett tillägg. Det finns ytterligare moduler Elementor som erbjuder en widget för att lägga till en bildjämförelse. Tre av dem är:  Viktiga tilläggGlada tilläggoch JetElements

I den här artikeln kommer vi att visa dig hur du lägger till bildjämförelse i Elementor använder JetElements.

JetElements i sig är ett premiumtillägg för Elementor utvecklat av Crocoblock. Det är en del av JetPlugins-familjen. Tillägget kommer med en widget som heter Jämförelsebilder som du kan använda för att lägga till bildjämförelse på Elementor-sidan.

Hur man lägger till bildjämförelse i Elementor

Se till att du har JetElements-tillägget installerat och aktiverat innan du börjar. Om du är ny på Elementor kan du läsa vår tidigare artikel för att lära dig hur man använder Elementor.

Vi lägger till widgeten direkt Jämförelsebilder i den här artikeln.

Innan du börjar kan du förbereda två bilder att jämföra. Du kan till exempel förbereda en förebild och en efterbild. När du är redo drar du bara widgeten Jämförelsebilder i Elementors redigeringsruta.

lägg till bildjämförelse i Elementor

Som standard skapar JetElements Image Compare-widget två bildjämförelser. Om du bara behöver skapa en bildjämförelse (två bilder att jämföra), kan du ta bort en av de befintliga bildjämförelserna.

Läs också: Elementor: Hur man lägger till Lottie-animation

För att lägga till före- och efterbilden, öppna den befintliga bildjämförelsen (genom att klicka på den) för att redigera innehåll. Välj bara föregående bild på före bild avsnitt och välj bilden efter på efter bild sektion. Som du kan se kan du även åsidosätta etiketterna för varje avsnitt.

lägg till bildjämförelse i Elementor

När urvalet av bilder är klart kan du öppna blocket Inställningar för att ställa in startpositionen för separatorn. Om du vill lägga till mer än en bildjämförelse kan du ställa in karusellinställningarna.

lägg till bildjämförelse i Elementor
#image_title

Sedan kan du styla din bildjämförelse genom att byta till fliken Stil. Du kan öppna fem justeringsblock för att utforma din bildjämförelse. Men om du bara behöver lägga till en bildjämförelse behöver du bara öppna de tre första blocken.

  • Général

Du kan öppna detta block för att ställa in utfyllnad, boxskugga, kanttyp och kantradie.

lägg till bildjämförelse i Elementor
  • etikett

Du kan öppna det här blocket för etiketter för stiljämförelse (etiketten "före" och "efter"). Du kan ställa in saker som horisontell justering, vertikal justering, textfärg, bakgrundsfärg, typografi (teckensnittsfamilj, teckensnittsstil, teckenstorlek), etc...

lägg till bildjämförelse i Elementor
  • Handle

Du kan öppna detta block för att styla handtaget. Du kan ställa in saker som handtagsjustering, kontrollbredd, kontrollhöjd, handtagsfärg (oavsett om det är normalt tillstånd eller vid hovring) och så vidare.

Om du lägger till mer än en bildjämförelse kan du också öppna blocken Karusell pilar et Karusellprickar för att utforma pilar och navigeringspunkter.

Det är allt. Du kan klicka på knappen PUBLICERA / UPPDATERING för publicera /redigera din sida när du är klar med att redigera den.

Skaffa Elementor Pro nu!!!

Slutsats

Här! Det är det för den här artikeln som visar dig hur lägg till bildjämförelse i Elementor. Om du har några funderingar kring hur du ska ta dig dit, låt oss veta inom commentaires.

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.