Cara Mendesain Area Widget Postingan Terbaru yang Dapat Digulir di Divi

Modul bilah sisi Divi adalah alat yang sangat berguna untuk mengintegrasikan area widget khusus ke dalam desain Anda. Ini memungkinkan Anda untuk menampilkan widget WordPress apa pun di dalam tata letak Divi. Dalam tutorial ini, saya akan menunjukkan cara membuat area widget posting terbaru yang dapat digulir di Divi. Saya akan merancang bagian "Dari Blog kami" dengan area widget posting terbaru di sisi kanan modul blog. Ini akan sempurna untuk menampilkan beberapa posting blog terbaru Anda di beranda atau halaman arahan.

Mari kita mulai!

Sneak Peek

Berikut adalah sedikit bocoran desain yang akan kita buat dalam tutorial ini.

Unduh Tata Letak Postingan Terbaru yang Dapat Digulir GRATIS

Untuk mendapatkan desain tata letak posting terbaru yang dapat digulir dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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

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.

UNDUH

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

Membuat Area Widget Postingan Terbaru

Karena kita akan menambahkan widget recent posts ke layout Divi, hal pertama yang perlu kita lakukan adalah membuat area widget baru (dengan widget recent posts) untuk digunakan dengan modul Sidebar Divi.

Untuk membuat area widget posting terbaru, navigasikan ke Appearance > Widgets. Kemudian buat area widget baru dengan memberi nama area widget (sebut saja "postingan terbaru" jika Anda mau) dan klik tombol Buat. Segarkan halaman untuk melihat area widget baru yang tersedia.

Buka sakelar Widget Kiriman Terbaru yang disertakan dengan WordPress di sebelah kiri halaman. Kemudian pilih area widget "postingan terbaru" dari daftar dan klik Tambahkan Widget untuk menambahkan widget ke area widget.

Kemudian buka area widget recent posts dan perbarui widget Recent Posts dengan Judul. Atur jumlah posting untuk ditampilkan ke jumlah yang besar sehingga kita akan memiliki cukup posting untuk digulir ketika desain kita selesai.

Sekarang setelah kita memiliki area widget, kita dapat memulai desain Divi kita.

Membuat Bagian “Dari Blog Kami” dengan Area Widget Postingan Terbaru yang Dapat Digulir

Merancang Bagian Judul

Buat bagian reguler baru dengan satu baris kolom.

Sebelum menambahkan modul, perbarui bagian dengan yang berikut:

Warna Latar Belakang: #333333
Padding Kustom: 0px bawah

Kemudian keluarkan padding bawah baris juga dengan memperbarui pengaturan baris:

Padding Kustom: 0px bawah

Kemudian tambahkan modul teks ke baris.

Kemudian perbarui pengaturan Teks berikut:

Untuk konten, tambahkan html heading h2 berikut:

<h2>From our Blog</h2>

Kemudian perbarui pengaturan teks berikut:

Judul 2 Font: Roboto
Judul 2 Gaya Font: TT
Judul 2 Warna Teks: #ffffff
Judul 2 Ukuran Teks: 40px
Spasi Judul 2 Huruf: 2px

Itu menangani heading untuk layout kita. Sekarang saatnya untuk membuat sisa tata letak menggunakan bagian khusus.

Membuat Bagian Khusus

Menggunakan bagian khusus yang terpisah untuk sisa tata letak akan memungkinkan kita memiliki bilah sisi khusus di sebelah kanan untuk area widget yang dapat digulir. Plus, itu akan memungkinkan kita untuk mengukur dan menata baris kita di sisi kiri bagian secara terpisah dari area bilah sisi.

Lanjutkan dan tambahkan bagian khusus dengan tata letak kolom bilah sisi kanan sebagai berikut:

Kemudian tambahkan satu baris kolom ke bagian tersebut.

Sebelum menambahkan modul, mari perbarui pengaturan bagian dan baris.

Menyesuaikan pengaturan Bagian

Buka pengaturan untuk bagian khusus dan perbarui yang berikut ini:

Warna Latar Belakang: #333333
Lebar Talang: 2
Padding Kustom: 0px atas
Kolom 2 Padding Kustom: 0px atas, 0px bawah

Sesuaikan Pengaturan Baris

Selanjutnya buka pengaturan baris dan perbarui yang berikut:

Tinggi: 640 piksel
Lebar Batas Atas: 8px
Warna Batas Atas: #444444
Lebar Batas Bawah: 8px
Warna Batas Bawah: #444444

Tinggi 640px khusus diberikan agar sesuai dengan tinggi area widget posting terbaru yang dapat digulir yang akan kami tambahkan ke bilah sisi bagian khusus kami. ini akan memastikan keduanya akan memiliki tinggi yang sama untuk desain yang lebih estetis.

