Apakah Anda ingin tahu cara mengungkapkannya isi saat mengarahkan kursor ke pemisah bagian Divi ?
Pembagi bagian terus menjadi elemen desain Divi populer. Ada banyak gaya pembagi untuk dipilih dengan 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 kita untuk menempatkan pemisah di atas area atau area tertentu isi bagian.
Dengan menggunakan opsi hover untuk ketinggian pemisah, kita dapat menambahkan efek hover unik yang menampilkan a isi sebagian tersembunyi. Ini berfungsi baik untuk menarik perhatian ke ajakan bertindak atau tombol tertentu yang Anda ingin orang-orang klik. pengunjung klik.
penelitian
Unduh DIVI Sekarang!!!
Buat halaman baru dengan Divi Builder
Dari dasbor WordPress, buka Halaman> Tambah Baru untuk membuat halaman baru.
Berikan judul yang masuk akal bagi Anda dan klik Gunakan Divi Builder
kemudian klik Mulai Membangun (Bangun Dari Awal)
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Merancang Efek Arah Arah Pembagi Bagian di Divi
Membuat bagian dan garis
Buat bagian reguler dengan baris dua kolom.
Sebelum menambahkan modul, buka pengaturan bagian dan perbarui yang berikut:
Gradien Latar Belakang (Kiri): #73ba57
Gradien Latar Belakang (Kanan): #2a4c23
Lebar: 80%
Lebar Maks: 1px
Perataan Bagian: Tengah
Tambahkan judul bagian
Untuk menambahkan judul bagian, buat modul Teks dan masukkan teks berikut:
<h2>The Juice</h2>
Selanjutnya, perbarui desain sebagai berikut:
Font: Lato
Ukuran Teks: 80px
Spasi Huruf: -5px
Margin: -50px (Atas), -40px (Bawah)
Indeks Z: -1
Margin khusus dan indeks-z akan memungkinkan teks tetap 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 dengan latar belakang transparan. Kami menggunakan gambar dari paket tata letak Toko Juice 240 piksel kali 300 piksel.
Penyesuaian perataan gambar di tengah.
Tambahkan modul "Call To Action" di kolom 2
Di kolom 2, tambahkan modul Ajakan Bertindak.
Tambahkan URL tautan tombol untuk memastikan tombol ditampilkan.
Latar belakang CTA dan gaya teks judul
Selanjutnya, perbarui pengaturan desain berikut:
Latar belakang: #ffffff
Warna Teks: gelap
Judul Font : Lato
Judul Font Berat: Berat
Gaya Huruf: TT
Ukuran Teks Judul: 18px
Sesuaikan tombol CTA
Perbarui desain tombol sebagai berikut:
- Gunakan Gaya Kustom Untuk Tombol: YA
- Warna Teks Tombol: #ffffff
- Warna Latar Tombol: #73ba57
- Lebar Perbatasan: 0px
Sesuaikan batas Modul CTA
Kemudian tambahkan perbatasan untuk membingkai modul sebagai berikut:
Lebar Perbatasan: 10px
Warna Perbatasan: rgba (115,186,87,0.15)
Menambahkan efek hover ke splitter untuk menampilkan modul "Panggilan Bertindak"
Sekarang saatnya menambahkan efek hover ke pembagi bagian untuk membuka modul "Panggilan Bertindak". Untuk melakukan ini, pertama-tama kita perlu membuat pembagi bagian.
Baca juga: Divi: Cara menampilkan konten saat mengarahkan kursor ke tab
Menambahkan pemisah atas
Buka parameter bagian dan pemisah atas dengan parameter berikut.
Gaya Pembagi Atas: lihat tangkapan layar
Warna Pembagi Atas: #73ba57
Tinggi Pembagi: 70% (default), 0% (arahkan kursor)
Balik Pembagi Atas: horizontal
Perhatikan bahwa ketinggian pemisah dimulai dengan ketinggian default 70%, kemudian berubah menjadi ketinggian 0% saat mengarahkan kursor.
Menambahkan pembagi bawah
Kemudian tambahkan pemisah yang lebih rendah mirip dengan bagian dengan parameter berikut.
- Gaya Pembagi Bawah: lihat tangkapan layar
- Warna Pembagi Bawah: #73ba57
- Tinggi Pembagi: 70% (default), 0% (arahkan kursor)
- Pembagi Balik: horizontal
- Pengaturan: Di Atas Bagian Konten
Pembagi bawah ini juga dimulai dengan ketinggian 70% yang turun menjadi 0% saat melayang. Namun, karena opsi pengaturan pembagi diatur di atas konten, pembagi bagian menyembunyikan bagian bawah modul "Panggilan Bertindak" di kolom 1. Kemudian saat mengarahkan kursor, sisa modul akan terungkap.
Lihat hasilnya sejauh ini.
Unduh DIVI Sekarang!!!
Menambahkan efek hover bayangan kotak untuk transisi dan desain yang unik
Untuk transisi dan desain unik pada hover, kita dapat menambahkan efek hover bayangan kotak yang akan berlangsung bersamaan dengan efek hover splitter. Untuk melakukan ini, tambahkan bayangan kotak berikut ke bagian.
- Bayangan Kotak: lihat tangkapan layar
- Posisi Horizontal: 0px
- Posisi Vertikal: 0px
- Kekuatan Penyebaran Bayangan Kotak: 0px (default), 150px (arahkan kursor)
- Warna Bayangan: #73ba57
Memperlambat durasi transisi
Untuk langkah terakhir, mari kita memperlambat durasi transisi.
Durasi Transisi: 700ms
Hasil akhir
Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhirnya.
Unduh DIVI Sekarang!!!
Kesimpulan
Kami harap artikel ini memberi Anda beberapa inspirasi untuk membuat efek hover pembagi bagian yang unik untuk mengungkapkan konten.
Faktanya, menyesuaikan pembagi hover bisa menjadi elemen desain yang bagus. Selain itu, desain sampel akan membantu Anda memulai eksplorasi dan desain Anda sendiri.
Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
