5 Tips Mengatur Konten Halaman Blog di Divi
Diterbitkan: 2019-12-21Konten halaman blog Anda dapat diatur dalam banyak cara. Karena ini adalah halaman blog, sebagian besar konten akan terdiri dari umpan posting blog terbaru. Mengetahui bagaimana mengatur konten ini bisa menjadi cara yang bagus untuk memecah kemonotonan dan membuka pintu untuk desain halaman blog yang lebih unik.
Dalam tutorial ini, kami akan berbagi dengan Anda 5 tips bermanfaat untuk mengatur konten halaman blog di Divi yang akan membantu Anda mempelajari hal-hal berikut:
- Cara Membuat Tata Letak Dua Kolom
- Cara Menggunakan Postingan Tempel
- Cara menggunakan offset pos
- Cara menggunakan beberapa modul blog untuk membuat tata letak khusus untuk posting blog
- Cara menampilkan posting terbaru berdasarkan kategori
Sneak Peek
Berikut adalah beberapa cara kami akan mengatur konten halaman blog di Divi.
Menggunakan Tata Letak Dua Kolom
Bagian Postingan Unggulan Di Atas Umpan Blog Utama
Slider Posting Lebar Penuh Di Atas Umpan Blog Utama
Menggunakan Beberapa Modul Blog untuk Tata Letak dan Desain Unik
Menampilkan Posting Terbaru berdasarkan Kategori
Apa yang Anda Butuhkan untuk Memulai
Jika belum, instal dan aktifkan Tema Divi.
Untuk tutorial ini, saya akan menggunakan Template Halaman Kategori Paket Pembuat Tema Kedua. Jika Anda ingin menggunakannya untuk mengikuti, unduh paket dan impor file divi-theme-builder-pack-2-category-page-template.json ke pembuat tema menggunakan opsi portabilitas. 
Secara default, template yang diimpor akan ditetapkan ke "Semua Halaman Kategori". Buka pengaturan template dan tetapkan ke Blog.
Sekarang Anda siap untuk memulai proses mengatur konten halaman blog di dalam template. Untuk memulai, klik ikon edit di area tubuh template.
Sekarang Anda dapat menggunakan editor tata letak untuk mengubah tata letak.
5 Tips Mengatur Template Halaman Blog di Divi
Dalam template ini, kami memiliki modul blog yang berada di baris satu kolom yang menampilkan posting (dalam tiga kolom di desktop) untuk halaman saat ini. Ini adalah pengaturan standar untuk template halaman blog dan arsip. Namun, kita tidak harus mempertahankan tata letak standar ini untuk menampilkan postingan. Berikut adalah beberapa tips bermanfaat untuk mengatur konten halaman blog di Divi.
#1 Buat Tata Letak Dua Kolom
Modul blog (jika diatur ke tata letak grid) akan menampilkan posting dalam struktur tiga kolom jika modul ditambahkan ke baris satu kolom (seperti di template kita).
Jika Anda ingin mengubah tata letak untuk menampilkan posting dalam tata letak dua kolom, inilah sesuatu yang dapat Anda lakukan.
Pertama, ubah tata letak kolom baris menjadi tata letak dua pertiga sepertiga. Ini akan menampilkan posting blog dalam dua kolom di kolom kiri baris.
Selanjutnya, buka pengaturan untuk kolom 1 (yang berisi modul blog) dan tambahkan CSS khusus berikut ke Elemen Utama:
width: 100% !important;
Ini akan menyebabkan kolom menjangkau lebar penuh baris.
Sekarang yang perlu kita lakukan adalah menyembunyikan kolom di sebelah kanan. Buka pengaturan untuk kolom 2 (yang kosong) dan nonaktifkan visibilitas kolom di semua perangkat.
Sekarang Anda dapat mengatur konten halaman blog dengan dua kolom di desktop, bukan tiga jika Anda mau.
#2 Gunakan Tulisan Tempel
Jika Anda sudah familiar dengan WordPress, Anda mungkin sudah tahu tentang yang satu ini. Setiap posting yang dibuat di Divi (atau WordPress) dapat dibuat lengket. Saat Anda membuat postingan menjadi lengket, postingan tersebut akan secara otomatis ditampilkan di bagian paling depan feed blog pada halaman blog, bahkan sebelum postingan yang paling baru dipublikasikan. Ini adalah cara yang bagus untuk menampilkan posting yang Anda tahu audiens Anda ingin (atau perlu) lihat.
Untuk membuat postingan menjadi lengket, cukup edit postingan di Divi dan centang opsi “Stick to the top of the blog” di sidebar kanan.
Setiap posting yang Anda buat stick akan diberi label sebagai "Sticky" saat melihat semua posting di backend.
Sekarang ketika Anda mengunjungi halaman blog, Anda dapat melihat posting tempel telah melompat ke depan umpan posting blog.
Catatan: Postingan tetap mungkin tidak berfungsi seperti yang diharapkan saat menggunakan offset postingan di Modul Blog. Misalnya, jika Anda mengatur modul blog untuk menampilkan 3 posting dengan offset posting 3, posting tempel Anda akan tetap ditampilkan sebelum (dan di samping) 3 posting.
Sebelum Anda melanjutkan ke tip berikutnya, saya sarankan Anda menyingkirkan posting yang lengket.
#3 Gunakan Posting Offset untuk Mengatur Konten Halaman Blog menjadi Bagian Terpisah
Setiap modul blog memiliki opsi untuk memasukkan Nomor Post Offest. Ini memberitahu modul blog untuk melewati sejumlah posting blog terbaru sebelum menampilkan umpan blog. Opsi ini berguna setiap kali Anda ingin sedikit mencampur tata letak halaman blog Anda dengan menggunakan beberapa modul blog untuk menampilkan posting Anda. Ini memberi Anda lebih banyak fleksibilitas dengan desain tata letak karena Anda dapat mendesain setiap modul blog secara berbeda.
Menampilkan Postingan Terbaru dengan Modul Blog Terpisah menggunakan Post Offset
Salah satu cara Anda dapat mengatur konten halaman blog pada tata letak template Anda adalah dengan menambahkan bagian posting blog unggulan di bagian atas halaman. Ini adalah cara Anda dapat menyorot tiga posting terbaru teratas dengan cara yang unik. Inilah sekarang untuk melakukannya.
Tambahkan bagian reguler baru ke tata letak.
Kemudian tambahkan baris satu kolom.
Salin modul blog yang disertakan dengan template dan tempel ke baris baru.
Perbarui pengaturan blog sebagai berikut:
- Jumlah Postingan: 3
- Tampilkan Tombol Baca Selengkapnya: TIDAK
- Tampilkan Kategori: TIDAK
- Tampilkan Jumlah Komentar: TIDAK
- Tampilkan Kutipan: TIDAK
- Tampilkan Pagination: TIDAK
Kami akan memiliki tiga posting terbaru yang ditampilkan di bagian atas halaman.
Sekarang kita perlu menambahkan nomor offset posting ke modul blog asli sehingga akan melewati tiga posting pertama yang sudah ditampilkan di atas.
Buka pengaturan blog untuk modul blog asli dan perbarui yang berikut:
- Nomor Post Offset: 3
Sekarang feed blog akan dimulai dengan posting #4.
Untuk menonjolkan bagian unggulan di bagian atas halaman, Anda dapat menambahkan gradien latar belakang.
Berikut adalah contoh tampilannya.
Menambahkan Slider Posting Lebar Penuh Di Atas Umpan Blog Utama
Sama seperti bagian unggulan di atas, kita juga dapat mengatur konten posting blog dengan menambahkan slider posting lebar penuh di bagian atas halaman blog. Ini adalah desain populer untuk halaman blog dan Anda dapat menggunakannya dalam kombinasi dengan modul blog yang memiliki offset posting.
Berikut cara melakukannya.
Pertama, tambahkan bagian lebar penuh ke tata letak.
Kemudian tambahkan modul penggeser posting lebar penuh ke bagian tersebut.
Kemudian perbarui pengaturan berikut:
- Posting untuk Halaman Saat Ini: YA
- Jumlah Postingan: 3
Kemudian perbarui desain slider posting agar sesuai dengan tata letak sebagai berikut:
- Judul Font: Lato
- Judul Font Berat: Tebal
- Ukuran Teks Judul: 40px
- Ukuran Teks Tubuh: 16px
- Ukuran Teks Tombol: 14px
- Warna Teks Tombol: #ff0071
- Warna Latar Tombol: #ffffff
- Lebar Batas Tombol: 0px
- Font Tombol: Lato
- Berat Huruf Tombol: Tebal
- Gaya Font Tombol: TT
Pastikan tampilan modul blog feed utama memiliki nomor offset posting yang masih disetel ke 3 untuk mengakomodasi 3 posting slider posting.
Kemudian lihat hasilnya.
Terlihat bagus sejauh ini.
Sekarang mari kita ambil ide untuk menggunakan modul blog terpisah selangkah lebih maju dengan tip berikut ini.
#4 Menambahkan Beberapa Modul Blog Masing-masing dengan Satu Posting
Kita tidak harus berhenti hanya menambahkan satu modul blog tambahan ke tata letak template. Bahkan, kita bisa menggunakan modul blog sebanyak yang kita butuhkan. Kita bahkan dapat memilih untuk menampilkan hanya satu posting per modul blog untuk memberikan desain unik pada satu kartu posting blog. Kemudian, dengan menggunakan offset posting, kita dapat membuat tata letak yang benar-benar unik dari posting blog yang ditampilkan secara dinamis.
Berikut cara melakukannya.
Pertama, tambahkan baris satu-setengah-setengah kolom baru di atas baris yang berisi modul blog utama.
Salin modul blog asli di bawah ini dan rekatkan ke kolom kiri baris baru. Kemudian perbarui yang berikut ini:
- Jumlah Postingan: 1
- Nomor Post Offset: 0
- Tampilkan Pagination: TIDAK
Selanjutnya, salin modul blog yang baru saja Anda buat dan tempel duplikatnya ke kolom kanan.
Kemudian perbarui yang berikut ini:
- Nomor Post Offset: 1
- Tampilkan Gambar Unggulan: TIDAK
- Tampilkan Jumlah Komentar: TIDAK
- Tampilkan Kutipan: TIDAK
Pastikan untuk mengatur nomor offset posting ke 1 untuk melewati yang pertama di kolom kiri.
Sekarang lanjutkan proses ini dengan membuat modul blog lain dan meningkatkan jumlah offset posting sebanyak 1 setiap kali.
Gandakan modul blog di kolom kanan.
Kemudian ubah nomor post offset menjadi 2.
Gandakan modul blog sekali lagi dan ubah nomor offset posting menjadi 3.
Sekarang Anda dapat memiliki kebebasan untuk menyesuaikan desain setiap modul blog satu per satu. Misalnya Anda bisa menambahkan warna latar belakang yang berbeda untuk masing-masing.
Inilah hasilnya.
Jika Anda akan menyimpan feed blog utama di bawah, pastikan untuk memperbarui nomor offset posting ke 4 untuk mengakomodasi 4 posting di baris di atas.
Anda juga dapat melihat teknik yang sama ini digunakan pada beberapa Templat Halaman Kategori Pembuat Tema kami. Lihat tutorial kami tentang cara membuat template halaman kategori menggunakan konsep yang sama.
#5 Tampilkan Posting Terbaru berdasarkan Kategori di Halaman Blog
Selain feed blog utama pada template halaman blog, Anda juga dapat menampilkan posting terbaru Anda berdasarkan kategori. Ini adalah cara yang bagus untuk mengatur konten halaman blog dengan memecah tata letak sedikit dan menyorot kategori yang berbeda secara bersamaan.
Berikut cara melakukannya.
Pertama, tambahkan baris satu kolom baru di bawah baris yang berisi modul blog utama.
Kemudian perbarui pengaturan blog sebagai berikut:
- Posting untuk Halaman Saat Ini: TIDAK
- Jenis Posting: Posting
- Jumlah Postingan: 3
- Termasuk Kategori: Bisnis (atau salah satu dari Anda sendiri)
Ini akan menampilkan tiga posting terbaru dari kategori Bisnis.
Kemudian tambahkan modul teks di atas modul blog dengan judul kategori yang sesuai.
Dan seperti itu Anda memiliki bagian kategori unggulan di halaman blog Anda – cara yang bagus untuk mengatur konten halaman blog!
Anda bahkan dapat menambahkan beberapa bagian kategori unggulan, masing-masing dengan desain yang unik.
Bagian kategori unggulan ini cocok di bagian bawah template halaman blog.
Pikiran Akhir
Kiat-kiat ini akan membantu Anda mengatur konten halaman blog dengan berbagai cara unik. Dan, tip yang sama ini akan bekerja untuk banyak jenis templat lain (seperti templat halaman kategori/arsip) yang menggunakan modul blog untuk menampilkan konten. Jangan ragu untuk menjelajahi kiat-kiat ini dan menggunakannya dalam proyek Anda berikutnya.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!