Cara Memberi Halaman Arsip Divi Anda Tata Letak Masonry
Diterbitkan: 2021-09-15Untuk memberi halaman arsip Anda tata letak batu kustom, kami dapat menggunakan pembuat tema Divi untuk mendesain templat halaman arsip dinamis kustom. Di Divi, sebelum hari-hari Divi Theme Builder, pengembang harus mengandalkan penyesuaian manual kode PHP pada file tema template halaman arsip dan kemudian menata template halaman secara murni dengan CSS eksternal. Ini membuat pembuatan tata letak pasangan bata jauh lebih sulit. Tapi sekarang, dengan Divi Theme Builder, proses ini menjadi mudah dan menyenangkan!
Dalam tutorial ini, kami akan menunjukkan cara membuat template halaman arsip yang secara dinamis menampilkan judul halaman arsip, subjudul, dan posting blog. Dan, dengan menggunakan modul posting blog, kita dapat dengan mudah menampilkan arsip posting kita dalam tata letak kotak batu.
Mari kita mulai!
Sneak Peek
Berikut ini sekilas tentang template halaman arsip yang akan kita rancang bersama dalam tutorial ini. Pada gambar ini, digunakan untuk menampilkan semua posting dengan kategori “WordPress”.
Unduh Template Halaman Arsip GRATIS
Untuk mendapatkan template 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 arsip, Anda harus memiliki beberapa posting blog yang sudah dibuat di situs web Anda dengan penulis, kategori, dan/atau tag yang ditetapkan untuk mereka jika Anda ingin melihat hasilnya.
Setelah itu, Anda siap untuk pergi.
Memahami Modul dan Konten Dinamis yang Tersedia untuk Templat Halaman Arsip
Saat membuat templat halaman arsip untuk situs Divi, penting untuk memahami alat apa yang Anda inginkan sehingga Anda dapat secara efektif membuat templat yang secara dinamis menampilkan informasi yang benar. Untuk templat halaman arsip, kami paling tertarik untuk menampilkan posting halaman saat ini setiap kali pengguna mengunjungi halaman arsip. 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 membuat tampilan konten dinamis pada template menjadi sederhana.
Modul Blog
Modul Blog adalah modul utama yang harus digunakan untuk menampilkan template Halaman Arsip. 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 arsip dan menampilkan postingan untuk halaman saat ini dengan benar.
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 templat halaman arsip, mari masuk dan membuatnya bersama.
Cara Membuat Template halaman Arsip Divi dengan Tata Letak Masonry
Untuk membuat templat halaman arsip dengan tata letak batu, Anda hanya perlu mendesain templat baru untuk semua halaman arsip menggunakan pembuat tema.
Membuat dan Menetapkan Template Kustom untuk Semua Halaman Arsip
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 Arsip.
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 Editor Tata Letak Template, perbarui pengaturan bagian default dengan warna latar belakang.
- Warna Latar Belakang: #eeeeee
Kemudian 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:
</h1>
Kita perlu membungkus judul dalam tag H1 untuk tujuan SEO.
Judul Arsip Dinamis Gaya
Setelah konten dinamis berada di tempatnya, kita dapat menatanya menggunakan yang berikut:
- Font Judul: Mulish
- Font Judul: Berat: Berat
- Perataan teks judul: Tengah
- Warna Teks Judul: #3a405a
- Ukuran Teks Judul: 70px (desktop), 40px (tablet dan ponsel)
Tambahkan Teks Sub Judul Arsip Dinamis
Karena kami dapat membungkus judul halaman arsip dinamis kami dengan HTML khusus, kami dapat menambahkan subtitle yang menarik judul halaman arsip dinamis di dalam teks subtitle.
Untuk melakukan ini, buat modul teks baru di bawah modul teks sebelumnya dengan judul.
Hapus teks isi default dan tambahkan konten dinamis judul posting/arsip ke isi (seperti yang kita lakukan sebelumnya).
Buka pengaturan judul posting/arsip dan tambahkan yang berikut sebelum dan sesudah konten.
Sebelum:
<h3>Here are the articles on
Setelah:
</h3>
Sekarang judul akan ditampilkan sesuai dengan baris teks sebelumnya.
Judul Arsip Dinamis Gaya
Setelah konten dinamis tersedia, kita dapat menata gaya dengan memperbarui pengaturan H3 berikut:
- Judul 3 Font: Mulish
- Judul 3 teks Perataan: Tengah
Menggunakan Modul Blog untuk Menampilkan Postingan untuk Halaman Saat Ini Secara Dinamis
Dengan judul halaman arsip dinamis di tempat, kita perlu menambahkan modul blog untuk menampilkan posting untuk halaman arsip saat ini.
Tambahkan Bagian Baru
Sebelum menambahkan modul blog, mari tambahkan bagian baru ke halaman.
Tambahkan Baris Satu Kolom Baru
Kemudian, tambahkan baris satu kolom baru ke bagian baru.
Kemudian buka pengaturan baris dan perbarui yang berikut:
- Gunakan Lebar Talang Kustom: YA
- Lebar Talang: 2;
- Lebar: 95%
Tambahkan Modul Blog untuk Menampilkan Postingan untuk Halaman Saat Ini Secara Dinamis
Sekarang kita perlu menambahkan modul blog ke baris.
Ingat, kita harus memastikan Posts untuk Halaman Saat Ini diaktifkan untuk halaman archvie untuk menarik arsip posting yang tepat. Perbarui opsi Konten sebagai berikut:
- Posting untuk Halaman Saat Ini: YA
Modul Blog Desain
Dengan pengaturan konten di tempat, mari buat beberapa perubahan pada desain. Di bawah tab desain, perbarui tata letak sebagai berikut:
- Tata Letak: Kotak
Sekarang kembali ke tab konten dan tambahkan warna latar belakang berikut ke item kisi:
- Warna Latar Belakang: #3a405a
Perbarui Gaya Teks Judul
- Judul Font: Mulish
- Judul Font Berat: Tebal
- Judul Teks Warna: #eee
- Ukuran Teks Judul: 34px
- Tinggi Baris Judul: 1.3em
Perbarui Gaya Teks Tubuh
- Font Tubuh: Montserrat
- Warna Teks Tubuh: #ffffff
- Tinggi Garis Tubuh: 2em
Perbarui Gaya Teks Meta
- Meta Font: Montserrat
- Warna Teks Meta: #ffb100
Perbarui Gaya Pagination
- Berat Font Pagination: Tebal
- Warna Teks Paginasi: #3a405a
Pada titik ini, kami memiliki template halaman arsip kami dan berjalan, lengkap dengan judul halaman dan posting blog (dalam tata letak batu) yang akan menampilkan posting untuk halaman arsip saat ini secara dinamis.
Hasil Akhir
Untuk menguji hasilnya, kunjungi berbagai jenis halaman arsip di situs Anda.
Berikut adalah contoh template halaman arsip kategori yang menampilkan semua posting untuk kategori “WordPress”.
Berikut adalah templat halaman arsip penulis yang menampilkan semua posting untuk penulis tertentu.
Berikut adalah halaman arsip tag yang menampilkan semua posting dengan tag “Berita”.
Dan berikut ini adalah template halaman arsip tanggal yang menampilkan semua postingan untuk bulan Oktober 2019.
Pikiran Akhir
Setelah Anda tahu cara membuat template arsip baru dengan pembuat tema Divi, menambahkan tata letak batu untuk posting itu mudah. Triknya adalah menggunakan opsi bawaan Divi untuk menampilkan judul halaman arsip sebagai konten dinamis dan kemudian menggunakan modul blog untuk secara dinamis menampilkan posting untuk halaman saat ini dalam tata letak kotak batu. Mudah-mudahan, ini akan membantu meningkatkan keseluruhan desain situs web Anda dengan menargetkan halaman arsip yang dapat dengan mudah diabaikan.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!