Perlu menambahkan efek hover di Elementor melalui CSS khusus?
Elementor memiliki fitur built-in untuk menambahkan efek hover ke elemen (Kami membahas ini di salah satu artikel kami. Meskipun fitur ini cukup berguna, ia memiliki kelemahan. Anda hanya dapat menambahkan efek hover ke dalamnya. bagian, kolom, widget Gambar, widget Tombol, dan widget Postingan.
Baca juga: Cara menginstal Elementor di WordPress
Fitur efek hover bawaan Elementor tidak memungkinkan Anda untuk menambahkan efek hover ke widget lain seperti widget Editor Teks, widget Judul, dll. Kelemahan lainnya adalah Anda hanya dapat menambahkan efek hover yang sangat mendasar.
Apakah ada opsi lain untuk menambahkan efek hover di Elementor?
Ya ada. Anda dapat menambahkan efek hover di Elementor melalui CSS khusus. Tetapi untuk menambahkan CSS khusus, Anda perlu menggunakan Elementor Pro karena CSS khusus hanya tersedia di Elementor Pro.
Menambahkan efek hover di Elementor melalui CSS khusus
Sebelum kita mulai, mari kita lihat contoh efek hover yang dibuat melalui custom CSS.
Tidak seperti efek hover bawaan Elementor, Anda dapat menggunakan metode ini untuk menambahkan efek hover ke elemen apa pun di Elementor. Baik itu bagian, kolom, atau widget (semua widget).
Dalam contoh ini, kami akan menunjukkan cara menambahkan efek titik ke kolom.
Pertama, klik pada pegangan kolom untuk beralih ke panel pengaturan kolom. Sesampai di sana, pergi ke tab maju dan buka bloknya Kustom CSS dan paste kode CSS berikut.
pemilih: hover {transisi: semua .2s ease-in-out; mengubah: skala (1.1); kursor: titik; indeks-z: 1; }
Ada.
Pada kode di atas kita menggunakan properti CSS mengubah() untuk menambahkan efek hover. Jenis transformasi yang kita gunakan dalam contoh ini adalah skala, dengan durasi 1,1 detik.
Ada 4 jenis transformasi lain yang dapat Anda gunakan dengan:transform
- Matriks
- Menterjemahkan
- Putar
- Condong
Jika Anda ingin menggunakan gaya transformasi yang berbeda, Anda bisa mengganti nilai mengubah pada kode CSS di atas.
Anda dapat membaca halaman cette untuk mempelajari lebih lanjut tentang transformasi CSS.
Anda dapat mengikuti rute yang sama untuk menambahkan efek hover ke elemen lain.
Untuk menambahkan efek titik ke bagian, Anda dapat mengklik pegangan bagian dan pergi ke tab maju dan buka blok CSS khusus.
Untuk menambahkan efek hover ke widget, Anda dapat mengklik pegangan widget dan membuka tab lagi. Maju, lalu buka blok CSS khusus.
Plugin WordPress premium tambahan lainnya
Temukan juga lainnya plugin WordPress premium yang mengoptimalkan kinerja blog atau situs WordPress Anda.
1. Popup Penjualan Langsung
Popup Penjualan Langsung adalah hal lain WordPress Plugin pemberitahuan dengan beberapa barang yang bisa Anda ubah menjadi keuntungan. Pertama-tama, dia memiliki kemungkinan menampilkan jendela pop-up saat seseorang menyelesaikan pesanan. 
Kedua, jendela pop-up penjualan real-time juga dapat menampilkan pemberitahuan ketika seseorang menambahkan item ke keranjang. Dan ketiga, Anda dapat menggunakan alat tersebut untuk meningkatkan hype suatu produk dengan menunjukkan berapa banyak pengunjung yang melihat artikel tersebut.
Dengan tren web terbaru, Anda dapat mengharapkan Popup Penjualan Langsung ditampilkan dengan indah di semua perangkat dan browser. Sedangkan untuk tata letak pop-up, Anda dapat menyesuaikannya hingga ke detail terkecil.
Untuk membaca: Cara untuk memperbaiki peringatan keamanan pada blog WordPress Anda
Fitur lain dari Live Sales Popup adalah lebih dari tiga puluh animasi, suara, hitung mundur dan pemosisian yang dipersonalisasi. Ini juga berfungsi untuk pemberitahuan palsu dan memungkinkan Anda mengaturnya hanya untuk halaman tertentu di mana Anda ingin pemberitahuan tersebut melakukan tugasnya.
Download | Demo | Hébergement Web
2. Foodify
makanan adalah cara tercepat dan termudah bagi pelanggan untuk memesan makanan dari toko. Itu sepenuhnya responsif dan menyertakan fitur tambahan seperti gambar, opsi pencarian, informasi produk. 
Itu juga menambahkan tombol ke keranjang untuk meningkatkan pengalaman pengguna. Ekstensi WooCommerce ini adalah solusi pemesanan yang cepat dan komprehensif yang dapat ditambahkan ke situs web WooCommerce manapun.
Di sini untukmu Plugin 5 WordPress untuk mengoptimalkan deskripsi dan label kategori
Ini memiliki keuntungan karena sangat fleksibel dan kompatibel dengan banyak plugin yang ada di direktori WordPress.
Download | Demo | Hébergement Web
3. Mega Zoom & Pan Image Viewer
Plugin Mega Zoom & Pan Image Viewer adalah penampil gambar dan browser yang hebat dengan tata letak yang sepenuhnya responsif untuk menampilkan gambar besar di komputer Anda. blog WordPress.
Ini adalah alat canggih yang dirancang untuk menyajikan produk (gambar produk resolusi tinggi. Mis: Pakaian, mobil, diagram teknis, dll.), Menampilkan peta, dan semua gambar lainnya, berkat zoom-nya, fungsinya panorama, kontrol navigasinya, bilah gulirnya, dan penanda / titik akses yang sangat dapat disesuaikan.
Berikut adalah 5 aplikasi smartphone untuk melindungi gambar & video Anda
Plugin ini berfungsi dengan baik di iOS (iPad, iPhone), Android dan Windows mobile, dll. Ini juga berfungsi di semua browser modern dan browser lama seperti IE7 atau IE8.
Sumber daya lain yang direkomendasikan
Kami juga mengundang Anda untuk berkonsultasi dengan sumber daya di bawah ini untuk melangkah lebih jauh dalam cengkeraman dan kontrol situs web dan blog Anda.
- Cara menghapus semua komentar tertunda di WordPress
- Kapan dan bagaimana untuk menginstal WordPress dalam subdirektori
- Plugin 5 WordPress untuk menambahkan kegembiraan Natal ke situs web Anda
- 10 plugin WordPress untuk memperbaiki visual situs Anda
Kesimpulan
Disini adalah ! Itu saja untuk panduan ini. Kami harap artikel ini membantu Anda menambahkan efek hover di Elementor melalui CSS khusus. Anda juga dapat membaca artikel kami di Cara memperbaiki pemblokiran rendering JavaScript dan CSS di WordPress.
Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Jika Anda memiliki teman atau komentar, silakan tinggalkan di bagian komentar. Kebanyakan bagikan artikel ini di berbagai jejaring sosial Anda.
...
