Cara Memicu Efek Arahkan kursor untuk Modul, Kolom, dan Baris Secara Bersamaan
Diterbitkan: 2019-08-11Salah satu hal terbaik tentang membangun situs dengan Divi adalah bahwa setiap blok bangunan dikemas dengan opsi desain. Setiap modul, kolom, baris, dan bagian berisi pengaturan desain untuk status default dan hover. Ini membuka pintu untuk memicu beberapa efek hover saat menggabungkan elemen ini bersama-sama.
Dalam tutorial ini, saya akan menunjukkan cara memicu efek hover secara bersamaan untuk modul, kolom, dan baris. Triknya adalah memastikan semua elemen memiliki ukuran dan ruang hover yang sama. Tetapi begitu Anda memiliki elemen di tempatnya, Anda bisa menjadi sangat kreatif dengan efek dan desain hover Anda.
Mari kita mulai.
Sneak Peek
Berikut adalah contoh singkat tentang bagaimana memicu efek hover dari elemen Divi yang berbeda secara bersamaan.
Unduh Contoh Desain GRATIS
Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.
Unduh Gratis
Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.
Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!
Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.
Berlangganan Saluran Youtube Kami
Langsung saja ke tutorialnya ya?
Memahami Cara Memicu Status Arahkan pada Beberapa Elemen Divi Secara Bersamaan.
Setiap elemen di Divi (bagian, baris, atau modul) memiliki ruang hover sendiri yang pada dasarnya adalah ukuran elemen itu sendiri.
Masing-masing elemen ini memiliki opsi hover bawaan yang diaktifkan saat mengarahkan kursor ke elemen tersebut atau elemen turunan apa pun yang dikandungnya.
Jadi, misalnya, jika Anda telah menambahkan opsi arahkan kursor ke suatu bagian, opsi arahkan kursor tersebut akan menjadi aktif setiap kali Anda mengarahkan kursor ke bagian tersebut.
Kemudian jika Anda mengarahkan kursor ke ruang baris di dalam bagian, Anda akan mengaktifkan opsi arahkan dari baris dan bagian. Ini karena baris adalah elemen anak dari bagian tersebut.
Setiap kali Anda mengarahkan kursor ke kolom, Anda mengaktifkan status kursor pada kolom, baris, dan bagian.
Dan terakhir, setiap kali Anda mengarahkan kursor ke modul, Anda memicu status kursor untuk modul dan semua elemen induknya (kolom, baris, dan bagian).
Secara default, masing-masing elemen ini akan memiliki spasi (padding) yang menciptakan celah di ruang hover yang memungkinkan pengguna untuk mengarahkan setiap elemen secara selektif. Namun, jika Anda menghilangkan jarak antara setiap elemen, Anda akan dapat memicu status hover untuk semua elemen secara bersamaan.
Ini membuka pintu bagi banyak kombinasi efek hover yang dapat terjadi secara bersamaan saat Anda menggabungkan opsi hover untuk setiap elemen dan mengaktifkannya di ruang hover bersama.
Contoh Menggabungkan Efek Arahkan kursor
Berikut adalah contoh bagaimana ini bekerja dengan Divi.
Pada contoh di bawah ini, kita memiliki baris dengan gambar latar belakang. Saat melayang, kami memiliki bayangan kotak tertunda yang muncul sebagai semacam elemen desain perbatasan.
Di dalam baris, kami memiliki kolom yang telah diisi dengan bayangan kotak hitam. Saat mengarahkan kursor, bayangan kotak kolom dikurangi secara bertahap untuk menampilkan gambar latar belakang baris.
Di dalam kolom, kami memiliki modul uraian yang memiliki latar belakang biru. Saat melayang, latar belakang biru diubah menjadi warna biru semi-transparan sehingga Anda dapat melihat gambar latar belakang.
Karena ada jarak antara setiap elemen, kita dapat melihat efek hover spesifik dari setiap elemen saat kita mengarahkan kursor ke setiap ruang hover individu.
Namun, jika kita menghilangkan spasi dan memberikan lebar khusus pada baris, semua elemen akan berbagi ruang melayang yang sama. Atau dengan kata lain, modul mengambil seluruh ruang kolom dan baris. Jadi ketika kita mengarahkan kursor ke modul, efek hover untuk modul, kolom, dan baris diaktifkan secara bersamaan.
Penundaan Transisi Berfungsi Baik dengan Pengaturan Ini
Ingatlah bahwa, dalam contoh di atas, ada penundaan transisi pada efek hover baris dan kolom yang sangat menonjolkan fungsionalitas konsep ini dengan baik. Jika kami mencoba menambahkan kombinasi efek hover yang serupa ke modul saja, kami tidak akan dapat memanfaatkan penerapan penundaan dan durasi transisi yang berbeda untuk setiap efek hover satu per satu.
Membuat Ulang Contoh Desain di Divi
Untuk memberi Anda beberapa instruksi tentang bagaimana ini dimainkan di dunia nyata Divi, mari buat ulang contoh yang dijelaskan di atas.
Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda harus memiliki yang berikut:
- Tema Divi diinstal dan aktif
- Halaman baru dibuat untuk membangun dari awal di ujung depan (pembuat visual)
- Gambar yang akan digunakan untuk konten tiruan
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Menambahkan Bagian dan Baris
Hal pertama yang perlu Anda lakukan adalah membuat bagian reguler dengan baris satu kolom.
Perbarui Pengaturan Baris dan Kolom
Selanjutnya, buka pengaturan baris dan beri baris gambar latar belakang.
Kemudian kita perlu menghilangkan padding default sehingga tidak ada celah di ruang hover antara baris dan kolom.
- Padding: 0px atas, 0px bawah
Kemudian tambahkan bayangan kotak berikut ke baris di hover.
- Bayangan Kotak: lihat tangkapan layar
- Kekuatan Buram Bayangan Kotak: 0px
- Kekuatan Penyebaran bayangan kotak: 0px (desktop), 10px (arahkan kursor)
- Warna Bayangan: #063c68
Selanjutnya update opsi transisi dengan durasi dan delay sebagai berikut:
- Durasi Transisi: 500ms
- Penundaan Transisi: 700ms
Sekarang buka pengaturan kolom dan perbarui yang berikut:
- Bayangan Kotak: lihat tangkapan layar
- Kekuatan Buram Bayangan Kotak: 0px
- Kekuatan Penyebaran bayangan kotak: 200px (desktop), 0px (arahkan kursor)
- Warna Bayangan: #000000
- Durasi Transisi: 500ms
- Penundaan Transisi: 200ms
Tambahkan Modul Blurb
Sekarang tambahkan modul uraian ke baris.
Kemudian perbarui uraian sebagai berikut:
- Gambar: [masukkan gambar blurb]
- Warna Latar Belakang: #0c71c3
- Warna Latar Belakang (arahkan kursor): rgba(12.113.195,0.35)
- Perataan Teks: tengah
- Warna Teks: Cahaya
- Padding: 20px atas, 20px bawah, 20px kiri, 20px kanan
Hasil Akhir
Lihat hasil akhirnya.
Pikiran dan Tip Terakhir
Memahami cara memicu status melayang untuk beberapa elemen Divi secara bersamaan membuka beberapa kemungkinan desain yang menarik. Contoh dalam posting ini hanya menyoroti beberapa dari banyak kombinasi efek hover yang mungkin terjadi saat Anda menggabungkan status hover dari modul, kolom, dan baris. Plus, kami bahkan tidak menjelajahi kemungkinan yang datang dengan menggabungkan opsi hover bagian yang akan memberi Anda lebih banyak opsi hover. Saat Anda menjelajahi efek hover ini sendiri, berikut adalah beberapa tip dan ide untuk membantu.
- Gunakan Box Shadow daripada Borders – Borders sebenarnya menambahkan ruang tambahan ke elemen sehingga ini dapat menyebabkan celah melayang yang tidak diinginkan. Box Shadows menambahkan elemen desain yang tidak menambah ruang sebenarnya.
- Jelajahi Background Transition Hover Effects – Setiap elemen Divi memiliki opsi background hover yang dapat digabungkan untuk lapisan efek hover kreatif.
- Gunakan Opsi Transformasi Arahkan kursor – Opsi transformasi kursor dapat menambahkan elemen kreatif seperti penskalaan dan elemen rotasi saat mengarahkan kursor. Namun, mungkin sulit untuk memutar beberapa elemen saat melayang karena akan menyebabkan lompatan.
- Manfaatkan opsi transisi – Menambahkan durasi dan penundaan transisi yang berbeda pada status melayang setiap elemen dapat membuat animasi melayang yang unik.
Saya harap tutorial ini akan menginspirasi Anda untuk menjelajahi beberapa kombinasi efek hover yang menakjubkan di Divi.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!