Cara Menambahkan Efek Hover Gambar di WordPress (5 Cara Mudah)

Menambahkan efek hover ke situs web Anda mungkin tampak seperti detail kecil, tetapi hal itu dapat meningkatkan tampilan dan kegunaan situs. Ketika pengunjung mengarahkan kursor mouse mereka ke gambar atau tombol dan melihatnya sedikit berubah, itu menandakan bahwa elemen tersebut interaktif. 

Gerakan halus ini akan meningkatkan keterlibatan dan membantu mengurangi rasio pentalan (bounce rate). Efek hover sangat berguna dalam e-commerce. Efek ini memungkinkan pembeli untuk melihat pratinjau produk lebih dekat, mendorong mereka untuk menjelajahi lebih lanjut dan melanjutkan ke pembayaran.

Ada banyak cara untuk menambahkan efek hover gambar di WordPress, mulai dari efek pudar sederhana hingga animasi membalik yang menarik perhatian. Di bawah ini, Anda akan menemukan beberapa metode untuk memulai!

Cara Menambahkan Efek Hover Gambar di WordPress

Dalam artikel ini, kami telah mengumpulkan lima cara mudah untuk menambahkan efek hover ke situs Anda. Pilih mana yang paling sesuai untuk Anda!

Metode 1: Menggunakan Plugin

Plugin akan menghemat banyak waktu dan tenaga Anda, terutama jika Anda ingin menggunakan beberapa efek hover pada situs yang sama.

Misalnya, jika Anda memiliki beberapa galeri gambar, Anda dapat menerapkan animasi yang berbeda untuk masing-masing galeri, seperti zoom sederhana untuk thumbnail blog atau efek membalik untuk gambar produk.

Menggunakan plugin seperti Image Hover Effects Ultimate membuat proses ini jauh lebih mudah. ​​Plugin ini gratis untuk semua orang dan menawarkan berbagai efek untuk setiap elemen. Untuk memulai, cukup instal dengan mengikuti tutorial di bawah ini: 

Memasang Plugin

• Buka area admin WordPress Anda.
• Klik Tambah Plugin dari Plugin di sidebar.

• Ketik "Image Hover Effects Ultimate" di kolom pencarian.

• Pilih hasil pertama dan klik Instal Sekarang untuk memulai pengunduhan.
• Setelah instalasi selesai, klik Aktifkan untuk mulai menggunakan plugin.

Menggunakan Plugin Efek Hover Gambar WordPress

• Setelah plugin terpasang, Anda akan melihat Image Hover di dasbor Anda.

• Klik menu untuk membuka pengaturan plugin. 

• Pilih efek apa pun yang ingin Anda gunakan. Untuk tutorial ini, kita akan bereksperimen dengan Pembesar Gambar .
• Setelah memilih efek, Anda akan melihat berbagai gaya animasi.

Setelah menemukan yang Anda sukai, klik Buat Gaya .

• Jendela pop-up akan muncul. Masukkan judul di Nama dan pilih efek dari tata letak (ke-1, ke-2, atau ke-3). Kemudian klik Simpan untuk melanjutkan.
• Anda akan diarahkan ke halaman baru tempat Anda dapat menyesuaikan pengaturan, seperti tinggi, lebar, dan opasitas. Cobalah berbagai pengaturan untuk melihat mana yang terlihat paling bagus.

• Setelah Anda puas dengan pengaturannya, klik Edit untuk menyesuaikan gambar Anda.

• Jendela pop-up lain akan muncul. Di sini Anda dapat menyesuaikan posisi pembesaran. 

• Anda juga dapat mengganti gambar dengan mengklik Pilih Gambar .
• Setelah mengatur semuanya, klik Kirim untuk menyimpan efek hover Anda.

• Untuk menerapkan efek ini ke situs Anda, salin dan tempel kode pendek ke dalam postingan atau halaman Anda. 

• Sekarang efek hover gambar sederhana Anda siap digunakan di bagian mana pun di situs Anda. 

Metode 2: Menggunakan CSS

