Ingin mempelajari cara menambahkan efek hover ke item di widget postingElementor?
Jika Anda adalah pengguna WordPress yang menggunakan Elementor untuk membuat Anda situs jaringan, Anda harus terbiasa dengan fitur efek hover. Anda dapat menemukan fitur ini terutama di setiap pengaturan widget Elementor.
Efek hover dapat membuat elemen Anda menarik, jadi ini adalah cara yang efektif untuk meningkatkan pengalaman pengguna Anda situs web.
Berbicara tentang efek hover, artikel ini akan menunjukkan kepada Anda cara menambahkan efek hover ke elemen postingan individual di widget Elementor Posting menggunakan CSS khusus Elementor, khususnya, efek zoom-in hover.
Ada dua alasan mengapa kami membuat tutorial ini untuk Anda:
- Secara default, Anda dapat menambahkan efek hover ke postingan dari widget postingan Elementor. Tapi, efek hover akan sangat mendasar/standar.
- Secara default, Elementor memungkinkan Anda menambahkan efek ritsleting ke widget Posting (tab maju -> Transformasi -> skala). Tetapi efek hover akan memengaruhi semua (bukan individu) elemen widget posting.
Langkah-langkah untuk menambahkan efek hover ke setiap posting dari widget posting Elementor
Sebelum memulai tutorial, kami ingin memberi tahu Anda bahwa tutorial ini menggunakan fitur CSS Kustom Elementor. Fitur ini hanya tersedia di Elementor Pro; pastikan Anda telah meningkatkan versi Anda.
Langkah 1: Tambahkan Widget Posting
Buka editor Elementor Anda dan kami akan memulai semuanya dari awal, jadi buatlah bagian dengan satu kolom.
Baca juga: Bagaimana mengintegrasikan MailChimp dengan Elementor
Selanjutnya, pilih widget Posting dari panel widget, lalu seret dan lepas ke area pengeditan. Setelah Anda menambahkan widget Posting, Anda dapat mengedit dan mengatur gaya widget sesuai dengan preferensi Anda.
Ucapan: Harap pastikan Anda sudah menerbitkan artikel di situs web.
Langkah 2: Tambahkan cuplikan CSS
Setelah Anda mengedit dan memberi gaya pada widget Posting, selanjutnya kita akan menambahkan efek hover dalam setiap posting dengan menambahkan potongan CSS sederhana. Di pengaturan widget Posting, buka Tab maju -> CSS khusus. Salin cuplikan CSS di bawah, lalu tempelkan ke kolom CSS khusus.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
Kode di atas akan memilih elemen postingan individu pada widget Posts menggunakan pemilih .élémentor-post dan terapkan transformasi CSS.
Jika Anda senang dengan efek hover yang digunakan, Anda dapat tetap seperti itu dan menyimpan proyek Anda jika diinginkan. Namun, jika Anda ingin menyesuaikan kecepatan transisi dan nilai skala transformasi, Anda dapat mengubah nilainya di cuplikan CSS.
Ucapan: Mengubah/memperbesar adalah efek umum dan populer yang digunakan di situs web. Jika Anda ingin tahu lebih banyak tentang metode lain untuk mengubah efek hover, Anda dapat mengunjungi ini halaman.
Temukan juga: semua pemilih widget Elementor di artikel berikut
Dapatkan Elementor Pro Sekarang!!!
Kesimpulan
Artikel ini menunjukkan kepada Anda betapa mudahnya menambahkan efek hover ke setiap elemen posting di widget posting Elementor menggunakan CSS khusus.
Teknik yang kami gunakan untuk efek ini adalah ( zoom-in ) yang melibatkan 2D dan beberapa elemen transformasi semu. Sesuaikan dan mainkan dengan semua gaya efek hover hingga Anda menemukan efek hover terbaik untuk situs web Anda.
Disini adalah! Kami baru saja memperkenalkan alat terbaik untuk Anda pemasaran melalui email untuk Elementor. Jika Anda memiliki kekhawatiran tentang cara menggunakannya, beri tahu kami di dalam komentar.
Namun, Anda juga bisa berkonsultasi sumber daya kita, 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.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
