Trenger en måte å lage en bilderulleeffekt på Elementor ? I denne artikkelen vil vi veilede deg til å lage en bilderulleeffekt ved å bruke Elementor på nettsidene dine.
Bilderulleeffekten lar deg avsløre hele bildet når brukeren svever over bildene. Når du besøker et nettsted som selger nettstedsmaler, kan du se hele forhåndsvisningen av malene med funksjoner for bilderulleeffekt.
Med disse funksjonene kan du enkelt vise brukerne dine hele nettstedet på en liten plass. Normalt, hvis du ønsker å vise et fullstendig bilde av et nettsted, vil det ta opp mye plass på nettsidene dine. Dessuten påvirker det utformingen av nettstedet ditt.
Men med bilderulleeffekt kan du legge til flere bilder på en attraktiv måte som enkelt kan fange publikums oppmerksomhet.
Lag bilderulleeffekt i Elementor
Elementor gir ikke en widget for å legge til bilderulleeffekt. Så du må legge til effekten ved å bruke tilpasset CSS. Egendefinert CSS-funksjon er kun tilgjengelig med Elementor Pro. Så sørg for at du har oppgradert til Elementor Pro.
Nå åpner du en side med Elementor-editoren og klikker på plussikonet for å legge til en seksjon.
Nå må du velge kolonnen for din seksjon. Her velger vi enkeltkolonneseksjonen.
Klikk nå på seksjonsredigeringsikonet og sett minimumshøyden til 500 i layoutfanen.
Nå fra blokk-widgeten legg til den indre seksjonsblokken til den opprettede delen og fjern standardkolonnen. Høyreklikk på kolonneredigeringsikonet og klikk på slettealternativet for å slette hovedkolonnen.
Gå til redigeringsalternativet til den indre delen igjen og i layoutfanen setter du minimumshøyden til 500 som vi viste tidligere.
Bytt nå til stilfanen i den indre delen og sett bakgrunnen som klassisk fra bakgrunnsalternativet. Deretter må du legge til bakgrunnsbildet ditt. Fra bildeposisjonsalternativet, angi posisjonen til bildet ved Toppsenter. Velg alternativet fra gjenta-alternativet ingen gjentakelse og størrelsen som dekke.
Bytt nå til fane avansert for å legge til tilpasset CSS. I det tilpassede CSS-feltet legger du til følgende kode:
selector{ -webkit-transition: ease-in-out 3s !viktig; overgang: enkel inn-ut 3s !viktig; } selector:hover{ bakgrunnsposisjon: midt nederst !viktig; }
Du kan endre overgangsverdien for å endre rulleeffekten til bilder. Hvis du vil legge til flere bilder med samme effekt, kan du duplisere kolonnen og deretter endre bakgrunnsbildet.
konklusjonen
Ved å følge prosessen vil du kunne legge til en bilderulleeffekt på nettstedet ditt ved å bruke sidebyggeren Elementor. Du kan sjekke ut våre andre artikler for å lære:
- Hvordan bruker jeg Elementor-blokker i Gutenberg-editor?
- Elementor vs Divi vs SeedProd - Hvilken er bedre?
- Hvordan bruke historikk til å angre og gjøre om handlinger i Elementor
- Hvordan lage en Elementor-nettside superrask
- Hvordan lage en interaktiv sirkel i Elementor
Vi håper denne artikkelen vil være nyttig for deg. Hvis du liker denne artikkelen, vennligst lik vår Facebook-side for å holde kontakten.
