Memahami perbedaan antara pemicu, efek, dan target dalam Divi 5

Interaksi baru Divi 5 menggunakan model sederhana - pemicu, efek, target. Pisahkan apa yang memulainya, apa yang terjadi, dan apa yang berubah, dan Anda dapat membuat gerakan yang jelas dan terkoordinasi di seluruh tata letak Anda. Dalam posting ini, kami akan menjelaskan setiap bagian, menunjukkan bagaimana mereka cocok bersama, dan berjalan melalui contoh cepat yang dapat Anda gunakan kembali. Ayo sampai ke sana!

Apa pemicu, efek, dan target?

Interaksi dalam Divi 5 dibangun dari tiga bagian yang bergerak yang bekerja bersama. Pemicu mengatur hal -hal yang bergerak, efek memutuskan bagaimana respons terlihat, dan target mendefinisikan elemen mana yang berubah.

Berlangganan saluran YouTube kami

Saat Anda mengatur interaksi, Divi akan meminta Anda untuk mengisi ketiga bagian:

Memahami setiap peran secara terpisah akan membuatnya lebih mudah untuk melihat bagaimana mereka terhubung ke satu sistem lengkap.

Pemicu adalah yang dimulai

Setiap interaksi dimulai dengan tindakan awal yang disebut pemicu. Ini adalah langkah pertama yang diambil pengguna, seperti klik mouse, melayang di atas, atau memuat halaman, yang memulai tindakan. Misalnya, menggerakkan mouse Anda di atas kartu penetapan harga mengatur rantai yang bergerak.

Dengan sendirinya, pemicu tidak melakukan apa -apa. Itu membutuhkan respons.

Efek adalah apa yang terjadi

Setelah pemicu menembak, efeknya mengikuti. Di sinilah Anda memutuskan reaksi, seperti kemiringan, pudar, skala, kabur, atau campuran gerakan apa pun. Bayangkan sedikit kartu penetapan harga yang sama dan menambahkan bayangan yang lebih dalam saat kursor Anda melayang di atasnya - itulah efeknya.

Akhirnya, Anda perlu memutuskan di mana harus menerapkan efeknya.

Target adalah apa yang berubah

Target hanyalah elemen yang berubah ketika pemicu menembak. Melayang adalah interaksi yang umum digunakan, tetapi hanya mempengaruhi elemen itu sendiri. Dengan kata lain, elemen yang memulai interaksi (pemicu) juga merupakan elemen yang berubah (target).

Misalnya, melayang di atas kolom dapat membuat skala kolom yang sama, karena itu juga target.

Ini membuat semuanya terbatas pada satu elemen. Anda masih dapat mengatur hal -hal seperti itu di Divi 5, tetapi Anda tidak lagi terbatas padanya.

Sekarang pemicu dan target bisa berbeda, yang memberi Anda lebih banyak kontrol. Misalnya, ketika kursor memasuki bagian, tombol berskala meskipun tidak disentuh. Dalam hal ini, tombol adalah target.

Bagaimana mereka bekerja bersama

Sekarang kita telah melihat setiap bagian sendiri, kekuatan nyata datang ketika Anda menghubungkannya ke rantai:

• Pemicu Kebakaran: Pengunjung melakukan sesuatu seperti mengklik, memindahkan mouse, masuk, meninggalkan, atau memuat halaman.
• Efek mendefinisikan : Anda memutuskan jenis respons visual atau gerak apa yang akan ditampilkan.
• Target berlaku: Perubahan itu mendarat pada elemen yang Anda pilih.

Anggap saja seperti kabel sirkuit. Sakelar membalik, arus arus, bohlam menyala.

Di Divi 5, Anda dapat memasang sirkuit itu dengan cara yang Anda suka. Arwah pada kolom dapat memiringkan tombolnya. Beban halaman dapat memudar dalam gambar pahlawan. Satu klik dapat menghidupkan beberapa modul secara bersamaan, membuat bagian terasa terkoordinasi.

Inilah saat interaksi berhenti merasa seperti hover yang lebih baik dan mulai bekerja seperti bahasa desain. Anda tidak lagi terjebak dengan satu elemen yang bereaksi terhadap dirinya sendiri. Anda dapat rantai, terhuyung -huyung, dan menyebarkan respons untuk menghubungkan seluruh tata letak.

Pelajari segalanya tentang interaksi Divi 5

Formula dalam Divi 5

Keindahan interaksi Divi 5 adalah bahwa mereka bukan add-ons acak. Mereka mengikuti rumus yang jelas: Pemicu → Efek → Target. Membangun bahkan interaksi yang kompleks menjadi sederhana dan konsisten setelah Anda melihatnya sebagai pola yang berulang.

Mari kita praktikkan formula ini untuk menunjukkan kepada Anda bagaimana mereka bekerja bersama. Untuk contoh ini, mari kita buat formulir kontak yang muncul di layar ketika pengguna mengklik tombol.

Untuk membuat efek ini, Anda akan mengatur interaksi pada tombol yang ingin Anda gunakan sebagai pemicu. Pilih pengaturan ini:

• Acara Pemicu: Klik (Kami telah memutuskan bahwa acara tersebut akan memicu ketika pengguna mengklik tombol)
• Tindakan Efek: Tampilkan Elemen (Formulir Kontak Tersembunyi)
• Modul Target: Bagian (Kontak) adalah label yang ditetapkan ke bagian Kontak.

Selanjutnya, atur tautan jangkar untuk membuka bagian kontak. Pertama, buka pengaturan bagian Formulir Kontak dan buka tab Advanced . Di bawah ID & Kelas CSS , atur ID CSS : Kontak.

Kemudian, buka pengaturan tombol dan masukkan #Contact di bidang URL tautan tombol .

Akhirnya, atur keadaan awal formulir ke tersembunyi sehingga hanya muncul ketika dipicu. Buka pengaturan bagian Formulir Kontak, buka tab Advanced , dan di bawah visibi , pilih breakpoint yang ingin Anda sembunyikan.

Sekarang uji. Klik tombol, dan bagian kontak tersembunyi muncul.

Aliran sederhana itu (klik → Show → Formulir Kontak) adalah pola yang sama yang akan Anda gunakan untuk pop-up, beralih, mengungkapkan dengan lembut pada beban, atau animasi dirantai di seluruh bagian. Setelah Anda berpikir dalam hal pemicu, efek, dan target, kemungkinan terbuka dengan cepat.

Coba interaksi di Divi 5 hari ini

Anda punya polanya. Sekarang letakkan untuk bekerja di halaman sungguhan. Buka tata letak uji dan bangun satu efek interaksi kecil yang dapat Anda selesaikan dalam sepuluh menit. Pilih sesuatu yang sebenarnya akan Anda gunakan di situs klien.

Berikut adalah beberapa petunjuk mini untuk bergulir:

• Mouse memasuki bagian, membuat skala tombolnya secara halus
• Mengklik tombol "Kontak" mengungkapkan formulir yang terselip
• Cuti mouse di kartu reset miring
• Halaman memuat memudar dalam gambar pahlawan, lalu headline sesaat kemudian

Beri tahu kami di komentar jika Anda sudah menggunakan fitur interaksi Divi 5, dan apa pendapat Anda tentang itu!