Bagaimana Cara Menambahkan Efek Gambar Melayang di WordPress 2024? [4 Langkah Terbaik Untuk Diikuti]

Apa efek hover di WordPress? Situs web Anda harus dibuat unik. Sulit ketika semua orang berpikiran sama. Kabar baiknya adalah teknologi kontemporer menyederhanakan desain situs.

Menambahkan efek hover pada foto statis adalah salah satu contohnya. Tentang manfaat menerapkan efek hover pada gambar di WordPress. Kemudian kami akan menunjukkan cara memasukkannya ke situs web Anda. Mari kita mulai!

Bagaimana Cara Menambahkan Efek Gambar Melayang di WordPress? 4 Langkah Terbaik

Setelah mempelajari tentang efek hover dan kelebihannya, Anda mungkin bertanya bagaimana cara menerapkannya. Untungnya, kami telah menyiapkan panduan komprehensif untuk melakukan hal itu:

Efek hover dapat ditambahkan dengan kode khusus. Namun, jika Anda bukan pembuat kode berpengalaman, ini mungkin memakan waktu dan terkadang berbahaya.

Namun, saat menggunakan plugin, segalanya menjadi lebih mudah.

Grafik plugin WordPress Beaver Builder gratis menyederhanakan proses pembuatan situs WordPress yang berfungsi penuh dan estetis.

Dari CSS modular hingga intuitif editor halaman seret dan lepas, semuanya dirancang dengan mempertimbangkan pengembang.

Sebagai bonus tambahan, aplikasi ini memudahkan siapa saja untuk menerapkan efek hover pada gambar mereka. Anda tidak akan salah memilih Beaver Builder untuk gambar apa pun yang memerlukan elemen interaktif tambahan.

Anda juga disarankan untuk menggunakan Tema Beaver Builder kami. Gunakan templat postingan WordPress untuk membuat berbagai jenis postingan dengan cepat, termasuk halaman.

Dengan begitu, daripada mengkhawatirkan pengembangan tata letak, Anda dapat berkonsentrasi membuat fitur menarik, seperti efek hover. Di sisi lain, Anda dapat menggunakan Beaver Builder dengan tema WordPress apa pun yang Anda pilih.

Langkah 1: Menambahkan Modul Foto

Sebelum memulai, aktifkan plugin Beaver Builder. Lalu pergi ke Halaman di admin WordPress. Aktifkan editor dengan membuat halaman baru atau memilih halaman yang sudah ada.

Kemudian klik tanda Plus di kanan atas. Anda akan menambahkan modul Foto. Drag-and-drop memungkinkan Anda memposisikan modul ini dengan cepat.

Langkah 2: Aktifkan Modul Foto

Modul ini memungkinkan Anda memposting foto ke situs Anda. Pilih foto dari perpustakaan Anda atau masukkan URL. Di Perpustakaan Media, pangkas gambar.

Anda juga dapat membentuk foto. Gambar lanskap, panorama, potret, atau melingkar semuanya dapat menggunakan efek hover. Anda sekarang dapat menyertakan tautan gambar. Efek hover dapat digunakan untuk mengarahkan traffic ke URL tertentu.

Langkah 3: Tambahkan Kelas Khusus

Setelah pengaturan modul gambar, pilih Lanjutan. Ini adalah Elemen HTML.

Gulir ke bawah ke Kelas. Masukkan informasi kelas khusus efeknya di sini. Jadi kami menambahkan hover-unblur ke kelas. Efek hover memungkinkan Anda mengubah warna dan gerakan gambar. Efek heave di Beaver Builder. Berdasarkan dampaknya, diperlukan kelas khusus.

Langkah 4: Integrasikan Efek CSS

Terakhir, tambahkan hover CSS ke situs Anda. Basis pengetahuan kami memiliki CSS hover. Waktu antara efek hover adalah 0.3 detik. Atau saat Anda mengirimkan CSS. Anda dapat mempercepat atau memperlambat transisi.

Pilih Pengaturan Global dari bilah judul kiri. Sekarang tambahkan kode CSS ke tag CSS.

Di setiap halaman Beaver Builder, buka Tools > Global Settings dan simpan. Selain itu, konten non-Beaver Builder tunduk pada aturan CSS Anda.

Satu halaman di LayoutCSS&Jscript. Simpan modifikasi CSS Anda. LIHAT PERTAMA HOVER EFF Arahkan mouse ke atas gambar untuk menguji.

Terapkan efek ke baris atau kolom foto.

Link Cepat:

• Bagaimana Cara Membuat Palet Warna untuk Situs WordPress Anda?
• Bagaimana Cara Membuat Halaman Mode Pemeliharaan di WordPress?
• Bagaimana Cara Membuat Halaman Kesalahan 404 Khusus di WordPress?
• Bagaimana Mengelola Komunikasi Klien Secara Efektif?

Kesimpulan: Bagaimana Cara Menambahkan Efek Gambar Melayang di WordPress?

Ada banyak metode untuk mempersonalisasi situs web, namun salah satu yang paling sederhana adalah dengan menggunakan efek hover pada gambar. Efek hover adalah cara menyenangkan untuk melibatkan pengunjung situs web Anda dan membuat mereka bertahan lebih lama.

Apakah Anda memiliki efek hover pilihan yang ingin Anda gunakan? Letakkan di area komentar di bawah!