Interaksi untuk Divi 5 (pop-up, rogen, efek tikus & lainnya)

Hari ini, kami sangat senang melepaskan interaksi untuk Divi 5, sistem yang kuat untuk menciptakan elemen interaktif seperti popup dan rogen, dan efek berbasis gulir kreatif dan berbasis gerakan mouse.

Ini bukan pembangun pop-up; Ini adalah pembangun apa pun . Buat pemicu, tetapkan efeknya, pilih target, dan menghidupkan interaksi khusus Anda. Anda dapat melakukan banyak hal luar biasa dengan sistem ini, dan saya tidak sabar untuk menunjukkan cara kerjanya, jadi mari kita lompat.

Lihat video berikut untuk melihat fitur baru yang sedang beraksi.

Bangun elemen interaktif Anda sendiri

Anda akan melihat grup interaksi baru di tab Lanjutan dari semua elemen. Mengklik tombol Tambah Interaksi akan membuka Editor Interaksi, di mana Anda dapat mengkonfigurasi pemicu, efek, dan target setiap interaksi.

Pemicu memulai interaksi, seperti saat mengklik atau melayang. Efeknya terjadi ketika interaksi dipicu, seperti sakelar visibilitas, preset, atau atribut, dan target adalah elemen yang terpengaruh pada halaman.

Contoh interaksi

Sebelum saya masuk lebih dalam ke pengaturan ini, izinkan saya menunjukkan kepada Anda beberapa contoh apa yang dapat dicapai interaksi.

Contoh 1: Membangun pop-up

Dalam contoh video di bawah ini, saya menggunakan interaksi untuk membuat pop-up.

Saya menambahkan pemicu enter viewport ke bagian, yang menerapkan efek visibilitas sakelar ke pop-up saya. Bagian ini memasuki viewport saya, memicu visibilitas popup, dan meluncur menggunakan pengaturan animasi Divi.

Selain itu, modul ikon dalam sembulan memiliki interaksi berbasis klik, yang mengubah visibilitas pada sembulan untuk menutupnya. Anda dapat membuat semua jenis pop-up atau spanduk mengambang!

Contoh 2: Membangun sakelar

Dalam contoh video di bawah ini, saya menggunakan interaksi untuk beralih tabel penetapan harga bulanan dan tahunan.

Saya menambahkan dua interaksi ke barisan untuk beralih visibilitas bagian harga tahunan dan bulanan. Selanjutnya, saya menambahkan dua interaksi lagi untuk mengubah visibilitas dua modul ikon, memberikan umpan balik tambahan kepada pengguna pada klik.

Contoh 3: Transisi antara preset

Salah satu efek yang paling kuat adalah efek toggle preset. Karena preset memungkinkan Anda untuk memodifikasi pengaturan elemen, tidak ada batasan untuk apa yang dapat Anda lakukan. Ketika pemicu mengubah preset pada elemen target, itu dapat mengubahnya dalam banyak cara.

Dalam contoh video di bawah ini, saya menyiapkan dua interaksi untuk menambah dan menghapus preset pada baris saat masuk dan keluar dari viewport. Preset sorotan mengubah warna dan skala latar belakang baris, dan menambahkan bayangan kotak, menarik perhatian pengguna saat mereka menggulir ke bawah halaman!

Contoh F: Efek Gerakan Tikus

Efek berbasis gerakan mouse sistem interaksi sangat menyenangkan.

Dalam contoh video di bawah ini. Saya menambahkan beberapa interaksi ke bagian pahlawan, menargetkan berbagai elemen dengan efek berbasis gerakan mouse dari berbagai sensitivitas.

Interaksi pemicu pada mouse masuk, menerapkan opacity, gerakan, dan efek kemiringan pada elemen yang berubah saat mouse saya bergerak. Saya juga menambahkan interaksi ke modul tombol, yang beralih preset untuk mengubah gaya garis besar persegi.

Kemungkinannya tidak terbatas!

Saya bisa terus dan terus dengan contoh yang berbeda, dan saya senang melihat apa yang Anda hasilkan.

Melihat editor interaksi lebih dekat, Anda dapat melihat beberapa efek tambahan untuk dimainkan dengan yang belum saya sebutkan, seperti beralih atribut, cookie dan menggulir ke elemen.

Misalnya, Anda dapat menggunakan efek atribut untuk mengubah kelas CSS elemen, ID, atau apa pun.

