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.
A képgörgetési effektus lehetővé teszi a teljes kép felfedését, amikor a felhasználó a képek fölé viszi az egérmutatót. Amikor felkeres egy webhelysablonokat árusító webhelyet, láthatja a sablonok teljes előnézetét képgörgetési effektusokkal.
Ezekkel a funkciókkal könnyedén megjelenítheti felhasználóinak a webhely teljes nézetét kis helyen. Általában, ha egy webhely teljes képét szeretné megjeleníteni, az sok helyet foglal el a weboldalain. Ezen túlmenően, ez befolyásolja a webhely kialakítását.
A képgörgetési effektussal azonban több képet is hozzáadhat vonzó módon, ami könnyen felkelti a közönség figyelmét.
Hozzon létre képgörgetési effektust az Elementorban
Az Elementor nem biztosít widgetet a képgörgetési effektus hozzáadásához. Tehát az effektust egyéni CSS segítségével kell hozzáadnia. Az egyéni CSS funkció csak a következővel érhető el Elementor Pro. Tehát győződjön meg róla, hogy frissített Elementor Pro.
Maintenant, ouvrez une page avec l’éditeur Elementor et cliquez sur l’icône plus pour ajouter une section.
Most ki kell választania a szakasz oszlopát. Itt kiválasztjuk az egyoszlopos részt.
Most kattintson a szakasz szerkesztése ikonra, és az elrendezés lapon állítsa be a minimális magasságot 500-ra.
Most a blokk widgetből adja hozzá a belső szakasz blokkot a létrehozott szakaszhoz, és távolítsa el az alapértelmezett oszlopot. Kattintson a jobb gombbal az oszlopszerkesztés ikonra, és kattintson a törlés lehetőségre a főoszlop törléséhez.
Lépjen újra a belső rész szerkesztési lehetőségére, és az Elrendezés lapon állítsa be a minimális magasságot 500-ra, ahogy korábban bemutattuk.
Most váltson át a belső rész stílusfülére, és állítsa be a hátteret klasszikusnak a háttér opcióból. Ezután hozzá kell adnia a háttérképet. A képpozíció opciónál állítsa be a kép pozícióját a következővel Felső központ. Az ismétlési opcióból állítsa be az opciót nem ismételni és a méret, mint terjed.
Most váltson lapra fejlett egyéni CSS hozzáadásához. Az egyéni CSS mezőben adja hozzá a következő kódot:
selector{ -webkit-transition: easy-in-out 3s !fontos; átmenet: easy-in-out 3s !fontos; } selector:hover{ background-position: center bottom !fontos; }
Módosíthatja az átmenet értékét a képek görgetési hatásának megváltoztatásához. Ha több, azonos hatású képet szeretne hozzáadni, megkettőzheti az oszlopot, majd módosíthatja a háttérképet.
Következtetés
A folyamat követésével az oldalkészítő segítségével képgörgetési effektust adhat a webhelyéhez Elementor. További cikkeinkben megtudhatja:
- Hogyan használjuk az Elementor blokkokat a Gutenberg szerkesztőben?
- Elementor vs Divi vs SeedProd – Melyik a jobb?
- Az előzmények használata a műveletek visszavonására és újraindítására az Elementorban
- Hogyan készítsünk szupergyors Elementor webhelyet
- Hogyan hozzunk létre interaktív kört az Elementorban
Reméljük, hogy ez a cikk hasznos lesz az Ön számára. Ha tetszett a cikk, lájkold Facebook oldalunkat, hogy kapcsolatban maradhass.
