Desain Website Menggunakan Elementor Pro – Zero to Hero #3

🎯 Tujuan Bagian Ini

Setelah mengikuti tutorial ini, kamu akan:

• Membangun struktur homepage blog dari awal

• Mendesain bagian hero, perkenalan, dan daftar posting

• Menyesuaikan tampilan agar responsif di HP dan desktop

✅ Persiapan Awal (Pastikan Ini Sudah Siap)

• Elementor Pro 3.32 aktif ✅

• Halaman beranda kosong (Beranda) sudah dibuat dan diset sebagai homepage ✅

• Tema ringan seperti Astra aktif ✅

• Kamu sudah di dalam editor Elementor (Edit with Elementor)

✅ Langkah 1: Buat Struktur Layout Dasar

🎯 Tujuan: Membagi homepage menjadi beberapa bagian:

1. Hero Section

2. Intro blog / perkenalan singkat

3. Daftar artikel terbaru

4. Call to Action (opsional)

🔧 Di dalam Elementor:

1. Klik ikon ➕ → pilih struktur 1 kolom

2. Klik ikon “Edit Section” (titik 6 di tengah atas)

3. Di tab Layout:

   • Content Width: Boxed atau Full Width

   • Min Height: 600px (untuk Hero)

✅ Langkah 2: Desain Hero Section (Bagian Atas)

Komponen Hero Section:

• Background gambar atau warna solid

• Judul blog

• Subjudul / tagline

• Tombol CTA (opsional)

Langkah-langkah:

1. Tambahkan Heading → tulis:
   "Selamat Datang di Blog Saya"

2. Tambahkan Text Editor → isi:
   "Berisi tulisan, ide, dan inspirasi sehari-hari."

3. Tambahkan Button (opsional) → label: "Lihat Artikel"

4. Pilih section → Tab Style →

   • Background: Gambar atau warna gradient

   • Typography: Gunakan font modern seperti "Poppins" atau "Inter"

🎯 Gunakan padding atas-bawah: 100px agar terlihat lega

✅ Langkah 3: Tambahkan Bagian Perkenalan / Tentang Blog

1. Tambahkan section baru (1 kolom)

2. Masukkan heading:
   "Tentang Blog Ini"

3. Tambahkan teks singkat yang menjelaskan topik blog kamu

4. Gunakan ikon atau divider untuk mempercantik

💡 Tambahkan Image jika ingin menampilkan foto diri / simbol blog

✅ Langkah 4: Tampilkan Artikel Terbaru Secara Otomatis

Fitur Elementor Pro: Posts Widget

1. Tambahkan section baru → tarik widget Posts

2. Di tab Content:

   • Source: Latest Posts

   • Layout: Cards atau Classic

   • Columns: 2 (untuk desktop)

3. Di tab Style:

   • Sesuaikan typography, spacing, dan image ratio

   • Aktifkan Box Shadow agar terlihat modern

📌 Kamu bisa filter artikel berdasarkan kategori jika blog kamu punya topik berbeda

✅ Langkah 5: Tambahkan Call to Action (Opsional)

CTA bisa jadi:

• Tombol ke halaman kategori

• Form berlangganan newsletter

• Ajakan baca artikel tertentu

Contoh:

• Heading: "Cari topik tertentu?"

• Button: "Jelajahi Kategori"

✅ Langkah 6: Optimasi Responsif Mobile

1. Di bawah editor Elementor, klik ikon Responsive Mode (PC + Mobile)

2. Cek tampilan di:

   • Desktop

   • Tablet

   • Mobile

3. Sesuaikan:

   • Ukuran font

   • Margin/padding

   • Urutan elemen jika perlu

🎯 Elementor Pro memungkinkan kamu menyembunyikan elemen khusus untuk mobile atau desktop.

✅ Langkah 7: Simpan dan Publish

1. Klik tombol Update

2. Kunjungi homepage kamu → pastikan semua muncul seperti yang diinginkan

3. Tes dari HP untuk memastikan tampilannya tetap responsif dan cepat

📋 Checklist Akhir

• Homepage punya hero section visual

• Ada perkenalan singkat tentang blog

• Artikel terbaru tampil otomatis

• Layout sudah responsif di semua perangkat

🔚 Penutup

Sekarang blog kamu sudah mulai hidup secara visual. Kamu bukan lagi lihat halaman kosong — tapi homepage cantik yang kamu desain sendiri. Dan ini baru awal.

Di bagian selanjutnya, kita akan mendesain template postingan blog profesional, agar setiap artikel tampil konsisten dan menarik.