Cara Mengalihkan Kutipan Postingan Blog saat Arahkan ke Divi

Diterbitkan: 2021-08-02

Mengalihkan kutipan posting blog di hover bisa menjadi cara yang efektif untuk menjaga tata letak kotak yang ringkas untuk posting blog Anda tanpa mengabaikan kutipan itu sama sekali. Idenya adalah untuk menyembunyikan kutipan pada awalnya dan kemudian mengalihkan visibilitasnya saat mengarahkan kursor ke item pos di dalam kisi. Ini memungkinkan pengguna untuk melihat lebih banyak posting dalam viewport browser sambil memberi pengguna opsi untuk melihat kutipan posting yang mereka minati dengan mengarahkan kursor ke posting.

Dalam tutorial ini, kami akan menunjukkan cara mengaktifkan kutipan posting blog saat mengarahkan kursor ke Divi. Untuk melakukan ini, kami akan menambahkan beberapa cuplikan CSS khusus yang akan mengaktifkan kutipan dari item posting modul blog saat mengarahkan kursor (tidak diperlukan JQuery). Setelah kode terpasang, Anda dapat menata modul blog sesuka Anda menggunakan pengaturan bawaan Divi.

Mari kita mulai!

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

Unduh Tata Letaknya 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 File
Unduh Gratis

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 bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.

Klik tombol Impor.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.

Kemudian klik tombol impor.

kotak notifikasi divi

Setelah selesai, tata letak bagian akan tersedia di Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

memperluas tab sudut

Untuk memulai, Anda perlu melakukan hal berikut:

  1. Jika belum, instal dan aktifkan Tema Divi.
  2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
  3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Cara Mengalihkan Kutipan Postingan Blog saat Arahkan ke Divi

Membuat Tata Letak Modul Blog

Pertama, kita perlu membuat tata letak dasar untuk posting blog kita. Untuk contoh ini, kita akan menambahkan baris satu kolom dengan modul blog di dalamnya.

Buat Baris

Tambahkan baris satu kolom ke bagian.

Lebar Baris

Dalam modal pengaturan baris, perbarui pengaturan desain berikut untuk menyesuaikan lebar.

  • Lebar: 95%
  • Lebar Maks: 1200px

Tambahkan Modul Blog

Di dalam kolom baris, tambahkan modul blog baru.

Pengaturan Modul Blog

Selanjutnya, perbarui pengaturan konten modul blog dengan memilih untuk menampilkan tombol baca lebih lanjut.

Di bawah tab desain, pilih tata letak Grid untuk blog.

Di bawah tab lanjutan, tambahkan Kelas CSS berikut:

  • Kelas CSS: toggle-blog-excerpt

Kami akan menggunakan kelas ini sebagai pemilih untuk kode CSS khusus kami di langkah berikutnya.

Tambahkan CSS Kustom dengan Modul Kode

Pada titik ini, kami memiliki tata letak grid dasar untuk posting blog kami dengan kelas CSS khusus yang ditambahkan ke modul blog. Kami akan menggunakan pemilih Kelas CSS ini untuk menargetkan modul blog khusus ini dan menambahkan efek sakelar saat mengarahkan kursor ke bagian kutipan kiriman dari item kiriman.

Untuk menambahkan CSS, kita akan menggunakan modul kode. Tambahkan modul kode baru di bawah modul blog.

Rekatkan CSS khusus berikut yang diperlukan untuk efek sakelar kutipan kutipan. Pastikan untuk membungkus CSS dalam tag gaya yang diperlukan. 

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !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 hasilnya sejauh ini di halaman langsung.

Hasil

Kami akan membahas kode sedikit lebih detail di akhir artikel. Tapi untuk sekarang, mari kita lihat hasilnya sejauh ini.

Tambahkan Gaya Tambahan ke Modul Blog dengan Divi Builder

Sekarang CSS ada di tempat untuk memberi kita efek sakelar untuk kutipan posting blog kita, kita dapat menambahkan gaya tambahan apa pun ke modul blog menggunakan Divi Builder.

