Apakah Anda ingin tahu cara mengubah gambar saat melayang dengan DIVI?
Efek hover adalah beberapa interaksi mikro paling sederhana yang dapat dilakukan pengguna dengan a situs web. NS Pembuat Tema Divi menawarkan serangkaian efek melayang yang sangat sederhana yang dapat Anda gunakan untuk menciptakan interaksi yang menarik bagi semua orang yang mengunjungi Anda situs web.
Salah satu efek Divi yang paling mencolok dan berguna adalah kemampuan untuk memodifikasi gambar ketika pengguna mengarahkan kursor ke atasnya.
Kami menunjukkan kepada Anda dalam tutorial ini bagaimana mencapai perubahan gambar yang indah saat mengarahkan kursor mouse ke atasnya.
penelitian
Sebelum kita mulai, mari kita lihat hasil yang ingin kita capai.
Buat halaman dengan Divi Theme Builder
Mulailah dengan menambahkan halaman baru ke situs jaringan dari Dasbor WordPress.
Lihat juga: Bagaimana cara membuat menu geser dan dorong di DIVI?
Kemudian, beri judul pada halaman Anda lalu klik " Gunakan Divi Builder ".
Kemudian klik " Pilih tata letak«
Temukan dan pilih " Halaman Beranda Perawatan Anjing »
Pilih Tata Letak dan klik " Pilih tata letak »
Temukan gambar Anda
Saat berada di Divi Builder, cukup cari gambar yang ingin Anda tambahkan efeknya.
Perhatikan bahwa Anda dapat menggunakannya di elemen apa pun yang mengandung gambar
Buka pengaturan modul
Ketika Anda telah membuat keputusan, klik ikon roda gigi dan masukkan parameter modul berisi gambar.
Dalam kasus paket tata letak ini, gambar yang akan kita terapkan efek hover adalah latar belakang kolom paling kanan dari baris pertama.
Masukkan pengaturan kolom.
Temukan gambar di pengaturan
Setelah Anda berada di pengaturan kolom benar, pastikan untuk memilih tab Isi. Gulir ke bawah hingga Anda menemukan opsi Bawah.
Di bawah Latar belakang, Divi memberi Anda pilihan untuk menggunakan warna solid, atau gradien, atau gambar, atau video dalam format .mp4.
Dan meskipun efek hover dapat diterapkan ke salah satu dari mereka, kami bekerja di tab Gambar , ketiga dari kiri.
Aktifkan Efek Arahkan
Gerakkan mouse Anda ke atas kata Latar belakang (subjudul terkecil) dan cariikon panah pada pilihan yang muncul. Ini adalah sakelar untuk Efek Arahkan Divi.
Saat opsi ini diaktifkan, dua tab baru akan muncul. Tab kiri adalah gambar dasar yang muncul tanpa interaksi.
Pilih gambar baru Anda
Saat Anda memindahkan kursor ke bawah di atas gambar, Anda akan memiliki opsi normal: untuk mengganti gambar ou untuk menghapus gambar.
Jika Anda memilih ikon tempat sampah, itu akan mengaktifkan efek hover, tetapi itu akan membuat gambar menghilang.
Karena kita ingin mengubah gambar di hover, kami juga akan klik pada gambar itu sendiri, baik padaikon perkakas .
Pilih gambar hover (pengganti)
Ini akan membuka perpustakaan media Anda. Anda kemudian dapat memilih gambar baru yang ingin dilihat pengguna saat mereka mengarahkan kursor ke gambar asli. Klik 'Unggah gambar'
Periksa kesalahan dengan gambar asli
Kami selalu menyarankan agar Anda memastikan bahwa gambar aslinya juga tetap sama. Jadi untuk memeriksa, klik pada tab kiri dan pastikan gambar aslinya masih di tempatnya.
Jika semuanya baik-baik saja, Anda dapat menyimpan pengaturan Anda.
- Simpan pengaturan kolom
- Tekan lagi centang hijau untuk menyimpan pengaturan garis.
Simpan pengaturan umum umum dan publikasikan halaman.
Hasil
Jika Anda mengikuti semua langkah dalam tutorial ini, Anda harus mendapatkan ini.
Unduh DIVI Sekarang!!!
Kesimpulan
Pembuat Tema Divi penuh dengan alat canggih yang dapat digunakan siapa saja buat situs web menarik dan interaktif. Perubahan gambar hover yang kami tunjukkan kepada Anda dalam panduan ini hanyalah salah satu alat di antara banyak alat.
Jika Anda membutuhkan lebih banyak elemen untuk menyelesaikan proyek pembuatan situs web Anda, telusuri juga panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk membicarakannya. Tapi sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
