Desain Website Menggunakan Elementor Pro – Zero to Hero #4

🎯 Tujuan Bagian Ini

Setelah menyelesaikan bagian ini, kamu akan:

• Membuat tampilan artikel blog (single post) yang profesional

• Menampilkan elemen dinamis: judul, tanggal, gambar, konten

• Menambahkan header custom, author info, related posts, dsb.

• Mengatur agar template ini berlaku otomatis untuk semua postingan blog

✅ Apa Itu Theme Builder?

Theme Builder di Elementor Pro memungkinkan kamu mendesain template khusus untuk:

• Postingan tunggal (single post)

• Arsip (kategori/tag)

• Header dan footer

• Page 404, dsb.

Dengan ini, kamu bisa mengontrol tampilan semua bagian situs tanpa mengubah kode.

🔗 Tentang Theme Builder – Elementor Docs

✅ Langkah 1: Akses Theme Builder

1. Login ke Dashboard WordPress

2. Elementor → Theme Builder

3. Pilih tab Single Post

4. Klik tombol Add New → Single Post

5. Beri nama: Template Postingan Blog

6. Klik Create Template

Elementor akan terbuka dalam mode Theme Builder.

✅ Langkah 2: Desain Struktur Template Postingan

Kita akan bangun layout seperti ini:

🔧 Tambahkan Elemen Berikut:

1. Featured Image

   • Widget: Post Featured Image

   • Style → Border Radius: 8px

2. Judul Artikel

   • Widget: Post Title

   • Typography: Bold, ukuran besar (32–48px)

3. Meta Informasi

   • Widget: Post Info

   • Aktifkan: Author, Date, Categories

   • Style: Gunakan icon kecil, warna abu-abu

4. Konten Artikel

   • Widget: Post Content

   • Ini adalah isi utama dari artikel

5. Tags / Navigasi (Opsional)

   • Widget: Post Navigation atau Post Tags

6. Social Share atau CTA (Opsional)

   • Gunakan widget Share Buttons

   • Tambahkan tombol “Baca Artikel Lainnya” atau “Kembali ke Blog”

✅ Langkah 3: Sesuaikan Gaya Visual (Styling)

• Gunakan font konsisten (misal: Inter untuk teks, Poppins untuk judul)

• Tambahkan padding antar elemen agar tidak padat

• Atur warna heading, link, dan divider sesuai branding kamu

📌 Di Elementor, setiap elemen bisa kamu atur warna, spacing, ukuran, border, dsb. dengan kontrol penuh.

✅ Langkah 4: Preview dan Assign Template

1. Klik eye icon di bawah → Preview With → pilih salah satu post

2. Pastikan semua elemen muncul dengan rapi

3. Klik tombol Publish

4. Pilih kondisi tampil:

   • Include: All Singular → Posts

   • Artinya: template ini akan dipakai untuk semua artikel blog

Klik Save & Close

🎯 Sekarang semua artikel blog kamu akan otomatis menggunakan template ini.

✅ Langkah 5: Coba Artikel Kamu

1. Kunjungi salah satu postingan blog (/2025/10/contoh-artikel.html)

2. Cek:

   • Apakah featured image muncul?

   • Apakah teks terbaca jelas di HP?

   • Apakah ada bagian yang perlu diubah spacing atau ukuran?

🔁 Kapan pun kamu mau edit template ini, cukup kembali ke Elementor → Theme Builder.

📋 Checklist Akhir

• Template single post sudah dibuat

• Elemen dinamis sudah dimasukkan (judul, konten, gambar, meta)

• Styling visual sudah sesuai

• Template otomatis berlaku untuk semua artikel

🔚 Penutup

Dengan template postingan yang profesional, kamu tidak perlu lagi edit satu per satu tampilan setiap artikel. Semua jadi seragam, rapi, dan merepresentasikan branding blog kamu dengan konsisten.

Template ini bisa kamu duplikat, modifikasi untuk kategori tertentu, bahkan buat versi dark mode jika mau.