Apakah Anda ingin menampilkan halaman Blog DIVI Anda sebagai kisi multi-kolom?
Modul Blog Divi dapat menampilkan posting blog dalam tata letak lebar penuh atau kotak. Jika Anda memilih tata letak kisi, jumlah kolom maksimum yang dapat Anda miliki adalah tiga.
Dalam tutorial ini, hanya dengan beberapa cuplikan CSS, blog Anda akan berubah menjadi tata letak kotak multi-kolom yang indah. Selain itu, kolomnya akan mulus dan responsif di semua ukuran browser, jadi Anda tidak perlu khawatir memperbarui kueri media atau pengaturan responsif tersebut.
Anda juga dapat berkonsultasi dengan artikel kami untuk mengetahuinya Cara membuat halaman blog dengan modul DIVI Blog.
penelitian
Sebelum masuk ke tutorial ini, mari kita lihat dulu hasil yang ingin kita capai.
Unduh DIVI sekarang!!!
Mengonfigurasi modul Blog dengan tata letak layar penuh
Modul Blog DIVI dapat digunakan untuk menambahkan blog di mana saja di situs jaringan. Sangat memudahkan untuk membuat halaman blog di Divi. Yang harus Anda lakukan adalah menambahkan modul Blog ke halaman menggunakan Divi Builder.
Untuk tutorial ini, kita akan menggunakan tata letak blog yang sudah dibuat sebelumnya dari salah satu paket tata letak gratis dari DIVI yang sudah berisi modul Blog dengan gaya dasar.
Untuk memuat tata letak blog yang sudah dibuat sebelumnya:
- Buat halaman baru dari dasbor WordPress
- Berikan nama yang relevan dan klik 'Gunakan Divi Builder'
- Klik "Pilih tata letak"
- Ketik di bilah pencarian 'Perancang Busana' dan pilih tata letak 'Halaman Blog Perancang Busana'
- Pastikan untuk memilih Tata Letak Blog dan kemudian klik "Pilih Tata Letak"
Setelah tata letak dimuat, temukan modul Blog yang digunakan untuk menampilkan posting blog dan buka pengaturannya.
Tetapkan jumlah posting
Di pengaturan blog, perbarui isi untuk membatasi jumlah postingan menjadi 10. (Hal ini terutama untuk alasan estetika, karena grid kami pada akhirnya akan menyertakan dua baris dari lima postingan blog.)
- Jumlah posisi: 10
Pilih tata letak layar penuh
Karena kita akan meletakkan blog kita di kolom menggunakan CSS Grid, kita perlu memastikan bahwa tata letak modul Blog adalah 'Layar penuh' (bukan 'Kisi'). Ini akan memastikan bahwa posting blog ditumpuk secara vertikal dalam urutan halaman normal.
Untuk mengubah tata letak modul Blog, buka pengaturan modul dan di bawah tab Gaya buka menu tarik-turun Template dan pilih Layar Penuh .
Sekarang setiap posting blog akan menjangkau lebar penuh kolom (atau wadah induk).
Mari kita tambahkan perbatasan ke posting blog. Perbarui opsi perbatasan sebagai berikut:
- Lebar batas: 1px
- Warna batas: rgba (150,104,70,0.35)
Menambahkan kelas CSS khusus ke modul Blog
Untuk menargetkan modul Blog khusus ini secara efektif (bukan yang lain) dengan CSS kita, kita perlu memberi modul kita kelas CSS khusus. Di bawah tab lanjutan, tambahkan kelas CSS berikut:
- Kelas CSS: et-blog-css-grid
Membuat tata letak multi-kolom dengan CSS Grid
Sekarang modul Blog kita sudah diatur dengan tata letak layar penuh, kita siap untuk menambahkan CSS kustom kita.
Kami akan memasukkan modul Kode di bawah modul Blog untuk menambahkan CSS ke halaman.
Di kotak input kode, tambahkan tag gaya yang diperlukan untuk membungkus kode CSS apa pun yang ditambahkan ke halaman.
Di dalam tag gaya, rekatkan cuplikan kode CSS berikut:
.et-blog-css-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
Baris pertama CSS menyajikan isi (atau modul) dalam bentuk grid.
display: grid;Baris kedua CSS mendefinisikan model kolom grid.
grid-template-columns : repeat(auto-fill, minmax (200px, 1fr));Baris ketiga menentukan jarak antar item kisi.
gap : 20px ;Pada titik ini, grid responsif lima kolom siap digunakan. Sebenarnya, jika Anda tidak ingin menggunakan pagination atau border untuk posting blog Anda, Anda bisa berhenti di sini.
Inilah hasilnya sejauh ini.
Sesuaikan item kisi
Kemudian kita dapat menambahkan beberapa baris CSS yang menargetkan elemen grid sehingga mereka sejajar dengan bagian atas setiap baris dan memiliki beberapa padding.
.et-blog-css-grid .et_pb_post {
align-self: start;
padding: 15px;
}
Pagination grid dihapus
Saat ini, jika Anda memiliki pagination yang aktif di modul blog, itu akan diperlakukan sebagai elemen grid terakhir di grid CSS. Untuk benar-benar menghapus pagination dari grid, kita dapat memberikan posisi absolut dan menempatkannya langsung di bawah modul blog. Untuk melakukannya, tambahkan CSS berikut:
.et-blog-css-grid > div > div {
width: 100%;
position: absolute;
bottom: 0;
transform: translate(0%, 150%);
}
Mari kita lihat hasilnya sejauh ini!
Tip: sesuaikan ukuran semua gambar unggulan (atau thumbnail)
Pada titik ini, Anda mungkin melihat ketidakkonsistenan dalam ketinggian gambar yang ditampilkan di setiap posting blog. Jika Anda ingin semuanya memiliki tinggi yang sama, Anda juga dapat menggunakan CSS tambahan untuk melakukannya.
.et-blog-css-grid .entry-featured-image-url {
padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
object-fit: cover;
}
Dengan margin internal atas 56,25%, kita harus mendapatkan rasio aspek 16:9 untuk semua gambar kita.
Jangan ragu untuk menyesuaikan padding pada wadah gambar untuk mendapatkan rasio aspek yang Anda inginkan untuk gambar Anda.
Hasil akhir
Dan ini adalah preview terakhir dari modul Blog kami dengan kolom dan grid baru kami. Dan seperti yang bisa kita lihat, grid sepenuhnya responsif.
Unduh DIVI sekarang!!!
Kesimpulan
Hal ini dilakukan! Kami telah menunjukkan kepada Anda dalam tutorial ini bagaimana mengatur posting blog Anda dalam kolom.
Kami dapat menyusun ulang seluruh modul Blog Divi menjadi tata letak lima kolom yang lancar. Semoga ini menghemat waktu Anda dan memberi Anda lebih banyak pilihan untuk membuat halaman blog yang indah. Anda juga dapat berkonsultasi Cara membuat halaman Blog dengan modul Blog Divi
Lihat juga 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.
