Ingin tahu cara menampilkan cuplikan artikel di hover in Divi ?
Mempratinjau cuplikan posting blog saat mengarahkan kursor dapat menjadi cara yang efektif untuk menjaga tata letak kotak yang ringkas untuk posting blog Anda tanpa mengabaikan cuplikan tersebut sama sekali.
Jadi, ide awalnya adalah menyembunyikan cuplikan dan kemudian menampilkannya saat Anda mengarahkan kursor ke pos di kisi. Oleh karena itu, ini memungkinkan pembaca untuk melihat lebih banyak postingan sekaligus memberi mereka kemampuan untuk melihat cuplikan postingan yang menarik minat mereka.
Jadi dalam tutorial ini, kami akan menunjukkan kepada Anda cara membuat efek toggle cuplikan posting blog ini saat mengarahkan kursor Divi.
Mari kita mulai!
penelitian
Pertama, inilah ikhtisar tentang apa yang akan kita buat dalam tutorial ini.
Membuat Tata Letak Modul Blog
Pertama, kita perlu membuat tata letak dasar untuk posting blog kita. Untuk tutorial ini, kita akan menambahkan baris ke kolom dan memasukkan modul Blog ke dalamnya.
Buat garis
Untuk memulai, masukkan baris satu kolom ke bagian
lebar garis
Kemudian pergi ke pengaturan baris. lalu, di tab Gaya, di bawah Ukuran, ubah lebar sebagai berikut:
- Lebar maksimum: 90%
- Lebar maksimum: 1200px
Tambahkan modul blog
Kemudian, masukkan modul Blog pada kolom baris yang telah dibuat sebelumnya.
Pengaturan Modul Blog
Lalu, masuk ke pengaturan modul Blog, di tab Isi, di bawah Elemen, atur opsi “Tampilkan tombol Baca Selengkapnya” ke “Ya”
Sekarang buka tab Style, di bawah Template, pilih template "Grid" sebagai tata letak untuk blog.
Terakhir, buka tab Advanced dan tambahkan kelas CSS berikut:
Kelas CSS: toggle-blog-excerpt
Selanjutnya, kami akan menggunakan kelas ini sebagai pemilih untuk kode CSS khusus kami di langkah berikutnya.
Tambahkan CSS khusus dengan modul Kode.
Pada titik ini, posting blog kita ditata dalam kotak, dan kelas CSS khusus telah ditambahkan ke menu Blog. Jadi kita akan menggunakan pemilih kelas CSS ini untuk secara khusus menargetkan modul Blog ini dan menambahkan efek sakelar saat mengarahkan kursor ke artikel.
Untuk menambahkan CSS, kita akan menggunakan modul Code. Untuk melakukan ini, tambahkan modul Kode di bawah modul Blog.
Selanjutnya, rekatkan CSS khusus di bawah ini yang diperlukan untuk membuat efek sakelar cuplikan artikel saat mengarahkan kursor. Yang terpenting, pastikan untuk menempelkan kode CSS di antara tag gaya yang diperlukan.
@mediaalland (min-width:981px) {/* add transition for post content*/.toggle-blog-excerpt .et_pb_post .post-content {-webkit-transition:all500ms!important;transition:all500ms!important;}/* keep post content visible in visual builder */body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {visibility:visible;opacity:1;max-height:none;}/* hide post content */.toggle-blog-excerpt .et_pb_post .post-content {visibility:hidden;opacity:0;max-height:0px;}/* show post content when hovering over post item */.toggle-blog-excerpt .et_pb_post:hover .post-content {visibility:visible;opacity:1;max-height:500px;}/* set min-height for all post items */.toggle-blog-excerpt .et_pb_post {min-height:400px;}}
Mari kita lihat hasil yang diperoleh sejauh ini.
Hasil
Mari tambahkan beberapa gaya ekstra ke modul Blog dengan Divi builder
Sekarang CSS telah ada untuk memberi kita efek peralihan pada cuplikan postingan blog, kita kemudian dapat menambahkan gaya tambahan apa pun ke modul blog menggunakan konstruktor Divi.
Untuk contoh ini, kami akan membuat sedikit penyesuaian pada gaya, tetapi jangan ragu untuk menjelajahi gaya Anda sendiri juga.
Gaya judul artikel
- Judul cahaya redup: Teks tebal
- Warna teks judul: #6D6A7E
- Ukuran Teks Judul: 20px
- Tinggi baris judul: 1.3em
Gaya teks "Baca selengkapnya"
- Baca lebih lanjut Cahaya Redup: Teks Tebal
- Baca selengkapnya Gaya Salin: TT
- Warna teks Baca selengkapnya: #6D6A7E
- Spasi huruf Baca lebih lanjut: 1px
- Tinggi garis Baca lebih lanjut: 3.5em
Ubah tampilan pagination Teks
- Tampilkan pagination Cahaya redup: Teks tebal
- Warna teks Tampilkan pagination: #6D6A7E
- Penspasian Huruf Tampilkan Pagination: 1px
- Tampilkan pagination Salin gaya: TT
Hapus Perbatasan
- Lebar Batas Tata Letak Kotak: 0px
Arahkan Gaya Kotak Bayangan
- Kotak bayangan: Lihat tangkapan layar
- Posisi Awal: 0px
- Kekuatan Buram Bayangan Kotak: 38px
- Warna font subtitle: rgba (109,106,126,0.25)
Hasil akhir
Kesimpulan
Kesimpulannya, seperti yang ditunjukkan dalam tutorial ini, menambahkan beberapa cuplikan CSS dapat memberi Anda fungsionalitas yang Anda butuhkan untuk mengguncang cuplikan posting blog dengan efek hover yang bagus.
Hal terpenting dalam metode ini adalah kita dapat menambahkan gaya tambahan sesuai keinginan ke modul blog menggunakan opsi terintegrasi Divi. Selain itu, ini akan memungkinkan Anda untuk menyesuaikan elemen posting termasuk menambahkan lebih banyak efek hover.
Semoga ini akan membantu memberikan blog Anda situs jaringan Divi dorongan ekstra dalam hal desain dan fungsionalitas. Beritahu kami tentang pengalaman Anda di komentar.
