Pembatas bagian terus menjadi elemen desain yang populer di Divi. Ada banyak gaya pemisah di luar sana termasuk beberapa opsi berguna yang memudahkan untuk menambahkan transisi dan latar belakang unik ke halaman Anda.
Dalam tutorial ini, kita akan menggunakan pembagi bagian sedikit berbeda. Divi memungkinkan Anda menyesuaikan ketinggian dan tata letak setiap pembagi. Hal ini memungkinkan kami menempatkan pemisah di atas area atau konten tertentu di bagian tersebut. Dengan menggunakan opsi hover untuk ketinggian pembagi, kita dapat menambahkan efek hover unik yang memperlihatkan a isi sebagian tersembunyi. Ini berfungsi baik untuk menarik perhatian ke ajakan bertindak atau tombol tertentu yang Anda ingin orang-orang klik. pengunjung klik.
Mari kita mulai.
Hasil sampel
Apa yang Anda butuhkan untuk memulai
Untuk memulai, Anda perlu yang berikut:
- Le Tema Divi terpasang dan aktif
- Halaman baru dibuat untuk membangun dari awal di ujung depan (konstruktor visual)
- Beberapa gambar tiruan untuk digunakan dalam desain. Saya akan menggunakan beberapa gambar dengan latar belakang transparan dari Paket Tata Letak Toko Jus .
Setelah itu, Anda siap memulai!
Menerapkan desain efek hover ketinggian pembatas bagian di Divi
Membuat bagian dan garis
Mari kita mulai dengan membuat bagian reguler dengan deretan dua kolom.
Sebelum menambahkan modul, buka pengaturan bagian dan perbarui yang berikut:
Gradien latar belakang kiri: #73ba57
Gradien latar kanan: #2a4c23
Lebar: 80%
Lebar maksimum: 1080px
Penyelarasan Bagian: Tengah
Tapi Anda juga bisa memilih skema warna yang Anda suka sesuai dengan gambar Anda. skema warna saya adalah: # fff200 - # e09900 dalam gradien.
Tambahkan judul bagian
Untuk menambahkan judul bagian, buat modul teks dan perbarui isi badan dengan header h2 berikut:
Jus
Kemudian perbarui gambar sebagai berikut:
Tajuk 2 Font: Lato
Tajuk 2 Ukuran Teks: 80px
Heading 2 Penspasian surat: -5px
Margin: -50px di bagian atas, -40px di bagian bawah
Z-Index: -1
Margin khusus dan indeks z akan memungkinkan teks berada di belakang gambar yang akan kita tambahkan pada langkah berikutnya.
Menambahkan gambar
Di bawah modul teks dengan judul di kolom 1, tambahkan modul gambar. Kemudian unggah gambar dengan latar transparan. Saya menggunakan gambar dari Juice Shop Layout Pack yaitu 240 piksel kali 300 piksel.
Sesuaikan perataan gambar ke tengah.
Menambahkan ajakan bertindak di kolom 2
Di kolom 2, tambahkan panggilan ke modul tindakan.
Tambahkan URL tautan tombol untuk memastikan tombol ditampilkan.
Latar belakang CTA dan gaya judul
Kemudian perbarui parameter desain berikut:
Warna latar: #ffffff
Warna teks:
judul font: Lato
Judul Kebijakan Berat: Berat
Judul Font Style: TT
judul Ukuran Teks: 18px
Menyesuaikan dgn mode tombol CTA
Perbarui desain tombol sebagai berikut:
Warna teks tombol: #ffffff
Warna Latar Tombol: # e09900
Lebar Batas Tombol: 0 px
Styling perbatasan CTA
Kemudian tambahkan perbatasan untuk membingkai modul sebagai berikut:
Lebar perbatasan: 10px
Warna batas: rgba (224,145,0,0.25)
Menambahkan efek hover ketinggian pembatas untuk menampilkan ajakan bertindak
Sekarang, saatnya menambahkan efek hover tinggi divisi bagian untuk menampilkan ajakan bertindak. Untuk melakukan ini, pertama-tama kita perlu membuat pemisah bagian kita.
Menambahkan pemisah atas
Buka parameter bagian dan pemisah atas dengan parameter berikut.
Gaya pembatas atas: lihat tangkapan layar Warna pembatas atas: # 73ba57 Tinggi pembatas atas: 70% (default), 0% (diarahkan)
Pembatas atas flip: horizontal
Perhatikan bahwa ketinggian pemisah dimulai dengan ketinggian default 70%, dan kemudian pindah ke ketinggian 0% saat rollover.
Penambahan pembagi bawah
Kemudian tambahkan pemisah yang lebih rendah mirip dengan bagian dengan parameter berikut.
Gaya pembatas atas: lihat tangkapan layar Warna pembatas atas: # 73ba57 Tinggi pembatas atas: 70% (default), 0% (diarahkan)
Pembatas atas flip: horizontal
Tata Letak Pembagi: Di bagian atas Isi
Pemisah latar belakang ini juga dimulai dengan ketinggian 70% yang berubah menjadi 0% saat mengarahkan kursor. Namun, karena opsi tata letak pemisah disetel di bagian atas konten, pemisah bagian menyembunyikan bagian bawah ajakan bertindak di kolom 1. Lalu, saat mengarahkan kursor, sisa l ajakan bertindak terungkap.
Lihat hasilnya sejauh ini.
Menambahkan efek kotak bayangan melayang untuk transisi dan desain yang unik
Untuk transisi dan desain hovering yang unik, kita dapat menambahkan efek box shadow hover yang akan berlangsung bersamaan dengan efek hover ketinggian pembatas. Untuk melakukan ini, tambahkan bayangan kotak berikut ke bagian tersebut.
Box Shadow: lihat tangkapan layar
Box Horizontal Shadow Position: 0px
Posisi Vertikal Box Shadow: 0px
Box Shadow Spread Force: 0px (default), 150px (hover)
Warna Kotak Bayangan: #73ba57
Memperlambat durasi transisi
Untuk langkah terakhir, mari kita memperlambat durasi transisi.
Durasi transisi: 700ms
Hasil akhir
Ini adalah hasil akhir di desktop.
Berdasarkan apa yang telah kami lakukan di atas, Anda akan dapat menyesuaikan tampilan di ponsel dan tablet.
final pikiran
Semoga tutorial ini memberi Anda inspirasi untuk membuat efek ketinggian pembatas bagian yang unik untuk menampilkan konten. Faktanya, menyesuaikan ketinggian pembatas yang melayang bisa menjadi elemen desain yang luar biasa. Dan contoh desain akan membantu Anda memulai eksplorasi dan desain Anda sendiri.
Harapan untuk mendengar dari Anda di komentar.
Untuk kesehatanmu!
