Semua yang perlu Anda ketahui tentang interaksi Divi 5

Jika Anda ingin menarik pengunjung dengan pop-up dinamis, rogen, dan efek gulir tanpa plugin atau CSS khusus, Anda akan menyukai salah satu rilis fitur alpha Public Divi 5 terbaru. Interaksi dalam Divi 5 memungkinkan pengguna Divi untuk membuat elemen interaktif yang menarik di dalam pembangun visual. Dalam posting ini, kami akan menyelami semua yang perlu Anda ketahui tentang interaksi Divi 5, menjelajahi fitur-fiturnya, beberapa tips, dan aplikasi dunia nyata untuk membantu Anda terbiasa dengan fitur tersebut.

Catatan penting: Divi 5 saat ini berada di alpha publik dan dioptimalkan untuk situs web baru. Kami tidak merekomendasikan migrasi situs Divi 4 yang ada karena pengembangan yang sedang berlangsung dan masalah kompatibilitas potensial dengan modul warisan. Nantikan pembaruan saat Divi 5 mendekati rilis penuhnya!

Mari kita sampai ke sana.

Apa interaksi Divi 5?

Interaksi Divi 5 adalah pembangun apa pun yang memungkinkan Anda membuat elemen interaktif untuk situs web Anda secara langsung di dalam pembangun visual. Jauh lebih dari sekadar pembangun pop-up, fitur ini memungkinkan Anda membuat berbagai interaksi khusus, dari pop-up hingga animasi yang dipicu gulir, semua tanpa menyentuh baris kode.

Berlangganan saluran YouTube kami

Diintegrasikan dengan mulus ke dalam tab Advanced dari modul apa pun, kolom, baris, atau bagian, interaksi menawarkan fleksibilitas tanpa batas untuk membangun pengalaman yang menarik dan berfokus pada pengguna.

Komponen inti dari interaksi Divi 5

Di jantung interaksi Divi 5 adalah tiga komponen utama yang bekerja bersama untuk menghidupkan desain Anda:

Acara pemicu

Pemicu adalah peristiwa yang memulai interaksi. Contohnya termasuk tindakan pengguna seperti mengklik tombol atau melayang di atas gambar, acara berbasis gulir seperti mencapai titik tertentu pada halaman, atau pemicu berbasis waktu seperti penundaan setelah pemuatan halaman.

Pemicu yang tersedia meliputi:

• Klik : Pengguna mengklik tombol, gambar, atau elemen lain untuk meluncurkan interaksi.
• Mouse Enter/Exit: Pengguna melayang di atas atau meninggalkan elemen.
• Viewport Enter/Exit: Suatu elemen masuk atau keluar dari area yang terlihat dari layar saat pengguna menggulir.
• LOAD: Interaksi dimulai ketika halaman memuat, dengan penundaan waktu opsional.

Misalnya, Anda dapat memicu pop-up 5 detik setelah halaman memuat atau menghidupkan elemen ketika pengguna menggulir.

Tindakan efek

Setelah pemicu diaktifkan, efek menentukan apa yang terjadi. Opsi termasuk menunjukkan atau menyembunyikan elemen, menjiwai dengan fade, skala, rotasi, atau menerapkan transisi preset untuk gaya yang konsisten.

• Toggle Visibilitas: Mengganti elemen antara terlihat dan tersembunyi.
• Tampilkan/Sembunyikan Elemen: Membuat elemen terlihat atau disembunyikan.
• Toggle Preset: Menghidupkan atau mematikan preset untuk elemen desain dengan kemampuan untuk mengganti preset yang ada.
• Tambahkan Preset: Digunakan untuk menambahkan kelas gaya preset ke elemen. Anda juga dapat mengganti preset yang ada.
• Hapus Preset: Gunakan untuk menghapus gaya preset dari suatu elemen.
• Atribut Toggle: Menambahkan atau menghapus atribut HTML elemen, seperti kelas CSS atau ID CSS.
• Tambahkan atribut: Ini menambahkan nilai atribut HTML tertentu di mana orang saat ini tidak ada.
• Hapus atribut: Menghapus atribut apa pun yang diterapkan pada suatu elemen.
• Toggle Cookie: Menambahkan atau menghapus nilai cookie. Misalnya, Anda dapat mengatur cookie saat pop-up muncul dan mengaturnya untuk hanya muncul sekali menggunakan pengaturan kondisi Divi 5.
• Tambahkan cookie: Tambahkan nilai cookie yang dapat Anda tentukan ke browser pengguna.
• Hapus cookie: Lepaskan cookie yang sebelumnya ditentukan.
• Gulir ke Elemen: Memungkinkan halaman untuk menggulir dengan lancar, membawa elemen target ke dalam tampilan.
• Gerakan Mirror Mouse: Memungkinkan Anda untuk mengatur gerakan yang mengikuti gerakan mouse pengguna. Opsi termasuk translate, skala, opacity, tilt, atau rotate. Anda juga dapat menyesuaikan sensitivitas gerakan.