Versi Satu interaksi mendukung efek berikut:

• Sakelar Visibilitas - Mengalihkan elemen antara keadaan yang terlihat dan tersembunyi secara otomatis.
• Tampilkan elemen - membuat elemen tersembunyi terlihat.
• Sembunyikan Elemen - Membuat Elemen Terlihat Tersembunyi.
• Toggle Preset - Mengaktifkan preset/off untuk suatu elemen, dengan penggantian opsional dari preset yang ada.
• Tambahkan Preset - Menerapkan kelas gaya preset ke elemen, dengan penggantian preset yang ada opsional.
• Hapus Preset - Lepaskan kelas gaya preset dari suatu elemen.
• Atribut Toggle - Menambahkan atau menghapus nilai atribut HTML spesifik elemen, seperti kelas dan ID CSS.
• Tambahkan atribut - tambahkan nilai atribut HTML tertentu ke elemen jika belum ada.
• Hapus Atribut - Menghapus nilai atribut HTML tertentu dari suatu elemen.
• Toggle Cookie - Tambahkan atau angkat nilai cookie dari cookie. Misalnya, atur cookie ketika pop-up muncul untuk melacak ketika pengguna telah melihat pop-up. Kemudian, gunakan opsi kondisi Divi untuk menyembunyikan popup pada kunjungan halaman mendatang untuk pengguna itu.
• Tambahkan cookie - Tambahkan nilai cookie dan cookie yang Anda tentukan ke browser pengunjung.
  Angkat cookie - Angkat cookie yang ditentukan.
• Gulir ke Elemen - Gulir dengan lancar halaman untuk membawa elemen target ke dalam tampilan.
• Mirror Mouse Movement - Membuat elemen target mengikuti gerakan mouse di dalam elemen pemicu menggunakan berbagai jenis gerakan (terjemahan, skala, opacity, miring, atau berputar) dengan sensitivitas yang dapat disesuaikan.

Coba Divi 5 hari ini

Interaksi untuk Divi 5 tersedia saat ini, dan ini adalah salah satu dari banyak fitur yang datang ke Divi tahun ini.

Anda dapat mengikuti saat kami maju melalui rilis akhir Divi 5 dan seterusnya, dengan pembaruan setiap dua minggu. Bergantung pada prioritas Anda, Anda dapat menggunakan Divi 5 sekarang untuk membangun situs web baru atau menunggu sampai kami menambahkan lebih banyak fitur, apa pun yang paling cocok untuk Anda.

Sebagaimana diuraikan dalam jadwal rilis multi-fase asli Divi 5, alpha publik Divi 5 seperti "Divi 5 Lite." Ini kehilangan beberapa fitur dan mungkin tidak cocok untuk situs web yang ada, tetapi siap digunakan di situs web baru jika Anda lebih suka pengalaman daripada Divi 4.

Kami ingin Anda mencobanya, dan jika Anda menyukainya, menggunakannya; Ketika semua orang menyukainya, kami akan membuatnya resmi.

Sudahkah Anda mencoba warna relatif?

Jika Anda melewatkannya, kami baru -baru ini merilis warna relatif untuk Divi 5, menjadikan Divi pemimpin yang jelas dalam manajemen warna dan sistem warna canggih. Ini memungkinkan Anda untuk membuat sistem warna berbasis variabel yang indah secara matematis dengan hubungan warna bersarang menggunakan HSL. Anda tidak ingin tidur di fitur ini.

Tonton video ini untuk semua detailnya.

Lebih banyak pembaruan Divi 5 sedang dalam perjalanan

2025 adalah tahun Divi 5 . Pekerjaan yang membosankan ada di belakang kita. Kami membangun fondasi super cepat, dan sekarang saatnya bagi Divi untuk kembali.

Jika Anda di sini untuk comeback Divi, bantu kami dan beri tahu kami dengan menyukai video ini dan meninggalkan komentar. Sangat berarti bagi kami untuk melihat Anda menyemangati divi, dan penting untuk memberi makan algoritma dan menyebarkan berita.

Jangan lupa untuk mengikuti kami di YouTube dan berlangganan buletin Divi sehingga Anda tidak pernah melewatkan pembaruan. Sampai jumpa untuk pengumuman fitur Divi 5 lainnya, yang saya janjikan akan tepat di tikungan.