Desain Website Menggunakan Elementor Pro – Zero to Hero #5

Bagian 5: Navigasi, Footer, dan Optimasi Responsif Mobile

🎯 Tujuan Bagian Ini

Setelah menyelesaikan bagian ini, kamu akan:

• Memiliki menu navigasi responsif di bagian atas (header)

• Membuat footer blog dengan info kontak, sosial media, dan copyright

• Memastikan tampilan di mobile tidak berantakan

• Mengatur layout yang konsisten di semua halaman

✅ Langkah 1: Buat Menu Navigasi (WordPress)

Sebelum membangun header di Elementor, kamu perlu membuat menu terlebih dahulu.

Cara membuat menu:

1. Masuk ke Dashboard WordPress

2. Appearance → Menus

3. Klik Create a new menu

4. Beri nama, misalnya: Menu Utama

5. Tambahkan item:

   • Beranda

   • Tentang

   • Blog

   • Kontak

6. Klik Save Menu

📌 Menu ini nanti akan kita tarik ke dalam desain header di Theme Builder Elementor.

✅ Langkah 2: Desain Header Menggunakan Theme Builder

Akses Theme Builder:

1. Dashboard → Elementor → Theme Builder

2. Klik tab Header

3. Klik Add New → Header

4. Beri nama: Header Blog → Create Template

Tambahkan Elemen Navigasi:

• Struktur: 3 kolom (Logo – Menu – CTA)

• Elemen:

  • Site Logo (Widget: Site Logo)

  • Nav Menu (Widget: Nav Menu) → Pilih menu yang sudah kamu buat

  • Button (opsional): “Langganan”, “Kontak”, atau “Cari”

Style:

• Typography dan warna disesuaikan brand

• Background: Putih atau transparan

• Gunakan padding 20–30px di atas dan bawah

✅ Langkah 3: Desain Footer Blog

Masih di Theme Builder:

1. Klik tab Footer

2. Klik Add New → Footer

3. Beri nama: Footer Blog → Create Template

Tambahkan Isi Footer:

• Struktur: 2 atau 3 kolom

• Elemen penting:

  • Logo atau nama blog

  • Link navigasi (footer menu)

  • Kontak atau sosial media

  • Copyright: "© 2025 Blog Kamu. All rights reserved."

Gunakan Widget:

• Site Logo

• Icon List (untuk link cepat)

• Social Icons

• Text Editor

🎯 Tip: Gunakan warna latar gelap dengan teks putih untuk kontras yang elegan.

✅ Langkah 4: Terapkan Display Conditions

Setelah desain header/footer selesai:

1. Klik Publish

2. Pilih Display Condition → Entire Site

3. Klik **Save & Close`

Artinya, header dan footer ini akan otomatis tampil di semua halaman situs kamu.

✅ Langkah 5: Cek dan Optimasi Responsif Mobile

Masuk ke mode responsif:

1. Di editor Elementor, klik ikon Responsive Mode

2. Periksa tampilan:

   • Tablet

   • Mobile

Perhatikan:

• Navigasi jangan sampai meluber keluar

• Pastikan menu berubah jadi hamburger icon

• Cek ukuran font dan jarak antar elemen

• Footer tetap mudah dibaca di layar kecil

Tips Responsif:

• Gunakan ukuran font 14–16px untuk body text mobile

• Gunakan viewport height (VH) dan % untuk padding agar fleksibel

• Gunakan opsi “Hide on Mobile” untuk elemen yang tidak perlu tampil

📋 Checklist Akhir

• Menu navigasi utama aktif

• Header tampil di semua halaman

• Footer rapi dan informatif

• Layout responsif di HP dan tablet

• Semua elemen tampil proporsional dan readable

🔚 Penutup

Kesan pertama blog kamu muncul saat halaman dimuat — tapi pengalaman pengguna dibentuk oleh navigasi dan struktur visual.

Header dan footer yang rapi, plus layout yang nyaman dilihat di HP, akan membuat pengunjung betah, kembali, bahkan berbagi konten kamu.