Targetkan modul

Target adalah elemen yang mempengaruhi interaksi, seperti modul, baris, kolom, atau seluruh bagian. Anda dapat menargetkan elemen itu sendiri atau elemen lain pada halaman, menawarkan fleksibilitas untuk membuat interaksi yang kompleks.

Fitur Utama dari Interaksi Divi 5

Interaksi Divi 5 menonjol karena set fitur yang ramah pengguna dan serbaguna:

• Tidak ada antarmuka kode: Konfigurasikan pemicu, efek, dan target melalui antarmuka intuitif dalam tab lanjutan dari elemen apa pun tanpa menggunakan CSS atau JavaScript apa pun.
• Jenis interaksi yang beragam: Buat pop-up untuk penangkapan timbal, beralih untuk FAQ, fade yang dipicu gulir untuk bagian pahlawan, atau efek tikus seperti paralaks untuk portofolio.
• Kinerja ringan: Dibangun langsung ke Divi 5, interaksi menghilangkan kebutuhan untuk plugin pihak ketiga, mengurangi pemusnahan situs dan meningkatkan waktu beban.
• Kombinasi pemicu dinamis: Gabungkan beberapa pemicu, seperti acara gulir dengan penundaan waktu, untuk interaksi canggih seperti pop-up yang muncul setelah pengguna menggulir halaman.
• Desain Responsif: Sesuaikan desktop, tablet, dan interaksi seluler menggunakan breakpoint responsif yang dapat disesuaikan Divi 5.

Cara Mengakses dan Menggunakan Interaksi Divi 5

Membuat interaksi di Divi 5 sangat mudah, berkat integrasinya dalam pembangun visual. Ikuti langkah -langkah sederhana ini untuk memulai:

Mulailah dengan membuka halaman di Divi 5. Pilih modul, baris, kolom, atau bagian yang ingin Anda tambahkan interaksi. Misalnya, pilih modul gambar di halaman Anda.

Arahkan ke tab Advanced dan klik dropdown interaksi . Klik tombol + Tambahkan Interaksi dari sana.

Kami ingin membuat efek miring/mengubah mouse-over untuk gambar kami. Untuk melakukan ini, kita perlu membuat dua interaksi - satu untuk gambar dan satu lagi untuk kolom yang berisi gambar. Mulailah dengan memberikan nama interaksi Anda di label admin , lalu masukkan pengaturan berikut:

• Acara Pemicu: Mouse Enter
• Tindakan Efek: Gerakan Tikus Mirror
• Modul Target: Gambar
• Tunda Waktu: 0
• Jenis Gerakan: Terjemahan
• Sensitivitas: 10

Setelah semua pengaturan ada, klik tombol Simpan Interaksi untuk melanjutkan.

Selanjutnya, kami akan membuat interaksi transformasi pada kolom. Klik + Tambahkan interaksi sekali lagi. Masukkan pengaturan berikut untuk membuat interaksi:

• Label Admin: kolom miring
• Acara Pemicu: Mouse Enter
• Tindakan Efek: Gerakan Tikus Mirror
• Modul Target: Kolom
• Tunda Waktu: 0
• Jenis Gerakan: Miring
• Sensitivitas: 30

Setelah pengaturan dimasukkan, interaksi Anda akan terlihat seperti ini:

Gunakan tombol Pratinjau untuk melihat interaksi Anda.

Halaman Anda akan muncul di tab baru, memungkinkan Anda untuk melihat pratinjau dan menguji interaksi Anda.

Jenis interaksi yang dapat Anda buat

Berikut adalah beberapa contoh praktis untuk memamerkan keserbagunaan interaksi Divi 5, lengkap dengan pemicu, efek, dan aplikasi dunia nyata.

Selamat datang popup untuk pengunjung baru

Pop-up sangat bagus untuk mendesak pengunjung untuk mendaftar buletin, promosi, atau acara. Dengan interaksi Divi 5, Anda dapat membuat pop-up selamat datang yang muncul setelah halaman memuat.

Untuk membuat interaksi ini, Anda harus membuat bagian untuk pop-up Anda dan menetapkan pengaturan berikut:

• Label Admin: Popup
• Peristiwa Pemicu: Muat
• Tindakan Efek: Tampilkan Elemen
• Modul Target: Bagian (Pop-up)-Pastikan untuk memberi nama bagian Anda sebelum membuat interaksi
• Waktu Penundaan: 5 detik

Kami juga perlu membuat interaksi untuk menutup pop-up. Cara termudah adalah dengan menambahkan modul ikon ke sudut kanan atas bagian pop-up dan menetapkan pengaturan berikut:

• Label Admin: Tutup Tombol
• Acara Pemicu: Klik
• Tindakan Efek: Sembunyikan Elemen
• Modul Target: Bagian (Popup)
• Tunda Waktu: 0

Untuk mengontrol penempatan popup Anda, gunakan pengaturan posisi Divi 5. Di tab Advanced , temukan menu drop-down posisi dan atur posisi untuk diperbaiki . Dari sana, pilih lokasi yang Anda ingin muncul di halaman. Dalam contoh ini, kami telah mengaturnya ke pusat . Ini juga merupakan ide yang bagus untuk mengatur indeks Z sehingga pop-up muncul di atas segalanya di halaman, seperti 99999 .

Langkah terakhir adalah mengatur visibilitas pop-up untuk disembunyikan di semua perangkat. Untuk melakukan ini, navigasikan ke tab Advanced , gulir ke menu drop-down visibilitas , dan beralih semua opsi untuk menyembunyikan bagian pop-up di semua perangkat.

Beralih visibilitas suatu elemen

Toggles sempurna untuk membuat bagian konten yang dapat dilipat seperti FAQ, menu akordeon, tabel harga, atau layanan. Mereka memungkinkan pengguna untuk memperluas atau memecahkan konten dengan klik, menjaga halaman Anda tetap bersih dan interaktif. Misalnya, Anda dapat mengungkapkan daftar layanan lengkap yang hanya terlihat setelah tombol diklik.

Untuk membuat efek ini, Anda akan mengatur interaksi pada tombol yang ingin Anda atur sebagai pemicu untuk bagian Anda. Masukkan pengaturan berikut untuk interaksi:

• Label Admin: Tampilkan Layanan
• Acara Pemicu: Klik
• Tindakan Efek: Tampilkan Elemen
• Target Modul: Bagian (mengungkapkan layanan)
• Tunda Waktu: 0

Selanjutnya, atur tautan jangkar untuk membuka bagian. Buka pengaturan tombol dan masukkan #Services ke bidang URL tautan tombol dari tab Konten.

Klik bagian fitur di bawah tombol dan navigasikan ke tab Lanjutan. Atur jangkar dengan menambahkan layanan ke bidang ID CSS di bawah menu ID & Kelas CSS.

Saat berada di tab Advanced, Anda juga harus mengatur visibilitas bagian menjadi tersembunyi, seperti yang kami lakukan dengan pop-up kami.

Efek gerakan tikus

Interaksi Divi 5 memungkinkan Anda untuk membuat efek gerakan mouse dinamis ketika pengguna melayang di atas elemen desain. Misalnya, Anda dapat menggabungkan interaksi untuk membuat efek kemiringan pada heading dan kolom induk.

Anda harus membuat interaksi untuk judul terlebih dahulu untuk mencapai interaksi ini. Masukkan pengaturan berikut di tab Advanced Image:

