Cara Mengubah Beberapa Elemen untuk Efek Melayang Abstrak di Divi
Diterbitkan: 2019-05-18Seperti yang sudah Anda ketahui sekarang, Divi memiliki banyak sekali pengaturan desain yang memungkinkan Anda membuat efek hover unik untuk setiap elemen Divi (bagian, baris, atau modul). Biasanya, efek hover diisolasi hanya pada satu elemen. Misalnya, jika Anda menambahkan properti transform rotate ke modul saat mengarahkan kursor, rotasi itu akan aktif saat mengarahkan kursor ke modul. Namun, jika Anda menambahkan efek hover tambahan ke baris yang berisi modul, ini akan menambahkan lapisan efek hover lainnya saat mengarahkan kursor ke modul. Ini membuka pintu untuk beberapa efek hover abstrak yang unik.
Dalam tutorial ini, kita akan mengeksplorasi cara mengubah beberapa elemen untuk efek melayang abstrak menggunakan pengaturan bawaan Divi. Dan karena kita akan menggunakan baris sedikit berbeda untuk desain ini, saya akan menunjukkan cara membuat tata letak kotak untuk baris Anda sehingga Anda dapat menampilkan efek hover ini di galeri (jika Anda mau).
Mari kita mulai.
Sneak Peek
Unduh Transform Multiple Elements pada Hover Layout secara 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.
Langsung saja ke tutorialnya ya?
Mulai
Berlangganan Saluran Youtube Kami
Untuk tutorial ini, Anda memerlukan yang berikut:
- Tema Divi diinstal dan aktif
- Beberapa gambar. Saya menggunakan gambar dari tata letak premade kami yang dapat diakses dari dalam Divi Builder
Setelah Anda siap, buka Dashboard WordPress Anda. Kemudian buat halaman baru (Halaman > Tambah Baru), beri judul halaman Anda, dan terapkan Divi Builder. Pilih opsi "Bangun dari Awal".
Sekarang kanvas kosong Anda menunggu!
Efek Hover Abstrak untuk Gambar
Desain pertama ini akan menggabungkan efek skew transform hover pada baris dan modul gambar untuk menciptakan efek mengipasi pada gambar kita saat melayang. Selain terlihat keren, efek ini juga dapat berfungsi sebagai interaksi UI bermanfaat yang memungkinkan pengguna mengetahui bahwa dengan mengklik gambar, Anda akan melihat lebih banyak gambar. Jadi Anda bisa menggunakan gambar sebagai link ke halaman galeri Anda jika Anda mau.
Berikut cara melakukannya.
Pertama buat bagian reguler baru dengan baris satu kolom.
Kemudian tambahkan modul gambar ke baris.
Selanjutnya, tambahkan unggah gambar ke modul.
Tambahkan Efek Arahkan Modul Gambar
Sekarang kita dapat menambahkan beberapa efek hover transform ke gambar yang akan menskala, memutar dan mencondongkan gambar. Untuk melakukan ini, buka opsi transformasi dan perbarui yang berikut ini:
Transformasi Skala sumbu X dan Y: 110%
Transformasi Putar sumbu Z: 9deg
Transformasi sumbu X dan Y Skew: 3deg
Itu dia! Cukup mudah. Sekarang kita perlu menyesuaikan baris untuk menambahkan efek hover lain yang akan aktif saat mengarahkan kursor ke elemen.
Pengaturan Baris
Agar desain ini berfungsi, baris harus berukuran sama dengan gambar di dalamnya sehingga area hover akan sama untuk keduanya. Ini akan memungkinkan kita untuk menambahkan efek hover yang berbeda untuk modul dan baris yang akan aktif saat mengarahkan kursor ke modul (atau dalam hal ini gambar). Ini berfungsi karena mengarahkan kursor ke modul di dalam baris akan mengaktifkan efek kursor dengan cara yang sama seperti jika Anda mengarahkan kursor ke baris. Dan, karena kita memiliki efek hover yang berbeda pada modul, kedua efek hover akan aktif saat mengarahkan kursor ke modul. Hal ini memungkinkan kita untuk menggunakan kombinasi efek hover abstrak menggunakan bayangan kotak, transformasi kemiringan, dan transformasi rotasi ke baris dan modul.
Kita sudah memiliki efek hover modul untuk gambar kita, sekarang kita perlu menyesuaikan ukuran baris kita. Bergantung pada ukuran gambar, modul harus mencakup lebar penuh baris sehingga secara teknis tidak perlu menyesuaikan lebar baris. Tapi untuk contoh ini, saya akan mengecilkan baris untuk memberi ruang bagi efek hover kita.
Perbarui pengaturan baris sebagai berikut:
Lebar maksimum: 400px
Karena kita ingin tinggi baris kita cocok dengan gambar di dalamnya, kita perlu menghilangkan padding atas dan bawah default:
Padding Kustom: 0px atas, 0px bawah
Sekarang kita perlu menambahkan gambar latar belakang ke kolom baris. Gambar latar belakang ini akan terlihat setiap kali modul gambar mengubah efek hover miring dan berputar.
Kolom 1 Gambar Latar: [masukkan gambar]
Lanjutkan untuk memperbarui baris dengan bayangan kotak di hover sebagai berikut:
Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 0px (default), -30px (arahkan kursor)
Posisi Vertikal Bayangan Kotak: 0px (default), -15px (arahkan kursor)
Warna Bayangan: #002f66
Bayangan kotak ini menambahkan efek gambar lain yang muncul di belakang gambar latar baris yang akan muncul setelah kita menambahkan efek hover transformasi yang akan memutar dan mencondongkan gambar latar ke tampilan.
Terakhir, kita siap untuk menambahkan properti skew transform untuk menambahkan efek hover tambahan untuk baris.
Transformasi Sumbu Skew X dan Y: -3deg
Hasil Akhir
Berikut adalah hasil akhirnya.
Dan itu akan berskala dengan baik di seluler juga.
Efek Hover Abstrak untuk Ajakan Bertindak (contoh 1)
Pengaturan Baris
Buat bagian reguler baru dengan satu baris kolom.
Kemudian perbarui pengaturan baris sebagai berikut:
Kolom 1 Latar Belakang Gradien Warna Kiri: rgba(34,43,58,0.71)
Kolom 1 Warna Kanan Gradien Latar Belakang: #222b3a
Gambar Latar Belakang: [masukkan gambar]
Lebar Maks: 400px
Padding Kustom: 0px atas, 0px bawah
Kita akan berputar kembali ke pengaturan baris untuk menyelesaikan efek hover abstrak kita sedikit, tapi untuk sekarang, mari kita tambahkan panggilan ke Modul Aksi ke baris.
Pengaturan Modul Ajakan Bertindak
Buka pengaturan Modul Ajakan Bertindak dan perbarui konten sebagai berikut:
Judul: Perjalanan Dengan Poin
Teks Tombol: Klik Di Sini
Konten: Hanya untuk waktu terbatas
URL Tautan Tombol: # (hanya untuk mengaktifkan tombol untuk saat ini)
Gunakan Warna Latar Belakang: TIDAK
Kemudian perbarui pengaturan desain untuk teks dan spasi modul.
Judul Font: Tampilan Gilda
Ukuran Teks Tombol: 16px
Warna Teks Tombol: #ffb238
Warna Latar Tombol: rgba(0,0,0,0)
Lebar Batas Tombol: 0px
Padding Kustom: 20% atas, 20% bawah
Sekarang tambahkan perbatasan ke modul.
Lebar Perbatasan: 2px
Warna Batas: #222b3a
Itu menangani desain default kami. Sekarang saatnya untuk bagian yang menyenangkan. Ingat, karena baris dan modul kita pada dasarnya berukuran sama (tinggi dan lebar), area hover akan sama untuk keduanya. Dengan kata lain, efek hover yang kita tambahkan ke baris dan modul akan aktif saat mengarahkan kursor ke elemen. Hal ini memungkinkan kita untuk menggunakan kombinasi efek hover abstrak menggunakan bayangan kotak, transformasi kemiringan, dan transformasi rotasi ke baris dan modul.
Mari kita mulai dengan efek hover baris.
Efek Arahkan Arah Baris
Pertama, kita bisa menambahkan bayangan kotak di hover ke baris kita. Buka pengaturan baris dan perbarui yang berikut:
Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 0px (default), 90px (arahkan kursor)
Posisi Vertikal Bayangan Kotak: 0px (default), 80px (arahkan kursor)
Kekuatan Penyebaran Bayangan Kotak: 0px (default), -40px (arahkan kursor)
Warna Bayangan: #ffb238
Ingatlah bahwa bayangan kotak juga akan mewarisi opsi transformasi yang akan kita tambahkan selanjutnya.
Sekarang mari tambahkan properti rotate dan skew transform pada hover.
Transformasi Putar sumbu X (arahkan kursor): 10deg
Transformasi sumbu X Skew (arahkan kursor): -4deg
Transformasi sumbu Y Skew (arahkan kursor): -4deg
Itu menangani efek hover baris. Sekarang kita perlu menambahkan efek hover ke Modul Call to Action yang akan menyelesaikan desain.
Efek Arahkan Modul Ajakan Bertindak
Buka pengaturan modul ajakan bertindak dan berikan efek melayang bayangan kotak sebagai berikut:
Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 0px
Posisi Vertikal Bayangan Kotak: 0px (default), 30px (arahkan kursor)
Warna Bayangan: #ffffff
Terakhir, tambahkan properti scale, rotate dan skew transform pada hover sebagai berikut:
Transform Scale X dan Y Axis (hover): 115%
Transformasi Putar sumbu Z (arahkan kursor): 9deg
Transformasi sumbu X Skew (arahkan kursor): 3deg
Transformasi Sumbu Y Skew (arahkan kursor): 3deg
Meningkatkan ukuran modul menggunakan skala saat mengarahkan kursor akan membantu meminimalkan kemungkinan pengguna mengarahkan kursor ke elemen baris saja, bukan modul.
Hasil Akhir
Berikut adalah hasil akhir dari efek abstract hover. Perhatikan bagaimana efek hover baris dan efek hover modul diaktifkan pada hover untuk mencondongkan elemen untuk desain abstrak.
Inilah yang akan terlihat seperti efek hover di ponsel. Namun, karena sebagian besar browser seluler memerlukan ketukan untuk mengaktifkan efek melayang, Anda mungkin ingin menonaktifkan efek melayang di seluler untuk menghindari pengguna harus mengetuk dua kali jika Anda menggunakan modul sebagai tautan.
Efek Hover Abstrak untuk Ajakan Bertindak (contoh 2)
Untuk memulai desain dengan efek melayang abstrak berikutnya, mari gandakan bagian yang berisi contoh pertama kita. Sekarang yang perlu kita lakukan adalah membuat beberapa penyesuaian kecil pada desain dan efek hover untuk desain yang unik.
Perbarui Pengaturan Baris
Pertama, perbarui pengaturan baris sebagai berikut:
Transformasi Putar sumbu Z: -5deg
Transformasi Sumbu Skew X dan Y: -4deg
Perbarui Pengaturan Modul Ajakan Bertindak
Sekarang mari kita ubah pengaturan modul sebagai berikut:
Pertama, keluarkan perbatasan ...
Lebar batas: 0px
Kemudian perbarui bayangan kotak sebagai berikut:
Posisi Kotak Bayangan Horizontal: 0px
Posisi Vertikal Bayangan Kotak: 110px
(pastikan dan nonaktifkan efek hover yang diwarisi dari desain sebelumnya yang Anda duplikat)
Warna Bayangan: #ffb238
Sekarang kita dapat memperbarui efek hover properti transformasi kita. Di sini kita pada dasarnya mengurangi skala sedikit dan menambahkan nilai negatif ke properti transformasi rotate dan skew sebelumnya untuk memindahkan elemen ke arah yang berlawanan saat melayang.
Perbarui opsi transformasi berikut:
Transform Scale X dan Y Axis (hover): 110%
Transform Rotate Z axis (arahkan kursor): -9deg
Transformasi sumbu X Skew (arahkan kursor): -3deg
Transformasi sumbu Y Skew (arahkan kursor): -3deg
Membuat Tata Letak Kotak untuk Baris Anda
Karena desain ini memerlukan baris induk untuk membungkus modul dan memiliki tinggi dan lebar yang sama, Anda tidak benar-benar memiliki kemampuan untuk membuat tata letak kolom seperti biasanya, Namun, Anda dapat menggunakan properti flex untuk menyelaraskan baris Anda horizontal dalam tata letak grid.
Untuk melakukan ini, pertama-tama duplikat baris yang berisi modul Anda beberapa kali sehingga Anda memiliki tiga baris dalam satu bagian.
Kemudian tambahkan margin khusus ke setiap baris:
Margin Kustom: 50px atas, 50px bawah
Kemudian buka pengaturan bagian dan cukup tambahkan CSS khusus berikut ke Elemen Utama.
display: flex; flex-wrap: wrap;
Sekarang Anda memiliki tiga kolom baris yang akan merespons dengan ukuran browser Anda.
Pikiran Akhir
Mengubah beberapa elemen saat melayang memang memberikan tingkat kreativitas lain yang dapat Anda jelajahi. Contoh dalam tutorial ini dimaksudkan untuk menunjukkan kepada Anda apa yang mungkin, tetapi jangan ragu untuk mengubah desain untuk proyek Anda sendiri. Seperti yang Anda duga, Anda bisa menjadi sangat aneh jika Anda mau. Tetapi Anda juga bisa sedikit lebih konservatif untuk membuat elemen desain interaksi yang halus seperti contoh modul gambar dalam tutorial ini.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!