Cara Membuat Template Halaman Kategori untuk Blog Anda Menggunakan Divi Theme Builder
Diterbitkan: 2019-10-30Halaman kategori bisa sangat membantu pengguna dengan menyediakan seluruh halaman yang penuh dengan hal-hal yang mereka minati (atau cari). Tetapi sering kali halaman kategori dapat mengalami masalah dalam hal desain. Di Divi, sebelum hari-hari Divi Theme Builder, pengembang harus mengandalkan penyesuaian manual kode php pada file tema template halaman kategori dan kemudian menata template halaman murni dengan CSS eksternal. Tapi sekarang, dengan Divi Theme Builder, proses ini menjadi mudah dan menyenangkan!
Dalam tutorial ini, kami akan menunjukkan cara membuat template halaman kategori untuk blog Anda sepenuhnya dari awal menggunakan Divi Theme Builder. Kami akan menunjukkan cara cepat menyiapkan template baru yang ditetapkan untuk kategori posting serta cara mendesain template menggunakan modul yang sesuai dan konten dinamis menggunakan Divi Builder.
Mari kita mulai!
Sneak Peek
Berikut ini sekilas tentang template halaman kategori yang akan kita desain bersama dalam tutorial ini. Dalam gambar ini, digunakan untuk menampilkan semua posting dengan kategori "Bisnis".
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 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 template ke situs web Anda, Anda harus membuka Divi Theme Builder dan menggunakan opsi portabilitas untuk mengimpor file .json ke pembuat tema.
Langsung saja ke tutorialnya ya?
Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda perlu melakukan hal berikut:
- Jika belum, instal dan aktifkan Divi Theme yang terpasang (atau Plugin Divi Builder jika tidak menggunakan Divi Theme).
- Karena kami akan membuat template halaman kategori untuk posting blog, Anda harus memiliki posting yang sudah dibuat di situs web Anda dengan kategori yang ditetapkan untuknya.
Setelah itu, Anda siap untuk pergi.
Modul dan Konten Dinamis Tersedia untuk Template Halaman Kategori
Saat membuat template Halaman Kategori untuk blog Divi, penting untuk memahami alat apa yang Anda inginkan sehingga Anda dapat secara efektif membuat template yang secara dinamis menampilkan informasi yang benar. Untuk template halaman kategori untuk posting blog, kami paling tertarik untuk menampilkan posting berdasarkan kategori saat ini setiap kali pengguna mengunjungi halaman kategori. Misalnya, jika pengguna mengklik tautan kategori "Bisnis", mereka akan melihat halaman arsip yang menampilkan semua posting dengan kategori "Bisnis". Beberapa modul Divi memiliki opsi bawaan untuk menampilkan konten dinamis pada template dengan cukup mudah.
Modul Blog
Modul Blog adalah modul utama yang harus digunakan untuk menampilkan template Halaman Kategori. Ini karena memiliki opsi bawaan untuk menampilkan Postingan untuk Halaman Saat Ini.
Ini pada dasarnya memberitahu Divi untuk menampilkan posting yang biasanya dibuat setiap kali pengguna mengunjungi halaman. Jadi dengan opsi yang disetel untuk menampilkan “Postingan untuk Halaman Saat Ini”, pengguna akan dapat melihat halaman kategori dan menampilkan postingan berdasarkan kategori dengan benar.
Modul Post Slider dan Modul Judul Posting
Anda juga dapat menggunakan Modul Slider Posting untuk menampilkan Postingan untuk Halaman Saat Ini. Ini berguna untuk membuat slider posting dinamis yang menampilkan posting yang dihasilkan saat mengunjungi halaman kategori, seperti yang dapat dilakukan modul blog.
Modul Judul Posting juga dapat digunakan tetapi cukup terbatas pada kemampuan menampilkan Judul halaman secara dinamis. Sebagian besar elemen lain yang tersedia dalam modul judul posting tidak berlaku untuk halaman arsip, hanya templat posting tertentu.
Judul Postingan/Arsip (Konten Dinamis)
Cara yang lebih mudah untuk menampilkan Judul Halaman Postingan/Arsip adalah dengan menggunakan modul Divi biasa dan kemudian menarik Judul Halaman Postingan/Arsip menggunakan fitur konten dinamis yang tersedia di semua modul Divi.
Misalnya, Anda dapat menggunakan modul teks dan kemudian menambahkan judul halaman posting/arsip sebagai konten dinamis ke konten isi. Kemudian Anda dapat mengatur gaya judul sesuka Anda.
Sekarang setelah Anda memahami alat yang diperlukan untuk membuat template halaman kategori, mari kita masuk dan membuatnya bersama-sama.
Cara Membuat Template Halaman Kategori untuk Blog Anda
Untuk templat halaman kategori ini, tujuannya adalah membuat area badan khusus untuk templat yang ditetapkan ke semua halaman kategori untuk posting blog di Divi. Kami tidak akan membuat area header atau footer khusus untuk template ini. Tetapi Anda dapat dengan mudah menggunakan template ini di situs web Anda sendiri dengan header dan footer Anda sendiri.
Membuat dan Menetapkan Template Kustom untuk Kategori Posting
Untuk memulai, buka Dasbor WordPress Anda dan arahkan ke Divi > Theme Builder. Kemudian klik area kotak abu-abu kosong untuk menambahkan template baru.
Selanjutnya, tetapkan template ke Semua Halaman Kategori.
Menambahkan Area Tubuh Kustom Baru ke Template
Untuk membuat badan kustom untuk template, klik area Tambah Badan Khusus dan kemudian pilih "Bangun Badan Khusus".
Kemudian pilih opsi, "Bangun Dari Awal".
Tambahkan Judul Arsip Dinamis
Di Template Layout Editor, buat baris satu kolom baru di dalam bagian reguler.
Kemudian tambahkan modul teks ke baris.
Hapus konten isi default dan klik ikon "Gunakan Konten Dinamis" dan pilih opsi "Judul Posting / Arsip.
Setelah elemen Judul Postingan/Arsip berada di tempatnya, buka pengaturan dengan mengklik ikon roda gigi.
Kemudian perbarui area input Sebelum dan Setelah untuk membungkus konten dalam tag H1 dan menambahkan konten statis tambahan setelah judul dinamis sebagai berikut:
Sebelum:
<h1>
Setelah:
Articles</h1>
Kita perlu membungkus judul dalam tag H1 untuk tujuan SEO. Kata statis “Artikel” ditambahkan setelah judul sehingga jika pengguna mengunjungi halaman kategori “Bisnis”, judul akan terbaca “Artikel Bisnis”.
Judul Arsip Dinamis Gaya
Setelah konten dinamis berada di tempatnya, kita dapat menatanya menggunakan yang berikut:
- Font Judul: Ubuntu
- Font Judul: Berat: Tebal
- Warna Teks Judul: #192231
- Ukuran Teks Judul: 48px (desktop), 38px (tablet), 28px (ponsel)
- Tinggi Garis Pos: 1.2em
Menggunakan Modul Blog untuk Menampilkan Postingan untuk Kategori Saat Ini Secara Dinamis
Dengan judul halaman kategori dinamis di tempat, kita perlu menambahkan modul blog untuk menampilkan posting untuk halaman kategori saat ini.
Tambahkan Baris Baru
Tambahkan baris satu kolom baru di bawah baris teratas saat ini.
Tambahkan Modul Blog
Kemudian tambahkan modul blog ke baris.
Perbarui opsi Konten sebagai berikut:
- Posting untuk Halaman Saat Ini: YA
- Jumlah Posting: 9
- Tampilkan Tombol Baca Selengkapnya: YA
Ingat, kita harus memastikan Posts untuk Halaman Saat Ini diaktifkan untuk halaman kategori untuk menarik arsip posting yang tepat.
Modul Blog Desain
Dengan pengaturan konten di tempat, mari buat beberapa perubahan pada desain sebagai berikut:
- Tata Letak: Kotak
- Judul Font: Ubuntu
- Judul Font Berat: Tebal
- Warna Teks Judul: #192231
- Meta Font: Ubuntu
- Warna Teks Meta: #985e6d
- Ukuran Teks Meta: 13px
- Baca Selengkapnya Font: Ubuntu
- Baca Selengkapnya Berat Font: Tebal
- Baca Lebih Lanjut Gaya Font: Garis Bawah
- Baca Lebih Lanjut Warna Teks: #985e6d
- Font Pagination: Ubuntu
- Warna Teks Paginasi: #985e6d
- Ukuran Teks Pagination: 18px
- Tinggi Garis Pagination: 2em
- Lebar Batas Tata Letak Kotak: 0px
- Bayangan Kotak: lihat tangkapan layar
- Kekuatan Buram Bayangan Kotak: 70px
- Kekuatan Penyebaran Bayangan Kotak: -10px
- Warna Bayangan: rgba(25,34,49,0.3)
Pada titik ini kami memiliki halaman kategori dasar dan berjalan lengkap dengan judul halaman dan posting blog yang akan ditampilkan dengan benar sesuai dengan halaman kategori saat ini. Namun, kita bisa menjadi lebih kreatif dengan menambahkan modul tambahan untuk menampilkan postingan dengan cara yang kreatif.
Buat Slider Posting untuk menarik 4 posting terbaru dalam kategori saat ini.
Kita dapat menggunakan modul slider posting untuk menampilkan posting halaman kategori secara dinamis juga. Berikut adalah cara melakukannya.
Tambahkan Baris Baru
Pertama tambahkan baris baru dengan tata letak kolom 1/3 2/3 di bawah baris atas.
Tambahkan Modul Slider Posting
Di kolom kiri, tambahkan modul penggeser pos.
Kemudian perbarui opsi konten slider posting sebagai berikut:
- Posting untuk Halaman Saat Ini: YA
- Jumlah Postingan: 4
- Tampilkan Meta Postingan: TIDAK
Desain Modul Slider Posting
Sekarang setelah konten penggeser pos ada, perbarui pengaturan desain sebagai berikut:
- Perataan Teks: Kiri
- Judul Font: Ubuntu
- Tinggi Baris Judul: 1.3em
- Gunakan Gaya Kustom untuk Tombol: YA
- Ukuran Teks Tombol: 16px
- Warna Latar Tombol: #985e6d
- Lebar Batas Tombol: 0px
- Font Tombol: Ubuntu
- Bayangan Kotak: lihat tangkapan layar
- Kekuatan blur Bayangan Kotak: 70px
- Kekuatan Penyebaran Bayangan Kotak: -10px
- Warna Bayangan: rgba(25,34,49,0.3)
Buat Modul Blog dengan tata letak lebar penuh
Di kolom kanan, kita dapat menambahkan modul blog lain dengan tata letak lebar penuh alih-alih tata letak kotak. Ini akan memungkinkan kami untuk menyediakan area tampilan unik lainnya untuk posting kategori kami.
Tambahkan Modul Blog
Untuk menghemat waktu, mari kita salin modul blog yang ada di baris bawah dan tempel di kolom kanan di sebelah slider posting.
Perbarui Pengaturan Modul Blog Duplikat
Buka Pengaturan Modul Blog duplikat dan perbarui yang berikut ini:
- Posting untuk Halaman Saat Ini: YA
- Jumlah Postingan: 3
- Panjang Kutipan: 120
- Tampilkan Gambar Unggulan: TIDAK (setidaknya untuk saat ini)
- Tampilkan Pagination: TIDAK
- Tata letak: Lebar penuh:
- Bayangan Kotak: tidak ada
Hasil Sejauh Ini
Sejauh ini hasilnya minim tampilan dari ketiga postingan blog tersebut.
Tetapi jika kita ingin melangkah lebih jauh, kita dapat menambahkan beberapa gambar unggulan kecil di sebelah kiri setiap kutipan posting.
Gunakan CSS khusus untuk membuat gambar berfitur lebih kecil yang mengapung di sebelah kiri konten kutipan kiriman.
Untuk menambahkan beberapa gambar unggulan kecil di sebelah kiri kutipan posting blog, kita perlu menambahkan beberapa CSS khusus.
Berikan Kelas CSS Kustom Modul Blog
Sebagai permulaan, kita perlu menambahkan kelas CSS khusus ke modul Blog. Buka pengaturan blog dan, di bawah tab lanjutan, masukkan yang berikut ini:
- Kelas CSS: gambar blog kiri
Tambahkan Kode CSS dengan Modul Kode
Karena kita hanya menambahkan potongan CSS kecil ke template ini, kita dapat menggunakan modul kode. Tambahkan modul kode di bawah modul blog.
Masukkan Kode CSS
Kemudian masukkan CSS berikut di dalam area konten kode:
<style>
@media (min-width: 981px) {
.left-blog-image .et_pb_post .entry-featured-image-url {
float: left;
width: 100%;
max-width: 150px;
margin: 0 20px 30px 0;
}
.left-blog-image .et_pb_post {
margin-bottom: 20px !important;
}
}
</style>
Perbarui Pengaturan Modul Blog untuk menyertakan Gambar Unggulan
Sekarang, kita dapat menambahkan gambar unggulan kembali sehingga ditampilkan di posisi baru di sebelah kiri berkat potongan CSS.
Gaya Tambahan untuk Template
Sebelum kita menyelesaikan semuanya, mari kita membuat beberapa sentuhan kecil pada desainnya.
Tambahkan dan Gaya Pembagi Di Bawah Judul Arsip
Tambahkan modul pembagi langsung di bawah judul halaman arsip di bagian atas template.
Kemudian perbarui pengaturan pembagi sebagai berikut:
- Warna Garis: #985e6d
- Berat Pembagi: 3px
- Lebar Maks: 200px
Tambahkan Pembagi Bagian ke Tata Letak
Buka pengaturan bagian dan tambahkan pembagi bagian sebagai berikut:
- Gaya Pembagi Atas: lihat tangkapan layar
- Warna Pembagi Atas: rgba(73,78,107,0.07)
- Tinggi Pembagi: 90vw
- Pembagi Flip: horizontal dan vertikal
Gunakan Nomor Post Offset dengan setiap Modul untuk menghindari tampilan posting duplikat
Saat ini semua modul kami menarik konten posting yang sama untuk halaman kategori saat ini. Agar modul tersebut tidak menampilkan duplikat, kita dapat menggunakan opsi Post Offset Number untuk “melewati” sejumlah posting tertentu yang menampilkan feed posting.
Offset Posting Modul Blog Lebar Penuh
Karena penggeser posting kami sudah menampilkan posting pertama (terbaru) untuk halaman kategori saat ini, kami dapat mengimbangi posting ini di modul blog yang berdekatan dengannya. Buka pengaturan untuk modul blog di sebelah kanan slider posting dan perbarui nomor offset posting sebagai berikut:
- Nomor Post Offset: 1
Sekarang modul akan mulai dengan posting terbaru kedua untuk halaman kategori saat ini.
Offset Posting Modul Blog Grid
Setelah offset posting modul blog pertama terpasang, kita perlu mengimbangi posting di modul blog utama di bagian bawah template. Buka modul blog itu dan perbarui nomor offset posting sebagai berikut:
- Nomor Post Offset: 4
Kita perlu mengatur nomor offset ke 4 untuk memperhitungkan 4 posting yang sudah ditampilkan di atas. Modul sekarang akan melanjutkan di mana modul lain tinggalkan dan mulai dengan posting terbaru kelima.
Hasil Akhir
Untuk melihat hasil akhir, buka dasbor WordPress dan arahkan ke Posting > Kategori. Kemudian klik untuk melihat salah satu kategori yang ada.
Berikut adalah hasil akhirnya.
Dan ini dia di layar tablet dan ponsel.
Pikiran Akhir
Semoga postingan ini dapat sedikit membantu Anda bernafas lebih lega saat menghadapi tantangan membuat desain halaman kategori untuk situs web Anda. Divi Theme Builder membuatnya sangat mudah dilakukan, terutama dengan modul blog sekarang memiliki opsi untuk menampilkan posting dari halaman saat ini. Dan opsi offset posting memungkinkan Anda untuk menggabungkan beberapa modul blog (atau bahkan modul slider posting) tanpa pernah melihat posting duplikat di layar.
Bagaimana Divi Theme Builder membantu Anda membuat halaman kategori?
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!