• Label Admin: Heading Animasi
• Acara Pemicu: Mouse Enter
• Tindakan Efek: Gerakan Tikus Mirror
• Modul Target: Teks
• Tunda Waktu: 0
• Jenis Gerakan: Miring
• Sensitivitas: 30

Ketika pengaturan dimasukkan, mereka harus terlihat seperti tangkapan layar di bawah ini.

Selanjutnya, atur interaksi pada kolom yang berisi heading dengan menggunakan pengaturan berikut:

• Label admin: kemiringan kolom
• Acara Pemicu: Mouse Enter
• Tindakan Efek: Gerakan Tikus Mirror
• Modul Target: Kolom
• Tunda Waktu: 0
• Jenis Gerakan: Miring
• Sensitivitas: 50

Setelah selesai, pengaturan Anda akan terlihat mirip dengan tangkapan layar di bawah ini.

Interaksi berbasis preset

Anda dapat menggunakan interaksi Divi 5 di samping preset untuk membuat efek baik dengan pemicu mouseover atau viewport enter/keluar. Misalnya, jika Anda ingin memamerkan bagian pada halaman Anda dengan mengubah warna latar belakang atau menambahkan gaya bayangan perbatasan, Anda dapat menggunakan interaksi untuk melakukannya. Dalam contoh di bawah ini, warna latar belakang, lebar, dan perbatasan berubah ketika pengguna melayang di atas bagian.

Untuk membuat efek ini, pertama -tama Anda harus membuat preset untuk menampilkan bagian sebelum dan sesudah mouseover. Dalam contoh ini, kami telah membuat dua - satu dengan latar belakang kuning solid dan lainnya dengan berbagai efek dan latar belakang hijau.

Setelah preset Anda dibuat, Anda dapat menggunakan interaksi untuk mengubah perubahan pada hover. Mulailah dengan membuat interaksi pertama dengan pengaturan berikut:

• Label Admin: Latar Belakang Kuning
• Acara Pemicu: Mouse Enter
• Tindakan Efek: Toggle Preset
• Modul Target: Bagian (harga)
• Waktu tunda: 1 detik
• Preset: Latar Belakang Kuning

Selanjutnya, buat interaksi kedua untuk mouse-over dengan memasukkan pengaturan berikut:

• Label Admin: Latar Belakang Hijau
• Acara Pemicu: Keluar Mouse
• Tindakan Efek: Toggle Preset
• Modul Target: Bagian (harga)
• Tunda Waktu: 0
• Preset: Preset hijau

Manfaat Menggunakan Interaksi Divi 5

Interaksi Divi 5 menawarkan pendekatan yang kuat dan ramping untuk membangun situs web, memberikan berbagai keuntungan yang menjadikannya fitur yang menonjol bagi pengguna Divi. Inilah pandangan yang lebih dalam mengapa fitur ini merupakan tambahan yang sangat membantu untuk Divi 5:

1. Tidak diperlukan plugin

Karena interaksi Divi 5 diintegrasikan ke dalam inti Divi, ia menghilangkan kebutuhan untuk plugin pihak ketiga untuk membuat pop-up dan interaksi lainnya. Pendekatan asli ini mengurangi jumlah skrip yang berjalan di situs Anda, yang mengarah ke waktu pemuatan yang lebih cepat dan peningkatan metrik kinerja.

Misalnya, alih-alih mengandalkan plugin pop-up, interaksi Divi 5 menangani segala sesuatu di dalam pembangun visual, memastikan basis kode yang lebih ramping dan pengalaman pengguna yang lebih halus. Ini juga berarti lebih sedikit pembaruan untuk mengelola dan menurunkan risiko konflik plugin, membuat situs Anda lebih andal.

2. Ini ramah pengguna

Interaksi Divi 5 dirancang secara intuitif, hanya membutuhkan beberapa klik untuk membuat interaksi. Pemula dapat dengan cepat memahami dasar -dasarnya, dan pengembang Pro dapat menyelami kombinasi yang kompleks tanpa menulis satu baris kode.

