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.
Ang epekto ng pag-scroll ng imahe ay magbibigay-daan sa iyo na ipakita ang buong larawan kapag nag-hover ang user sa mga larawan. Kapag bumisita ka sa isang website na nagbebenta ng mga template ng website, makikita mo ang buong preview ng mga template na may mga feature na epekto ng pag-scroll ng larawan.
Gamit ang mga feature na ito, madali mong maipapakita sa iyong mga user ang buong view ng website sa isang maliit na espasyo. Karaniwan, kung gusto mong magpakita ng buong larawan ng isang website, kukuha ito ng maraming espasyo sa iyong mga web page. Bukod dito, nakakaapekto ito sa disenyo ng iyong website.
Ngunit sa epekto ng pag-scroll ng larawan, maaari kang magdagdag ng higit pang mga larawan sa isang kaakit-akit na paraan na madaling makuha ang atensyon ng madla.
Gumawa ng Image Scroll Effect sa Elementor
Ang Elementor ay hindi nagbibigay ng widget upang magdagdag ng epekto ng pag-scroll ng imahe. Kaya kailangan mong idagdag ang epekto gamit ang custom na CSS. Ang tampok na custom na CSS ay magagamit lamang sa Elementor Pro. Kaya siguraduhing nakapag-upgrade ka na Elementor Pro.
Maintenant, ouvrez une page avec l’éditeur Elementor et cliquez sur l’icône plus pour ajouter une section.
Ngayon ay kailangan mong piliin ang column para sa iyong seksyon. Dito pipiliin namin ang solong seksyon ng column.
Ngayon mag-click sa icon ng pag-edit ng seksyon at sa tab ng layout itakda ang pinakamababang taas sa 500.
Ngayon mula sa block widget idagdag ang inner section block sa iyong ginawang seksyon at alisin ang default na column. I-right-click ang icon sa pag-edit ng column at i-click ang opsyong tanggalin upang tanggalin ang pangunahing column.
Pumunta muli sa opsyon sa pag-edit ng panloob na seksyon at sa tab ng layout itakda ang pinakamababang taas sa 500 gaya ng ipinakita namin kanina.
Lumipat ngayon sa tab na istilo ng panloob na seksyon at itakda ang background bilang klasiko mula sa opsyon sa background. Susunod, kailangan mong idagdag ang iyong larawan sa background. Mula sa opsyon sa posisyon ng imahe, itakda ang posisyon ng imahe sa pamamagitan ng Nangungunang Center. Mula sa paulit-ulit na opsyon, itakda ang opsyon no-repeat at ang laki tulad ng takpan.
Ngayon lumipat sa tab advanced para magdagdag ng custom na CSS. Sa custom na CSS field, idagdag ang sumusunod na code:
selector{ -webkit-transition: ease-in-out 3s !important; transition: ease-in-out 3s !importante; } selector:hover{ background-position: center bottom !important; }
Maaari mong baguhin ang halaga ng paglipat upang baguhin ang epekto ng pag-scroll ng mga larawan. Kung gusto mong magdagdag ng maraming larawan na may parehong epekto, maaari mong i-duplicate ang column at pagkatapos ay baguhin ang larawan sa background.
Konklusyon
Sa pamamagitan ng pagsunod sa proseso, makakapagdagdag ka ng image scroll effect sa iyong website gamit ang page builder Elementor. Maaari mong tingnan ang aming iba pang mga artikulo upang matuto:
- Paano gamitin ang mga bloke ng Elementor sa editor ng Gutenberg?
- Elementor vs Divi vs SeedProd - Alin ang mas mahusay?
- Paano Gamitin ang History para I-undo at I-redo ang Mga Pagkilos sa Elementor
- Paano Gumawa ng Elementor Website na Napakabilis
- Paano Gumawa ng Interactive Circle sa Elementor
Umaasa kami na ang artikulong ito ay magiging kapaki-pakinabang sa iyo. Kung gusto mo ang artikulong ito, mangyaring i-like ang aming Facebook page upang manatiling konektado.
