Youtube Linkedin

Desain Website Menggunakan Elementor Pro – Zero to Hero #5

Di bagian ini, kamu akan membangun header navigasi dan footer blog menggunakan Elementor Pro, serta memastikan tampilan situs tetap nyaman dilihat di HP dan tablet. Fokusnya: akses mudah, struktur jelas, dan tampilan profesional di semua perangkat.

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.

Share the Post:

Related Posts