Untuk contoh ini, kita akan membuat sedikit penyesuaian pada gaya, tetapi jangan ragu untuk menjelajahi gaya Anda sendiri juga.

Judul Postingan Gaya

  • Judul Font Berat: Tebal
  • Warna Teks Judul: #6d6a7e
  • Ukuran Teks Judul: 20px
  • Tinggi Baris Judul: 1.3em

Gaya Baca Lebih Lanjut Teks

  • Baca Selengkapnya Berat Font: Tebal
  • Baca Lebih Lanjut Gaya Font: TT
  • Baca Lebih Lanjut Warna Teks: #6d6a7e
  • Baca Lebih Lanjut Jarak Huruf: 1px
  • Baca Lebih Lanjut Tinggi Garis: 3.5em

Gaya Paginasi

  • Berat Font Pagination: Tebal
  • Gaya Font Paginasi: TT
  • Warna Teks Paginasi: #6d6a7e
  • Spasi Huruf Pagination: 1px

Hapus Perbatasan

  • Lebar Batas Tata Letak Kotak: 0px

Gaya Kotak Bayangan di Arahkan

  • Bayangan Kotak: Lihat Tangkapan Layar
  • Posisi Vertikal Bayangan Kotak: 0px
  • Kekuatan Kabur Bayangan Kotak: 38px
  • Warna Bayangan (desktop): transparan
  • Warna Bayangan (arahkan kursor): rgba(109.106.126.0.25)

Hasil Akhir

Tentang Kode CSS

Jika Anda tertarik dengan rincian CSS kustom yang ditambahkan ke modul kode tadi, ini dia.

Pertama, kita perlu membungkus semua CSS dalam kueri media yang hanya akan menerapkan CSS ke browser desktop. 

@media all and (min-width: 981px) {

}

Kedua, kita perlu menambahkan transisi dengan durasi 500 ms ke konten/kutipan postingan ke perubahan gaya yang akan terjadi saat mengarahkan kursor ke item postingan.

  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }

Ketiga, kita perlu memastikan konten/kutipan postingan tetap terlihat saat menggunakan visual builder agar kita bisa melakukan pengeditan.

  /* 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;
  }

Keempat, kita perlu menyembunyikan konten/kutipan postingan secara default saat halaman dimuat. Untuk melakukan ini, kami menggunakan visibility:hidden untuk menyembunyikan konten. Kemudian kita tambahkan opacity:0 sehingga kita bisa mendapatkan efek transisi fade in dan fade out saat kita menambahkan opacity:1 ke status hover. Kami juga menggunakan max-height:0px untuk mendapatkan efek geser geser saat kami menambahkan max-height:500px ke status hover.

  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }

Kelima, kami menampilkan konten/kutipan postingan saat item postingan (.et_pb_post) dalam keadaan melayang. Untuk melakukan ini, kami mengubah visibilitas menjadi terlihat, opacity menjadi 1, dan max-height menjadi 500px.

  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }

Untuk cuplikan terakhir, kami dapat memberikan semua item posting dengan ketinggian minimum yang sama untuk tata letak kotak yang sejajar secara vertikal.

  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }

Berikut ini satu lagi tampilan kode terakhir. 

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !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;  
  }
}

Pikiran Akhir

Seperti yang ditunjukkan dalam tutorial ini, menambahkan beberapa potongan CSS dapat memberi Anda fungsionalitas yang diperlukan untuk mengaktifkan kutipan posting blog dengan efek hover yang bagus. Bagian terbaik tentang metode ini adalah kita dapat membangun fungsionalitas ini dengan menambahkan gaya tambahan apa pun yang kita inginkan ke modul blog menggunakan opsi bawaan Divi. Ini akan memungkinkan Anda untuk menambahkan gaya yang lebih canggih ke item posting termasuk lebih banyak efek hover. Mudah-mudahan, ini akan membantu memberikan blog situs web Divi Anda dorongan tambahan dalam desain dan fungsionalitas.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!