Cara Menguasai Efek Hover di Divi 5 (Public Alpha)

Divi 5 membuat penambahan dan pengeditan efek hover lebih mudah dari sebelumnya. Dalam panduan ini, kami akan memandu Anda melalui semua peningkatan utama yang dilakukan pada efek hover dan cara menggunakannya di Divi 5 untuk menyederhanakan alur kerja Anda tidak seperti sebelumnya.

Pelajari lebih lanjut tentang Divi 5 Public Alpha dan cara mengunduhnya.

Unduh Divi 5 Public Alpha

Memahami Efek Hover di Divi 5 (Public Alpha)

Di Divi 5, salah satu perubahan signifikan terkait efek hover adalah kini lebih mudah diterapkan dan lebih mudah diakses. Di Divi 4, Anda harus mengaktifkan efek hover secara manual untuk setiap elemen dalam pengaturan. Proses ini mungkin rumit, karena Anda harus menemukan opsi spesifik dan mengaktifkan status hover sebelum menerapkan perubahan apa pun.

Dengan antarmuka baru Divi 5, efek hover, responsif, dan mode pengeditan tempel terintegrasi sepenuhnya, membuatnya dapat diakses secara instan. Tidak perlu lagi mengaktifkannya satu per satu!

Peningkatan ini menyederhanakan proses desain dengan mengurangi langkah-langkah yang diperlukan untuk menerapkan desain status hover tingkat lanjut, mempercepat alur kerja, dan menjadikannya lebih intuitif untuk menciptakan interaksi dinamis.

Peningkatan Penting dalam Efek Hover Divi 5

Berikut adalah beberapa peningkatan utama Divi 5 yang membuat penerapan dan pengeditan efek hover menjadi lebih cepat dan mudah:

• Navigasi lebih cepat antara mode normal dan mode hover: Dengan peralihan satu klik, lebih mudah untuk beralih antar status dan melakukan penyesuaian.
• Semua pengaturan hover dalam satu panel: Tidak ada lagi pengaturan yang tersebar. Semua pengaturan hover untuk suatu elemen dapat dengan mudah diperbarui di panel pengaturan.
• Masukan visual instan: Pratinjau real-time menunjukkan perubahan efek hover saat Anda membuatnya, sehingga mempercepat alur kerja Anda.
• Pengorganisasian dan visibilitas pengaturan yang lebih baik: Pengaturan yang tidak aktif berwarna abu-abu, membantu Anda fokus pada opsi yang tersedia.

Peningkatan ini menyederhanakan proses pembuatan desain yang dinamis dan interaktif dengan efek hover.

Ingin mendalami pengaturan baru lebih dalam? Lihat Mengenal Antarmuka Divi 5 untuk melihat bagaimana antarmuka ini dapat menyederhanakan alur kerja desain Anda.

Dapatkan Divi 5 Public Alpha

Cara Menguasai Efek Hover Di Divi 5 (Public Alpha)

1. Akses dan Edit Semua Pengaturan Status Hover di Satu Tempat

Pengaturan hover Divi 5 ditampilkan dengan mudah di panel pengaturan, memberi Anda akses cepat ke semuanya di satu tempat. Panel yang disederhanakan ini mengurangi kebutuhan untuk mengganti efek hover terpisah untuk setiap opsi. Dengan kata lain, setelah status efek hover dipilih di panel pengaturan, semua opsi di bawah setiap tab (Konten, Desain, dan Lanjutan) kini hanya akan diterapkan pada status hover elemen.

Hal ini membuat penambahan efek hover khusus atau kompleks menjadi lebih cepat untuk diterapkan.

2. Kelola Pengaturan Hover yang Tidak Didukung dengan Mudah

Di Divi 5, pengaturan hover yang tidak didukung secara otomatis berwarna abu-abu (tidak dapat diakses), memungkinkan Anda melihat dengan cepat fitur mana yang tidak tersedia untuk elemen yang sedang Anda kerjakan. Visibilitas ini mencegah waktu terbuang untuk mencoba menyingkirkan opsi-opsi yang dapat disesuaikan dalam keadaan melayang dari yang tidak , sehingga meningkatkan alur kerja Anda secara keseluruhan.

