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.
Kuvan vieritystehosteen avulla voit paljastaa koko kuvan, kun käyttäjä vie hiiri kuvien päälle. Kun vierailet verkkosivustolla, joka myy verkkosivustomalleja, näet mallien täydellisen esikatselun kuvien vieritystehosteominaisuuksilla.
Näiden ominaisuuksien avulla voit helposti näyttää käyttäjillesi koko näkymän verkkosivustosta pienessä tilassa. Normaalisti, jos haluat näyttää koko kuvan verkkosivustosta, se vie paljon tilaa verkkosivuiltasi. Lisäksi se vaikuttaa sivustosi suunnitteluun.
Mutta kuvan vieritystehosteen avulla voit lisätä kuvia houkuttelevalla tavalla, joka voi helposti kiinnittää yleisön huomion.
Luo kuvan vieritystehoste Elementorissa
Elementor ei tarjoa widgetiä kuvan vieritystehosteen lisäämiseksi. Joten sinun on lisättävä tehoste mukautetun CSS: n avulla. Mukautettu CSS-ominaisuus on käytettävissä vain kanssa Elementor Pro. Varmista siis, että olet päivittänyt versioon Elementor Pro.
Maintenant, ouvrez une page avec l’éditeur Elementor et cliquez sur l’icône plus pour ajouter une section.
Nyt sinun on valittava sarake osastollesi. Tässä valitsemme yhden sarakkeen osion.
Napsauta nyt osion muokkauskuvaketta ja aseta asettelu-välilehdellä vähimmäiskorkeudeksi 500.
Lisää nyt lohko-widgetistä sisempi osalohko luomaasi osioon ja poista oletussarake. Napsauta hiiren kakkospainikkeella sarakkeen muokkauskuvaketta ja napsauta Poista-vaihtoehtoa poistaaksesi pääsarakkeen.
Siirry uudelleen sisäosan muokkausvaihtoehtoon ja aseta asettelu-välilehdellä vähimmäiskorkeudeksi 500, kuten aiemmin näytimme.
Vaihda nyt sisemmän osan tyylivälilehteen ja aseta tausta perinteiseksi taustavaihtoehdosta. Seuraavaksi sinun on lisättävä taustakuvasi. Aseta kuvan sijainti vaihtoehdosta kuvan sijainti Yläkeskus. Aseta vaihtoehto toistovaihtoehdosta ei toista ja koko kuten kattaa.
Vaihda nyt välilehteen kehittynyt lisätäksesi mukautetun CSS:n. Lisää mukautettuun CSS-kenttään seuraava koodi:
valitsin{ -webkit-transition: easy-in-out 3s !tärkeää; siirtyminen: easy-in-out 3s !tärkeää; } selector:hover{ background-position: center bottom !tärkeää; }
Voit muuttaa siirtymäarvoa kuvien vieritystehosteen muuttamiseksi. Jos haluat lisätä useita kuvia samalla tehosteella, voit kopioida sarakkeen ja vaihtaa sitten taustakuvan.
Yhteenveto
Noudattamalla prosessia voit lisätä kuvan vieritystehosteen verkkosivustollesi sivun rakennustyökalun avulla Elementor. Voit tutustua muihin artikkeleihimme saadaksesi lisätietoja:
- Kuinka käyttää Elementor-lohkoja Gutenberg-editorissa?
- Elementor vs Divi vs SeedProd – kumpi on parempi?
- Kuinka käyttää historiaa toimintojen kumoamiseen ja toistamiseen Elementorissa
- Kuinka tehdä Elementor-verkkosivusto supernopeaksi
- Interaktiivisen ympyrän luominen Elementorissa
Toivomme, että tämä artikkeli on hyödyllinen sinulle. Jos pidät tästä artikkelista, pidä Facebook-sivustamme pysyäksesi yhteydessä.
