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.
Efek gulir gambar akan memungkinkan Anda untuk mengungkapkan gambar penuh saat pengguna mengarahkan kursor ke gambar. Saat Anda mengunjungi website yang menjual template website, Anda bisa melihat preview lengkap template tersebut dengan fitur image scroll effect.
Dengan fitur-fitur ini, Anda dapat dengan mudah menunjukkan kepada pengguna Anda tampilan penuh situs web dalam ruang kecil. Biasanya, jika Anda ingin menampilkan gambar lengkap dari sebuah situs web, ini akan menghabiskan banyak ruang di halaman web Anda. Selain itu, itu memengaruhi desain situs web Anda.
Namun dengan efek gulir gambar, Anda dapat menambahkan lebih banyak gambar dengan cara yang menarik yang dapat dengan mudah menarik perhatian audiens.
Buat Efek Gulir Gambar di Elementor
Elementor tidak menyediakan widget untuk menambahkan efek gulir gambar. Jadi, Anda perlu menambahkan efek menggunakan CSS khusus. Fitur CSS khusus hanya tersedia dengan Elementor Pro. Jadi pastikan Anda telah meningkatkan ke Elementor Pro.
Maintenant, ouvrez une page avec l’éditeur Elementor et cliquez sur l’icône plus pour ajouter une section.
Sekarang Anda perlu memilih kolom untuk bagian Anda. Di sini kita memilih bagian kolom tunggal.
Sekarang klik ikon edit bagian dan di tab tata letak atur ketinggian minimum menjadi 500.
Sekarang dari widget blok tambahkan blok bagian dalam ke bagian yang Anda buat dan hapus kolom default. Klik kanan ikon edit kolom dan klik opsi hapus untuk menghapus kolom utama.
Buka opsi edit bagian dalam lagi dan di tab tata letak atur tinggi minimum menjadi 500 seperti yang kami tunjukkan sebelumnya.
Sekarang beralih ke tab gaya bagian dalam dan atur latar belakang sebagai klasik dari opsi latar belakang. Selanjutnya, Anda perlu menambahkan gambar latar belakang Anda. Dari opsi posisi gambar, atur posisi gambar berdasarkan Pusat Atas. Dari opsi pengulangan, atur opsi tidak ada pengulangan dan ukuran seperti menutupi.
Sekarang beralih ke tab maju untuk menambahkan CSS khusus. Di bidang CSS khusus, tambahkan kode berikut:
selector{ -webkit-transition: ease-in-out 3s !penting; transisi: kemudahan-masuk-keluar 3s !penting; } selector:hover{ background-position: center bottom !important; }
Anda dapat mengubah nilai transisi untuk mengubah efek pengguliran gambar. Jika Anda ingin menambahkan beberapa gambar dengan efek yang sama, Anda dapat menduplikasi kolom lalu mengubah gambar latar belakang.
Kesimpulan
Dengan mengikuti prosesnya, Anda akan dapat menambahkan efek gulir gambar ke situs web Anda menggunakan pembuat halaman Elementor. Anda dapat melihat artikel kami yang lain untuk mempelajari:
- Bagaimana cara menggunakan blok Elementor di editor Gutenberg?
- Elementor vs Divi vs SeedProd – Mana yang lebih baik?
- Cara Menggunakan Riwayat untuk Membatalkan dan Mengulangi Tindakan di Elementor
- Cara Membuat Website Elementor Super Cepat
- Cara Membuat Lingkaran Interaktif di Elementor
Semoga artikel ini bermanfaat bagi Anda. Jika Anda menyukai artikel ini, silakan sukai halaman Facebook kami untuk tetap terhubung.