3. Nikmati Umpan Balik Visual Real-Time Instan

Umpan balik visual real-time Divi 5 bersifat instan. Anda akan segera melihat perubahannya saat Anda menyesuaikan pengaturan, sehingga mengurangi dugaan dan memungkinkan Anda menyempurnakan efek hover saat bepergian.

4. Edit Efek Hover dengan Cepat di Seluruh Halaman Anda

Di Divi 5, panel pengaturan tetap dalam keadaan melayang saat mengklik elemen lain. Hal ini memungkinkan Anda melakukan pembaruan cepat pada efek hover pada elemen di seluruh halaman hanya dengan mengklik elemen dan membuat perubahan.

5. Pratinjau Efek Hover dengan Percaya Diri di Front-end

Dengan status hover aktif di panel pengaturan, Anda dapat melihat pratinjau desain status hover elemen apa pun dalam satu klik. Status hover akan tetap aktif sehingga jika elemen Anda memiliki efek hover, mengklik elemen tersebut akan langsung menampilkan desain status hover, dan sekaligus membuka pengaturan status hover untuk elemen tersebut.

Seperti yang dapat Anda lihat dalam cuplikan video di bawah, Anda dapat melihat pratinjau desain keadaan hover dari setiap uraian singkat di bagian depan dan itu akan menampilkan efek hover yang sama seperti melihat pratinjau halaman langsung.

Jadi, jika ingin memeriksa desain status hover di halaman Anda, cukup klik elemen di halaman Anda untuk menampilkan desain status hover elemen tersebut secara instan. Hal ini memudahkan untuk memastikan efek hover Anda akurat tanpa harus berpindah-pindah ke halaman aktif Anda.

Unduh Divi 5 Public Alpha

Cara Membuat Efek Melayang di Divi 5: Contoh Singkat

Sekarang kita telah membahas fitur utama efek hover Divi 5, mari kita lihat contoh singkat untuk menunjukkan betapa mudahnya membuat efek hover di Divi 5:

1. Tambahkan Modul

Di pembuat visual Divi, tambahkan modul yang ingin Anda sesuaikan. Untuk contoh ini, mari tambahkan tombol.

2. Akses Pengaturan Arahkan

Klik pada modul untuk membuka panel pengaturan. Di sidebar kanan, klik ikon hover untuk beralih ke mode hover.

3. Sesuaikan Efek Melayang

Saat dalam mode hover, Anda dapat mengubah berbagai properti gaya, seperti warna latar belakang, batas, penskalaan, atau animasi. Mari tambahkan efek Transform ke tombol kita sehingga membesar saat diarahkan.

Jangan lupa. Panel pengaturan Divi 5 yang disederhanakan memiliki semua kontrol dalam satu panel, jadi buat perubahan yang diinginkan lalu klik Simpan setelah Anda selesai.

Jangan ragu untuk menguji berbagai pengaturan efek hover, termasuk transisi warna dan latar belakang, animasi gambar dan teks, efek bayangan, dan kontrol transformasi untuk menskalakan, memutar, atau menerjemahkan elemen. Anda juga dapat menyesuaikan gaya dan filter batas seperti buram atau kecerahan dan menerapkan animasi CSS tingkat lanjut untuk pengalaman pengguna yang lebih menarik.

Divi 5 Adalah Game-Changer Untuk Desain Efek Hover

Efek hover Divi 5 menawarkan kemudahan, kecepatan, dan fleksibilitas tak tertandingi, menyederhanakan proses desain Anda dibandingkan dengan Divi 4. Baik Anda seorang desainer web berpengalaman atau pendatang baru, fitur intuitif ini membuat penambahan elemen interaktif ke situs Anda menjadi lebih sederhana dari sebelumnya.

Siap untuk meningkatkan pengalaman pengguna situs web Anda? Unduh Divi 5 Public Alpha hari ini dan mulailah bereksperimen dengan efek hover baru untuk melihat desain Anda menjadi hidup!

Unduh Divi 5 Public Alpha