Cara Menggunakan Efek Arahkan Ketinggian Pembagi Bagian untuk Mengungkapkan Konten di Divi
Diterbitkan: 2019-06-24Pembagi Bagian terus menjadi elemen desain Divi yang populer. Ada banyak gaya pembagi untuk dipilih dengan opsi bermanfaat 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 untuk menyesuaikan ketinggian dan pengaturan setiap pembagi. Ini memungkinkan kita untuk memposisikan pembagi di atas area atau konten tertentu di dalam bagian. Dengan menggunakan opsi hover untuk ketinggian pembagi, kita dapat menambahkan efek hover unik yang mengungkapkan sebagian konten yang tersembunyi. Ini berfungsi dengan baik untuk menarik perhatian ke ajakan bertindak atau tombol tertentu yang Anda ingin agar diklik pengunjung.
Mari kita mulai.
Sneak Peek
Unduh Efek Arahkan Ketinggian Pembagi Bagian 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?
Berlangganan Saluran Youtube Kami
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)
- Beberapa gambar tiruan untuk digunakan dalam desain. Saya akan menggunakan beberapa gambar dengan latar belakang transparan dari Paket Tata Letak Toko Juice.
Setelah itu, Anda siap untuk memulai!
Menerapkan Desain Efek Arah Ketinggian Pembagi Bagian di Divi
Membuat Bagian dan Baris
Pertama, mari buat bagian reguler dengan dua baris kolom.
Sebelum menambahkan modul, buka pengaturan bagian dan perbarui yang berikut:
Warna Kiri Gradien Latar Belakang: #73ba57
Warna Kanan Gradien Latar Belakang: #2a4c23
Lebar: 80%
Lebar Maks: 1080px
Perataan Bagian: Tengah
Menambahkan Judul Bagian
Untuk menambahkan judul bagian, buat modul teks dan perbarui konten isi dengan header h2 berikut:
<h2>The Juice</h2>
Kemudian perbarui desain sebagai berikut:
Judul 2 Font: Lato
Judul 2 Ukuran Teks: 80px
Spasi Judul 2 Huruf: -5px
Margin: -50px atas, -40px bawah
Z-Indeks: -1
Margin khusus dan indeks z akan memungkinkan teks berada di belakang gambar yang akan kita tambahkan di langkah berikutnya.
Menambahkan Gambar
Di bawah modul teks dengan judul di kolom 1, tambahkan modul gambar. Kemudian unggah gambar yang memiliki latar belakang transparan. Saya menggunakan gambar dari Paket Tata Letak Toko Jus yang berukuran 240px kali 300px.
Sesuaikan perataan gambar ke tengah.
Menambahkan Ajakan Bertindak di Kolom 2
Di Kolom 2, tambahkan modul ajakan bertindak.
Tambahkan URL Tautan Tombol untuk memastikan tombol ditampilkan.
Menata Latar Belakang CTA dan Teks Judul
Kemudian perbarui pengaturan desain berikut:
Warna Latar Belakang: #ffffff
Warna Teks: gelap
Judul Font: Lato
Judul Font Berat: Berat
Judul Font Gaya: TT
Judul Teks Ukuran: 18px
Menata Tombol CTA
Perbarui desain tombol sebagai berikut:
Warna Teks Tombol: #ffffff
Warna Latar Tombol: #73ba57
Lebar Batas Tombol: 0px
Menata Perbatasan CTA
Kemudian tambahkan perbatasan untuk membingkai modul sebagai berikut:
Lebar Perbatasan: 10px
Warna Perbatasan: rgba(115,186,87,0.15)
Menambahkan Efek Arahkan Ketinggian Pembagi untuk Mengungkapkan Ajakan Bertindak
Sekarang saatnya untuk menambahkan efek hover tinggi pembagi bagian untuk mengungkapkan ajakan bertindak. Untuk melakukan ini, pertama-tama kita harus membuat pembagi bagian.
Menambahkan Pembagi Atas
Buka pengaturan bagian dan pembagi atas dengan pengaturan berikut.
Gaya Pembagi Atas: lihat tangkapan layar
Warna Pembagi Atas: #73ba57
Tinggi Pembagi Atas: 70% (default), 0% (arahkan kursor)
Balik Pembagi Atas: horizontal
Perhatikan Tinggi Pembagi dimulai dengan ketinggian default 70% dan kemudian berubah menjadi ketinggian 0% saat mengarahkan kursor.
Menambahkan Pembagi Bawah
Selanjutnya tambahkan Pembagi bawah yang serupa ke bagian dengan pengaturan berikut.
Gaya Pembagi Atas: lihat tangkapan layar
Warna Pembagi Atas: #73ba57
Tinggi Pembagi Atas: 70% (default), 0% (arahkan kursor)
Balik Pembagi Atas: horizontal
Pengaturan Pembagi: Di Atas Konten Bagian
Pembagi bawah ini juga dimulai dengan ketinggian 70% yang berubah menjadi 0% saat melayang. Namun, karena opsi pengaturan pembagi diatur di atas konten, pembagi bagian menyembunyikan bagian bawah ajakan bertindak di kolom 1. Kemudian saat mengarahkan kursor, sisa ajakan bertindak akan terungkap.
Lihat hasilnya sejauh ini.
Menambahkan Efek Arahkan Bayangan Kotak untuk Transisi dan Desain Unik
Untuk transisi dan desain unik pada hover, kita dapat menambahkan efek hover bayangan kotak yang akan berlangsung bersamaan dengan efek hover ketinggian pembagi. Untuk melakukan ini, tambahkan bayangan kotak berikut ke bagian.
Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 0px
Posisi Vertikal Bayangan Kotak: 0px
Kekuatan Penyebaran Bayangan Kotak: 0px (default), 150px (arahkan kursor)
Warna Bayangan Kotak: #73ba57
Memperlambat Durasi Transisi
Untuk satu langkah terakhir, mari kita sedikit memperlambat durasi transisi.
Durasi Transisi: 700ms
Hasil Akhir
Berikut adalah hasil akhir di desktop.
Jika Anda tidak ingin konten disembunyikan di tablet dan layar ponsel, Anda dapat dengan mudah mengubah pengaturan Pembagi menjadi "konten bagian bawah" untuk perangkat tersebut.
Berikut adalah desain akhir pada tablet dan ponsel.
Bereksperimen dengan Gaya Pembagi Bagian Lain untuk Desain Unik Sepenuhnya dalam Detik
Dengan pengaturan ini, Anda dapat dengan mudah bereksperimen dengan gaya dan kombinasi pembagi yang berbeda!
Berikut adalah beberapa lagi yang saya sertakan dalam unduhan gratis.
Pikiran Akhir
Semoga postingan ini memberi Anda sedikit inspirasi tentang cara membuat beberapa efek hover tinggi pembagi bagian yang unik untuk mengungkapkan konten. Bahkan, menyesuaikan ketinggian pembagi saat melayang bisa menjadi elemen desain yang hebat dengan sendirinya. Dan, contoh desain akan membantu Anda memulai eksplorasi dan desain Anda sendiri.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!