Tutorial Berseri #4: Mendesain Halaman Blog Utama dan Template Arsip Kategori dengan Elementor Pro Theme Builder (Archive & Posts Page)

Dari Konten ke Struktur Navigasi 🧭

Setelah berhasil mendesain Header, Footer, dan Single Post Template (Bagian #2 dan #3), langkah selanjutnya adalah memastikan pembaca dapat menavigasi dan menemukan postingan Anda dengan efisien.

Ada dua jenis halaman daftar postingan utama yang harus kita atasi:

1. Archive Page (Halaman Arsip): Halaman yang secara otomatis dibuat oleh WordPress untuk daftar kategori, tag, tanggal, dan penulis. Desain ini harus diterapkan melalui Theme Builder.

2. Posts Page (Halaman Blog Utama): Halaman statis yang Anda tentukan di Pengaturan WordPress untuk menampilkan daftar semua postingan Anda. Desain ini dibuat sebagai halaman Elementor biasa.

Fase I: Mendefinisikan Halaman Blog Utama (Posts Page)

Sebelum mendesain, Anda harus memberi tahu WordPress halaman mana yang akan menjadi Home dan halaman mana yang akan menjadi Blog Index.

Langkah 1: Membuat Halaman Index Blog

1. Buat Halaman Baru: Dari dashboard WordPress, buat dua halaman baru:

   • Halaman 1: Beri nama Home (atau Beranda).

   • Halaman 2: Beri nama Blog (atau Artikel).

2. Atur Reading Settings: Arahkan ke Settings > Reading.

   • Atur Your homepage displays ke A static page.

   • Pilih halaman Home sebagai Homepage.

   • Pilih halaman Blog sebagai Posts page (Halaman Pos).

Langkah 2: Mendesain Halaman Blog (Posts Page) dengan Widget Posts

Sekarang, edit halaman Blog yang baru Anda tentukan menggunakan Elementor.

1. Tambah Widget Posts: Seret dan lepas (drag and drop) widget Posts (atau Loop Grid jika menggunakan Elementor versi terbaru) ke dalam halaman.

2. Kustomisasi Layout: Sesuaikan tampilan daftar postingan Anda:

   • Skin: Pilih antara Card (dengan border dan shadow) atau Classic.

   • Columns: Atur jumlah kolom (misalnya, 3 atau 4 kolom untuk tampilan grid).

   • Image & Meta: Atur apakah akan menampilkan Gambar Unggulan, Judul, Excerpt (ringkasan), dan tombol Read More.

3. Pengaturan Query: Di tab Query, pastikan pengaturan Anda adalah Source: Posts dan Include By: Term atau biarkan kosong jika Anda ingin menampilkan semua postingan terbaru.

Langkah 3: Menambahkan Paginasi (Pagination)

Di bagian bawah widget Posts, pastikan Pagination diaktifkan di tab Content. Anda dapat memilih style paginasi (Numbers, Previous/Next, atau Load More).

Fase II: Mendesain Template Arsip (Archive Template)

Halaman Arsip adalah tampilan daftar yang akan digunakan ketika pembaca mengklik tautan Kategori (misalnya, bloganda.com/category/teknologi). Desain ini harus dibuat sekali melalui Theme Builder dan diterapkan secara otomatis.

Langkah 4: Membuat Template Arsip Baru

1. Akses Theme Builder: Dari dashboard WordPress, arahkan ke Elementor > Theme Builder.

2. Pilih Archive: Pilih tab Archive, lalu klik Add New Archive. Beri nama template Anda (misalnya, Template Arsip Kategori).

3. Set Kondisi (Display Conditions): Ini adalah langkah krusial. Elementor akan meminta Anda mengatur kondisi tampilan.

   • Pilih Include > All Archives. Ini memastikan template ini berlaku untuk Kategori, Tag, dan Halaman Penulis.

4. Pilih Data Preview: Pilih kategori yang sudah memiliki beberapa postingan sebagai preview.

Langkah 5: Membuat Header Arsip Dinamis

Setiap Halaman Arsip harus memiliki judul yang jelas tentang apa yang sedang dilihat pembaca.

1. Archive Title: Seret dan lepas widget Archive Title. Widget ini secara otomatis akan menampilkan judul kategori atau tag yang sedang dilihat (misalnya, “Category: Teknologi” atau “Tag: WordPress”).

2. Archive Description (Opsional): Jika Anda ingin menampilkan deskripsi kategori, tambahkan widget Archive Description di bawah Archive Title.

Langkah 6: Menambahkan Widget Posts Dinamis Arsip

Tidak seperti Posts Widget biasa, widget untuk Arsip harus memiliki query yang berbeda.

1. Tambah Widget Posts: Seret dan lepas widget Posts (atau Loop Grid) di bawah Header Arsip.

2. Pengaturan Query (KRITIS): Di tab Query, pastikan pengaturan Source diatur ke Current Query.

   • Penting: Pengaturan Current Query ini adalah yang membuat widget Posts mengetahui secara otomatis untuk hanya menampilkan postingan yang terkait dengan kategori atau tag yang sedang dibuka saat ini.

3. Kustomisasi Layout: Sesuaikan layout, jumlah kolom, dan metadata sama seperti yang Anda lakukan pada Posts Page (Langkah 2), demi konsistensi.

4. Pagination: Tambahkan widget Pagination untuk halaman arsip yang panjang.

Langkah 7: Menyempurnakan Sidebar Arsip (Opsional)

Untuk navigasi yang lebih baik di halaman arsip, Anda dapat menambahkan Sidebar (sama seperti yang Anda lakukan di Single Post Template, Bagian #3).

1. Struktur Kolom: Ubah section utama Anda menjadi dua kolom (misalnya 70% konten dan 30% sidebar).

2. Widget Arsip Khusus: Di kolom sidebar 30%, tambahkan widget Archive Posts. Widget ini menampilkan daftar bulan/tahun arsip, membantu pembaca yang ingin mencari konten berdasarkan waktu.

Kesimpulan Bagian 4: Website yang Terstruktur

Selamat! Dengan menyelesaikan Bagian 4, blog Anda kini memiliki struktur navigasi yang profesional:

1. Halaman Utama Blog (/blog) menampilkan semua postingan terbaru dengan layout grid yang menarik.

2. Template Arsip kustom yang secara otomatis diterapkan ke semua kategori dan tag, memastikan konsistensi visual saat pembaca menjelajahi topik spesifik.

Struktur ini sangat penting untuk SEO dan UX karena membuat website Anda terlihat terorganisir di mata mesin pencari dan pengunjung.

Pada Bagian 5 (Final) dari seri tutorial ini, kita akan fokus pada tahap akhir sebelum go live: Finalisasi dan Optimasi. Kita akan membahas Optimasi Kecepatan, Pengaturan SEO dasar Elementor, serta prosedur testing dan backup yang diperlukan.