Sejak pilihan ukuran baru dari Divi telah dirilis, ada beberapa tutorial yang menunjukkan cara membuat tampilan hover. Dalam tutorial ini, isi bertopeng ditempatkan secara vertikal. Namun, dalam beberapa kasus Anda mungkin ingin membuat tampilan horizontal. Dalam tutorial ini, kami akan menunjukkan cara menampilkan gambar menggunakan grid hover dan opsi luapan. Divi. Melakukan pekerjaan ini membutuhkan pendekatan yang sedikit berbeda. Kami akan menggunakan baris satu kolom dan menempatkan semua modul satu di bawah yang lain. Saat mengarahkan kursor, kita akan mengubah kolom menjadi kisi horizontal. Anda juga dapat mengunduh file JSON secara gratis!
Mari kita pergi.
penelitian
Sebelum kita menyelami tutorial, mari kita lihat sekilas bagaimana kita melihat berbagai ukuran layar.
Ayo mulai menciptakan!
Tambahkan bagian baru
Mulailah dengan menambahkan bagian reguler baru ke halaman yang sedang Anda kerjakan.
Tambahkan baris baru
Struktur kolom
Lanjutkan menambahkan baris baru menggunakan struktur kolom berikut:
Latar belakang gradien default
Tanpa menambahkan lebih banyak modul, buka parameter garis dan tambahkan latar belakang gradien berikut:
- Warna 1: #b1ffc4
- Warna 2: #ffffff
- Jenis gradien: Radial
- Arah Radial: Tengah
- Posisi Mulai: 28%
- Posisi Akhir: 28%
Terbang di atas latar belakang gradien
Ubah latar belakang gradien dengan melayang.
- Warna 1: #b1ffc4
- Warna 2: #ffffff
- Jenis gradien: Radial
- Arah radial: kiri
- Posisi Mulai: 5%
- Posisi Akhir: 5%
jarak
Masuk ke pengaturan jarak dan kemudian ubah padding dan nilai margin.
- Top Padding: 0px
- Lapisan bawah: 0px
- Margin atas: 50px
- Margin bawah: 50px
Batas default
Tambahkan radius batas piksel 50 di sudut kanan atas dan kanan bawah.
Arahkan Perbatasan
Bawa sudut ke "0px" melayang.
Bayangan default
Kemudian tambahkan bayangan kotak halus menggunakan parameter berikut:
- Box Shadow Blur Force: 50px
- Warna bayangan: rgba (0,0,0,0.09)
Arahkan Bayangan Kotak
Hapus bayangan dari kotak saat terbang di atas, ganti warna bayangan dengan warna yang benar-benar transparan.
- Warna bayangan: rgba (0,0,0,0)
Tambahkan modul teks ke kolom
Tambahkan konten H2
Saatnya untuk mulai menambahkan modul, dimulai dengan modul teks. Masukkan isi H2 pilihan Anda.
Pengaturan teks H2
Beralih ke tab Desain dan ubah pengaturan teks H2 sesuai:
- Judul 2 Font: Acme
- Judul 2 Gaya Huruf: Garis Bawah
- Judul 2 Warna garis bawah: #00ff3f
- Judul 2 Warna teks: #000000
- Judul 2 Ukuran Teks: 3vw
jarak
Kemudian tambahkan nilai isian khusus.
- Padding terbaik: 6vw
- Lapisan bawah: 7vw
- Padding Kiri: 2vw
Tambahkan modul gambar ke kolom
Upload Gambar
Modul kedua yang kita butuhkan di kolom ini adalah modul gambar. Unggah gambar lanskap pilihan Anda.
Kotak cahaya
Aktifkan opsi lightbox di pengaturan tautan lalu.
- Buka di penampil: ya
perekat
Dan paksakan lebar penuh pada gambar dalam pengaturan ukuran. Ini akan memastikan bahwa gambar tetap sensitif di semua ukuran layar.
- Force Fullwidth: Ya
Modul Gambar Kloning dua kali
Setelah Anda menyelesaikan modul gambar pertama, Anda dapat menyalinnya dua kali.
Ubah Gambar
Ubah gambar di dua duplikat. Pastikan gambar yang Anda upload memiliki ukuran yang sama dengan gambar pertama.
Tambahkan efek rollover ke baris
perekat
Sekarang setelah kita menyelesaikan pengaturan baris dan pod dasar, sekarang saatnya membuat efek hover! Kami akan mulai dengan mengubah tinggi dan lebar garis dan menyembunyikan luapan. Buka pengaturan ukuran baris dan lakukan perubahan berikut:
- Gunakan lebar selokan khusus: Ya
- Lebar selokan: 1
- Lebar: 20%
- Lebar maksimum: 100%
- Tinggi: 15.9vw
Arahkan
Kurangi lebar menjadi "100%" sambil mengarahkan kursor. Ini akan memungkinkan gambar untuk ditampilkan setelah garis digerakkan.
- Lebar: 100%
jarak penglihatan
Beralih ke tab lanjutan berikutnya dan sembunyikan luapan. Ini akan memastikan bahwa gambar disamarkan sebelum pengunjung arahkan kursor (desktop) atau klik (tablet/ponsel) pada modul teks.
- Overflow horisontal: disembunyikan
- Overflow vertikal: disembunyikan
Transisi
Kami juga mengubah durasi transisi dalam parameter transisi.
- Durasi transisi: 0ms
Elemen rollover kolom utama
Untuk membuat hover grid, kita akan membuka pengaturan kolom, pergi ke tab Advanced options, dan menempatkan baris kode CSS berikut di elemen hover utama:
tampilan: kotak; grid-template-kolom: 20% 25% 25% 25%; celah jaringan: 10px;
Kloning garis dua kali
Setelah Anda menyelesaikan baris pertama, Anda dapat mengkloningnya sebanyak yang Anda mau. Untuk contoh desain khusus ini, kami menggandakan baris tersebut dua kali.
Ubah latar belakang gradien garis 1
Ubah warna gradien pertama di latar belakang gradien dari baris kedua.
- Warna 1: # ffdc96
Ubah latar belakang gradien garis 2
Lakukan hal yang sama untuk baris ketiga.
- Warna 1: # b7c7ff
Ubah salinan modul teks dan warna garis bawah dua duplikat
Lanjutkan dengan mengubah warna garis bawah duplikat modul teks dengan salinan dan Anda selesai!
- Warna yang digarisbawahi # 1: # ffaa00
- Warna yang digarisbawahi # 2: # 0037ff
final pikiran
Dalam tutorial ini, kami menunjukkan kepada Anda cara menampilkan gambar dalam grid hover horizontal menggunakan opsi overflow. Divi. Gambar terungkap saat diarahkan ke desktop dan diklik di tablet/ponsel. Meskipun kami telah mengungkapkan gambarnya, Anda dapat mengungkapkannya isi pilihan Anda dengan memodifikasi parameter di generator. Kami harap tutorial ini menginspirasi Anda untuk membuat desain hover grid alternatif Anda sendiri! Jika Anda memiliki pertanyaan atau saran, pastikan untuk meninggalkan komentar di bagian komentar di bawah!
