For en bestemt type virksomhet, for eksempel en bilderedigeringstjeneste, kan det å legge til en bildesammenligning være et nyttig verktøy for å beskrive tjenesten din. Du kan legge til bildesammenligningen til hjemmesiden, landingssiden eller en hvilken som helst side der du snakker om tjenesten du tilbyr.

Elementor tilbyr faktisk ingen widget eller funksjonalitet for å legge til bildesammenligning, men du kan få det ved å bruke et tillegg. Det er tilleggsmoduler Elementor som tilbyr en widget for å legge til en bildesammenligning. Tre av disse er:  Viktige tilleggGlade tilleggog JetElements

I denne artikkelen vil vi vise deg hvordan du legger til bildesammenligning Elementor ved hjelp av JetElements.

JetElements seg selv er et premium-tillegg for Elementor utviklet av Crocoblock. Det er en del av JetPlugins-familien. Tillegget kommer med en widget kalt Sammenligningsbilder som du kan bruke til å legge til bildesammenligning til Elementor-siden.

Hvordan legge til bildesammenligning i Elementor

Sørg for at du har JetElements-tillegget installert og aktivert før du begynner. Hvis du er ny på Elementor, kan du lese vår forrige artikkel for å lære hvordan du bruker Elementor.

Vi legger til widgeten direkte Sammenligningsbilder i denne artikkelen.

Før du begynner, kan du forberede to bilder for å sammenligne. Du kan for eksempel forberede et før-bilde og et etterbilde. Når du er klar, drar du bare widgeten Sammenligningsbilder i Elementor-redigeringsboksen.

legg til bildesammenligning i Elementor

Som standard lager JetElements Image Compare-widget to bildesammenligninger. Hvis du bare trenger å lage en bildesammenligning (to bilder å sammenligne), kan du slette en av de eksisterende bildesammenligningene.

Les også: Elementor: Hvordan legge til Lottie-animasjon

For å legge til før- og etterbilde, åpne den eksisterende bildesammenligningen (ved å klikke på den) for å redigere innhold. Bare velg det forrige bildet på før bilde delen og velg bildet etter på etter bilde seksjon. Som du kan se, kan du også overstyre etikettene for hver seksjon.

legg til bildesammenligning i Elementor

Når utvalget av bilder er fullført, kan du åpne blokken innstillinger for å stille inn startposisjonen til separatoren. Hvis du vil legge til mer enn én bildesammenligning, kan du angi karusellinnstillingene.

legg til bildesammenligning i Elementor
#bildetittel

Deretter kan du style bildesammenligningen din ved å bytte til fanen Stil. Du kan åpne fem justeringsblokker for å style bildesammenligningen. Men hvis du bare trenger å legge til en bildesammenligning, trenger du bare å åpne de tre første blokkene.

  • Generelt

Du kan åpne denne blokken for å angi polstring, boksskygge, kanttype og kantradius.

legg til bildesammenligning i Elementor
  • Etiketten

Du kan åpne denne blokken for å sammenligne stiletiketter («før» og «etter»-etiketten). Du kan stille inn ting som horisontal justering, vertikal justering, tekstfarge, bakgrunnsfarge, typografi (fontfamilie, skriftstil, skriftstørrelse), etc ...

legg til bildesammenligning i Elementor
  • Handle

Du kan åpne denne blokken for å style håndtaket. Du kan angi ting som håndtaksjustering, kontrollbredde, kontrollhøyde, håndtaksfarge (enten normal tilstand eller ved sveving), og så videre.

Hvis du legger til mer enn én bildesammenligning, kan du også åpne blokkene Karusellpiler et Karusellprikker for å style piler og navigasjonspunkter.

Det er det. Du kan klikke på knappen PUBLISH / OPPDATER for publisere /rediger siden din når du er ferdig med å redigere den.

Skaff deg Elementor Pro nå!!!

konklusjonen

Her! Det er det for denne artikkelen som viser deg hvordan legg til bildesammenligning i Elementor. Hvis du har noen bekymringer om hvordan du kommer dit, gi oss beskjed innen commentaires.

Du kan imidlertid også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.

Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.

...