Menambahkan Modul Blog

Di baris satu kolom di sebelah kiri, tambahkan modul blog.

Kemudian perbarui pengaturan modul blog sebagai berikut:

Nomor Postingan: 2

Tata Letak: Kotak
Judul Font: Roboto
Meta Font: Roboto
Berat Font Meta: Ringan
Gaya Font Meta: TT
Font Pagination: Roboto
Gaya Font Paginasi: TT
Warna Teks Paginasi: #ffffff
Ukuran Teks Pagination: 18px
Spasi Huruf Pagination: 2px

Menambahkan Area Widget Postingan Terbaru yang Dapat Digulir

Akhirnya, saatnya untuk menambahkan posting terbaru yang dapat digulir ke tata letak kita. Untuk melakukan ini, tambahkan modul bilah sisi ke area bilah sisi di bagian khusus di sebelah kanan.

Kemudian pilih area widget "postingan terbaru" yang Anda buat sebelumnya dengan memilihnya dari dropdown Area Widget di bawah tab konten.

Kemudian perbarui desain teks Judul dan Badan sebagai berikut:

Judul Font: Roboto
Judul Font Gaya: TT
Warna Teks Judul: #ffffff
Spasi Huruf Judul: 2px
Font Tubuh: Roboto
Gaya Huruf Tubuh: Garis Bawah

Selanjutnya, sembunyikan pemisah perbatasan sebagai berikut:

Tampilkan Pemisah Batas: TIDAK

Kemudian berikan modul bilah sisi ketinggian maksimum dan bantalan khusus sebagai berikut:

Tinggi Maks: 640px
Padding Kustom: 30px atas, 30px bawah, 5% kanan

Tinggi maksimal 640px cocok dengan tinggi khusus 640px yang diberikan ke baris yang berdekatan.

Sekarang setelah kita memberi modul sidebar ketinggian maksimal 640px, kita perlu mengatur overflow vertikal untuk menggulir untuk mendapatkan fungsionalitas yang dapat digulir. Untuk melakukannya, buka tab Lanjutan dan perbarui yang berikut ini:

Luapan Vertikal: Gulir

Hasil Akhir

Itu dia! Sekarang mari kita lihat hasil akhirnya.

Opsi Bonus: Menambahkan CSS Khusus ke Bilah Gulir Desain (tidak didukung oleh semua browser)

Menata bilah gulir di WordPress agak merepotkan jika Anda menginginkan dukungan lintas browser. Jadi dalam kebanyakan kasus, Anda akan ingin meninggalkannya ke gaya default browser dan menyebutnya sehari. Tetapi jika Anda ingin menyesuaikan bilah gulir agar sesuai dengan desain halaman Anda, Anda dapat menambahkan beberapa CSS khusus. Sayangnya, dukungan browser terbatas pada browser yang mendukung properti CSS awalan ::webkit (pada dasarnya hanya Safari dan Chrome). Berikut cara melakukannya.

Buka pengaturan bagian khusus dan tambahkan Kelas CSS berikut:

Kelas CSS: cust-scroll

Kemudian buka modal pengaturan halaman dan tambahkan CSS khusus berikut ke halaman.

/* width */
.cust-scroll ::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.cust-scroll ::-webkit-scrollbar-track {
  background: #444444; 
}
 
/* Handle */
.cust-scroll ::-webkit-scrollbar-thumb {
  background: #888888; 
}

/* Handle on hover */
.cust-scroll ::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

Ini mengubah lebar bilah gulir menjadi 8px dan menyesuaikan warna untuk trek dan pegangan. Jangan ragu untuk bereksperimen dengan lebih banyak desain dan warna Anda sendiri.

Dan jika Anda bertanya-tanya, fallback untuk browser lain akan menjadi gaya default browser untuk scroll bar.

Pikiran Akhir

Menambahkan gulir vertikal ke konten sangat berguna setiap kali Anda ingin memberi pengguna opsi untuk melihat lebih banyak konten di ruang terbatas. Area widget posting terbaru yang dapat digulir adalah contoh yang bagus tentang bagaimana gulir vertikal dapat bekerja dengan sangat baik. Tentu saja, Anda dapat mengganti modul bilah sisi yang digunakan dalam tutorial ini dengan modul teks dan menambahkan gulir vertikal ke konten apa pun yang Anda inginkan. Kustomisasi yang sama akan berlaku untuk modul apa pun.

Sehubungan dengan menata bilah gulir, saya yakin ada plugin atau solusi Javascript lain yang akan memberikan solusi lintas browser yang lebih banyak. Jika Anda tahu ada yang bagus, jangan ragu untuk membagikannya kepada kami.

Saya berharap untuk mendengar dari Anda di komentar di bawah.

Bersulang!