Anda tidak perlu menginstal plugin apa pun untuk metode ini. Dengan menggunakan CSS kustom, Anda dapat menambahkan berbagai efek hover ke tema Anda.

Kita mulai dengan sesuatu yang sederhana, seperti efek garis bawah saat kursor diarahkan ke suatu elemen. Jika Anda ingin menambahkan efek ini ke tema Anda, ikuti langkah-langkah mudah di bawah ini:

• Arahkan ke postingan tempat Anda ingin menambahkan efek hover.
• Tambahkan gambar dengan mengklik Sampul dari tanda + .

• Masukkan konten Anda ke dalam Sampul . Di sini kita akan menambahkan judul dan tombol.

• Atur font dan gaya sesuai keinginan Anda.
• Simpan halaman ini sebagai draf.
• Selanjutnya, buka Tampilan di dasbor Anda.

• Kemudian, klik Sesuaikan dan buka CSS Tambahan . Tambahkan kode berikut:

body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f0f0f; margin: 0; font-family: Arial, sans-serif; } .hover-underline { font-size: 2rem; color: #ffffff; position: relative; display: inline-block; } .hover-underline::after, .hover-underline::before { content: ''; position: absolute; width: 100%; height: 2px; background: linear-gradient(to right, #ff0000, #00ffff); bottom: -5px; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease-out; } .hover-underline::before { top: -5px; transform-origin: left; } .hover-underline:hover::after, .hover-underline:hover::before { transform: scaleX(1); }
 

• Klik Publikasikan untuk menyimpan kode.

• Sekarang kembali ke postingan Anda dan pilih teks yang ingin Anda beri efek garis bawah.
• Buka Lanjutan di sidebar blok dan masukkan underline-hover di Kelas CSS tambahan .

• Simpan halaman dan pratinjau untuk melihat efeknya. 

Ada begitu banyak efek hover yang bisa dipilih, jadi pilihlah yang paling sesuai dengan gaya Anda. Anda bisa belajar menulis CSS sendiri atau mencari contoh dari komunitas WordPress. Semuanya tersedia di sana!

Metode 3: Menggunakan Page Builder (misalnya, Elementor)

Page builder seperti Elementor memungkinkan Anda membangun situs web dengan banyak kreativitas. Elementor memiliki efek hover bawaan yang siap digunakan untuk mempercantik situs Anda tanpa memerlukan pengkodean apa pun.

Anda juga dapat menggunakannya untuk membuat efek hover gambar di WordPress. Di bagian ini, kita akan bereksperimen dengan efek hover bawaan di dalam page builder itu sendiri.

Untuk mengatur efeknya:

• Buka Elementor dari dasbor admin.
• Tambahkan gambar Anda.

• Pilih gambar Anda, lalu buka Gaya .
• Gulir ke bawah dan klik Arahkan Kursor .

• Di Animasi Saat Kursor Diarahkan , Anda akan menemukan berbagai efek yang siap digunakan.

• Di sini kami memilih Grow sebagai contoh. Anda kemudian dapat menyesuaikan durasi transisi, opasitas, dan pengaturan lainnya agar sesuai dengan desain situs Anda.

• Setelah selesai, Anda akan dapat melihat efeknya secara langsung tanpa perlu melihat pratinjau terlebih dahulu. 

Metode 4: Menggunakan Plugin Flipbox

Jika Anda mencari jalan pintas, Anda dapat menginstal plugin flipbox. Efek flipbox adalah ketika sebuah gambar berputar untuk menampilkan konten di bagian depan atau belakang saat Anda mengarahkan kursor ke atasnya.

Efek ini sangat bagus untuk gambar fotografi, di mana Anda dapat menampilkan foto di bagian depan dan detail kamera di bagian belakang. Namun, kemungkinannya tidak terbatas.

• Dari dasbor WordPress Anda, klik Plugin . Kemudian, pilih Tambah Plugin .
• Ketik Flipbox - Awesome Flip Boxes Image Overlay di kolom pencarian.

• Klik Instal Sekarang , lalu Aktifkan plugin.

• Untuk membuat flipbox, buka Flip Box dan klik Buat Baru .
• Pilih animasi apa pun yang Anda suka. Setelah menemukan yang Anda inginkan, klik Buat Gaya .

• Jendela pop-up akan muncul. Pilih tata letak yang diinginkan (ke-1, ke-2, atau ke-3) dan masukkan judul. 

• Klik Simpan untuk melanjutkan.
• Selanjutnya, Anda akan dibawa ke menu kustomisasi tempat Anda dapat mengatur efek dan menambahkan konten Anda.

• Gulir ke bawah untuk menemukan Pratinjau . Klik Edit untuk menyesuaikan konten bagian depan dan belakang flipbox.

• Setelah selesai, klik Kirim untuk menyimpannya.

• Untuk menambahkan flipbox ini ke halaman Anda, cukup salin dan tempel kode pendek yang dihasilkan ke bagian mana pun di situs Anda. 

• Dan selesai, inilah produk jadinya! 

Metode 5: Menggunakan Blok Gutenberg

Gutenberg adalah editor blok bawaan WordPress yang memungkinkan Anda menambahkan efek hover langsung di dalam editor.

Meskipun mungkin tidak menawarkan efek hover tingkat lanjut, Anda dapat meningkatkan animasi menggunakan CSS kustom.

Sebagai contoh, mari kita buat efek memudar sederhana saat kursor diarahkan ke atasnya. Berikut tutorial langkah demi langkahnya:

• Arahkan ke postingan atau halaman tempat Anda ingin menambahkan efek hover.
• Klik tanda + untuk menambahkan blok baru, lalu pilih Sampul .

• Di dalam Sampul , tambahkan Paragraf .

• Masukkan judul dan deskripsi singkat Anda.
• Sesuaikan ukuran font, opasitas, perataan, dan warna sesuai kebutuhan.

• Kemudian pilih Sampul untuk menambahkan kelas CSS khusus.
• Buka Lanjutan di bilah sisi kanan.
• Masukkan fade-hover-effect di kolom Kelas CSS Tambahan .

• Setelah itu, simpan halaman tersebut sebagai draf.

• Buka Plugin dan pilih plugin cuplikan kode Anda. Dalam contoh ini, kita menggunakan WPCode .
• Buat cuplikan CSS baru, lalu tempelkan kode berikut:

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

• Simpan cuplikan kode tersebut dan aktifkan.
• Sekarang, pratinjau halaman Anda untuk melihat efek pudar saat kursor diarahkan ke halaman tersebut.

Anda dapat menggunakan kembali efek ini dengan menambahkan kelas fade-hover-effect ke blok atau gambar apa pun. Tetapi jika Anda berurusan dengan banyak gambar, pertimbangkan untuk menggunakan plugin seperti WP Media Folder untuk mengatur pustaka media Anda ke dalam folder. Ini akan memudahkan Anda untuk menemukan dan menggunakan kembali konten yang terkait.

Apakah Penggunaan Efek yang Terlalu Banyak Mempengaruhi Performa?

Ya, penggunaan efek hover yang terlalu banyak di situs Anda berpotensi memengaruhi performa, terutama jika tidak dioptimalkan dengan benar. Hal ini karena beberapa efek hover membutuhkan CSS tambahan. Ukuran CSS situs Anda dapat bertambah dan memperlambat waktu pemuatan halaman.

Sebaiknya hanya gunakan efek hover yang penting untuk meningkatkan pengalaman pengguna tanpa membebani situs Anda.

Kesimpulan

Mempelajari cara menambahkan efek hover gambar di WordPress dapat membantu meningkatkan situs Anda dengan meningkatkan interaksi pengguna dan menjaga keterlibatan mereka.

Dengan berbagai cara untuk menambahkan efek hover, baik melalui plugin, CSS kustom, atau page builder, Anda memiliki kebebasan untuk memilih apa yang paling sesuai untuk Anda. Bereksperimenlah dengan berbagai gaya untuk menemukan gaya yang paling cocok untuk situs Anda!