Tutorial Berseri #3: Menciptakan Template Postingan Tunggal Blog dengan Elementor Pro Theme Builder (Single Post Template)

Melepaskan Diri dari Template Theme Kuno 🚀

Dalam website WordPress tradisional, layout setiap postingan blog dikendalikan sepenuhnya oleh theme Anda. Hal ini sering kali menghasilkan tampilan yang kaku dan minim kustomisasi.

Dengan Elementor Pro Theme Builder, Anda tidak perlu lagi terikat pada theme. Anda akan mendesain satu template utama yang secara otomatis akan mengambil data dari setiap postingan yang Anda buat—Judul (Title), Gambar Unggulan (Featured Image), dan isi Konten—dan menampilkannya dengan layout kustom Anda. Ini adalah inti dari desain dinamis Elementor Pro.

Fase I: Membuat Template dan Menentukan Kondisi Tampilan

Langkah pertama adalah mendirikan template baru di Theme Builder.

Langkah 1: Membuat Template Baru

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

2. Pilih Single Post: Pilih tab Single Post, lalu klik Add New Single Post. Beri nama template Anda (misalnya, Template Postingan Blog Utama).

3. Set Kondisi (Display Conditions): Setelah template terbuka, Elementor akan meminta Anda mengatur kondisi tampilan.

   • Pilih Include > Posts > All. Ini memastikan template ini diterapkan ke semua postingan blog yang akan Anda terbitkan.

Langkah 2: Memilih Data Preview

Saat Anda mendesain, Elementor akan menampilkan data dari postingan yang sudah ada. Pilih salah satu postingan Anda yang sudah memiliki Gambar Unggulan dan konten yang cukup panjang. Ini membantu Anda melihat bagaimana desain akan terlihat di dunia nyata.

Fase II: Desain Struktur Postingan (Di Atas Konten)

Bagian atas postingan biasanya berisi metadata penting yang memengaruhi pembacaan.

Langkah 3: Membangun Header Postingan Dinamis

Buat section penuh di bagian atas template.

1. Post Title: Seret dan lepas (drag and drop) widget Post Title. Secara otomatis, widget ini akan menampilkan judul dari postingan yang sedang dilihat. Sesuaikan styling H1 ini dengan Global Fonts Anda.

2. Post Info/Meta: Di bawah judul, tambahkan widget Post Info. Widget ini sangat penting karena dapat menampilkan Author, Date, Comments Count, dan Categories. Atur styling agar metadata ini terlihat rapi.

3. Featured Image Dinamis: Tambahkan widget Featured Image di section berikutnya. Widget ini menarik Gambar Unggulan yang Anda tetapkan di dashboard WordPress untuk postingan tersebut. Sesuaikan lebar dan ketinggiannya.

   • Penting untuk UX: Pastikan Featured Image Anda diatur agar responsif dan tidak memuat terlalu lambat.

Fase III: Desain Konten dan Elemen Penunjang

Ini adalah bagian terpenting, yaitu penempatan konten dan elemen interaktif.

Langkah 4: Widget Post Content

1. Area Konten Utama: Buat section baru (biasanya di bawah Gambar Unggulan).

2. Post Content: Seret dan lepas widget Post Content ke dalam section ini. Widget ini adalah wadah yang menampilkan semua teks, gambar, dan embed yang Anda ketikkan di editor WordPress biasa.

   • Perhatian! Widget ini tidak memiliki banyak opsi styling secara langsung karena ia menampilkan konten yang sudah Anda style di editor. Namun, styling teks secara keseluruhan akan diwarisi dari Global Styles dan Typography Settings Anda.

Langkah 5: Penambahan Social Share dan Navigation

Untuk mendorong interaksi, tambahkan elemen social share dan navigasi.

1. Share Buttons: Di akhir konten (sebelum Author Box), tambahkan widget Share Buttons. Sesuaikan icon dan styling agar sesuai dengan desain Anda.

2. Post Navigation: Tambahkan widget Post Navigation. Widget ini menampilkan tautan ke Postingan Sebelumnya dan Postingan Selanjutnya, membantu pembaca menjelajah blog Anda.

Langkah 6: Author Box dan Komentar

Ini adalah elemen penutup standar untuk setiap postingan blog.

1. Author Box: Tambahkan widget Author Box. Widget ini menarik informasi (Nama, Bio, Foto) dari profil pengguna WordPress yang membuat postingan tersebut. Ini membangun kredibilitas dan memberikan informasi tentang penulis kepada pembaca.

2. Comments: Tambahkan widget Post Comments. Widget ini menampilkan form komentar dan daftar komentar yang sudah ada. Sesuaikan styling agar form terlihat terintegrasi dengan desain Anda.

Fase IV: Pengaturan Layout dan Side Bar (Opsional)

Jika Anda ingin template postingan Anda memiliki sidebar (misalnya untuk ads atau popular posts), Anda harus membuat section dengan struktur kolom yang benar.

Langkah 7: Membuat Layout Kolom Postingan

1. Struktur Kolom: Hapus section yang hanya memiliki satu kolom untuk Post Content (dari Langkah 4). Ganti dengan section yang memiliki dua kolom (misalnya, rasio 70% untuk Konten dan 30% untuk Sidebar).

2. Pindahkan Konten: Pindahkan widget Post Content ke kolom 70%.

3. Sidebar Dinamis: Di kolom 30%, Anda dapat menambahkan widget yang diinginkan:

   • Widget Heading: Judul sidebar (misalnya, Baca Juga).

   • Widget Posts: Tambahkan widget Posts (atau Loop Grid di Elementor terbaru). Atur query widget ini agar hanya menampilkan postingan populer atau postingan terkait (Related Posts).

Kesimpulan Bagian 3: Konten Anda Kini Profesional

Selamat! Anda telah berhasil mendesain Template Postingan Tunggal blog Anda. Sekarang, setiap kali Anda membuat postingan baru, template kustom ini akan secara otomatis diterapkan, memastikan setiap artikel memiliki layout yang profesional, metadata yang lengkap, dan elemen interaksi yang konsisten.

Pada Bagian 4 dari seri tutorial ini, kita akan fokus pada bagaimana pembaca menemukan konten Anda: Mendesain Halaman Blog Utama dan Template Arsip Kategori menggunakan Theme Builder, memastikan konten Anda tersusun rapi dan mudah dinavigasi.