Pengaturan interaksi diatur dengan rapi di dalam tab lanjutan dari elemen apa pun, dengan label yang jelas dan tooltips yang memandu Anda melalui seluruh proses. Misalnya, menyiapkan pop-up membutuhkan beberapa klik untuk memilih pemicu dan efek, memudahkan siapa pun untuk digunakan.

3. Kebebasan untuk menyesuaikan

Fleksibilitas interaksi Divi 5 dan pengaturannya yang luas - pemicu, efek, dan target - memungkinkan Anda untuk membuat pengalaman unik bagi pengunjung situs Anda. Anda dapat mencampur beberapa pemicu, seperti menggabungkan viewport enter berbasis gulir dengan penundaan waktu, untuk membuat interaksi yang canggih, seperti spanduk promosi yang memudar setelah pengguna gulir di tengah halaman.

Kemampuan untuk menargetkan modul, baris, kolom, atau bagian apa pun berarti Anda dapat menerapkan efek secara tepat jika diperlukan, apakah itu menjiwai satu tombol atau mengubah seluruh bagian pahlawan.

4. Keterlibatan Pengguna yang Ditingkatkan

Elemen interaktif meningkatkan keterlibatan pengguna dengan membuat situs web lebih mendalam dan responsif. Interaksi Divi 5 membantu menjaga pengunjung di situs Anda dengan mendorong interaksi, seperti mengklik sakelar untuk mengungkapkan harga alternatif atau memicu pop-up untuk penangkapan timbal. Misalnya, situs web restoran dapat menggunakan animasi yang dipicu gulir untuk mengungkapkan bagian menu.

Tip Praktis untuk Memulai

Untuk memanfaatkan interaksi Divi 5 sebaik -baiknya, dekati secara strategis untuk memastikan hasil yang optimal. Berikut adalah beberapa tips untuk memandu Anda melalui prosesnya:

• Mulai Sederhana: Mulailah dengan interaksi langsung seperti pop-up atau rogen untuk membiasakan diri dengan fitur sebelum menangani efek canggih seperti gerakan mouse atau animasi multi-pemicu.
• Gunakan bidang Label Admin: Memberi label interaksi dan elemen Anda sangat penting, terutama pada halaman kompleks dengan beberapa bagian. Menambahkan nama ke bidang Label Admin di tab Konten dari setiap modul memungkinkan Anda untuk menjaga hal -hal terorganisir dan dengan mudah mengenali elemen target yang tepat.
• Gunakan Preset: Sistem preset Divi 5 sangat bagus untuk menghemat waktu dan mempertahankan konsistensi di seluruh interaksi. Preset memungkinkan Anda untuk mendefinisikan gaya yang dapat digunakan kembali, seperti animasi fade-in atau transisi warna, dan menerapkannya pada beberapa elemen.
• Tes secara menyeluruh: Selalu pratinjau interaksi Anda menggunakan fitur pratinjau Divi 5 untuk menangkap masalah apa pun sebelum diterbitkan. Anda juga dapat menggunakan breakpoint responsif divi 5 yang dapat disesuaikan untuk menguji bagaimana interaksi berperilaku pada semua perangkat.

Tinggikan situs web Anda dengan interaksi Divi 5

Interaksi Divi 5 adalah fitur yang sempurna untuk membuat elemen interaktif yang menarik dan tanpa kode untuk meningkatkan pengalaman pengguna situs web Anda. Dari pop-up yang menangkap mengarah ke animasi yang dipicu gulir yang menghidupkan desain Anda, fitur ini memungkinkan siapa saja untuk membangun situs web yang dinamis dan profesional tanpa menyentuh barisan kode. Integrasi yang ringan dan beragam opsi pemicu menjadikannya alat penting untuk desain web modern.

Siap Memulai? Unduh Divi 5 Alpha terbaru dan selami interaksi untuk membuat pop-up, konten yang diaktifkan, efek gulir, dan banyak lagi. Catatan singkat: Divi 5 siap untuk situs web baru, tetapi kami belum merekomendasikan menggunakannya di situs yang ada.

Komentar di bawah ini atau hubungi saluran media sosial kami untuk membagikan kreasi Anda dengan kami. Kami ingin melihat mereka!