Besoin d’un moyen de créer un effet de défilement d’image dans Elementor ? Dans cet article, nous vous guiderons pour créer un effet de défilement d’images à l’aide d’Elementor sur vos pages web.
Billedrulleeffekten giver dig mulighed for at afsløre det fulde billede, når brugeren svæver over billederne. Når du besøger en hjemmeside, der sælger hjemmesideskabeloner, kan du se den fulde forhåndsvisning af skabelonerne med billedrulleeffektfunktioner.
Med disse funktioner kan du nemt vise dine brugere den fulde visning af hjemmesiden på et lille sted. Normalt, hvis du ønsker at vise et fuldt billede af en hjemmeside, vil det optage meget plads på dine websider. Desuden påvirker det designet af din hjemmeside.
Men med billedrulleeffekt kan du tilføje flere billeder på en attraktiv måde, som nemt kan fange publikums opmærksomhed.
Opret billedrulleeffekt i Elementor
Elementor giver ikke en widget til at tilføje billedrulleeffekt. Så du skal tilføje effekten ved hjælp af tilpasset CSS. Brugerdefineret CSS-funktion er kun tilgængelig med Elementor Pro. Så sørg for at have opgraderet til Elementor Pro.
Maintenant, ouvrez une page avec l’éditeur Elementor et cliquez sur l’icône plus pour ajouter une section.
Nu skal du vælge kolonnen for din sektion. Her vælger vi den enkelte kolonne sektion.
Klik nu på ikonet for sektionsredigering og indstil minimumshøjden til 500 i layoutfanen.
Tilføj nu den indre sektionsblok til din oprettede sektion fra blok-widgetten og fjern standardkolonnen. Højreklik på kolonneredigeringsikonet, og klik på slet for at slette hovedkolonnen.
Gå til redigeringsmuligheden for den indre sektion igen, og indstil minimumshøjden til 500 i layoutfanen, som vi viste tidligere.
Skift nu til stilfanen i den indre sektion og indstil baggrunden som klassisk fra baggrundsindstillingen. Dernæst skal du tilføje dit baggrundsbillede. Fra billedpositionsindstillingen skal du indstille billedets position ved Topcenter. Indstil indstillingen fra gentagelsesindstillingen ingen gentagelse og størrelsen som dæksel.
Skift nu til fanen avanceret for at tilføje tilpasset CSS. Tilføj følgende kode i det tilpassede CSS-felt:
selector{ -webkit-transition: let ind-ud 3s !vigtigt; overgang: let ind-ud 3s !vigtigt; } selector:hover{ background-position: center bottom !important; }
Du kan ændre overgangsværdien for at ændre rulleeffekten af billeder. Hvis du vil tilføje flere billeder med samme effekt, kan du duplikere kolonnen og derefter ændre baggrundsbilledet.
Konklusion
Ved at følge processen vil du være i stand til at tilføje en billedrulleeffekt til dit websted ved hjælp af sidebyggeren Elementor. Du kan tjekke vores andre artikler for at lære:
- Hvordan bruger man Elementor-blokke i Gutenberg-editor?
- Elementor vs Divi vs SeedProd - Hvilken er bedre?
- Sådan bruger du historik til at fortryde og gentage handlinger i Elementor
- Sådan laver du et Elementor-websted superhurtigt
- Sådan opretter du en interaktiv cirkel i Elementor
Vi håber, at denne artikel vil være nyttig for dig. Hvis du kan lide denne artikel, kan du lide vores Facebook-side for at holde kontakten.
