Cara Membuat Header Dan Footer Website WordPress

Membuat header dan footer di WordPress bisa dilakukan dengan beberapa cara, mulai dari cara termudah menggunakan fitur bawaan tema hingga cara yang lebih kustom menggunakan page builder.

Berikut adalah tiga metode yang paling umum digunakan:


1. Menggunakan Customizer Bawaan Tema (Paling Mudah)

Hampir semua tema modern (seperti Astra, OceanWP, atau GeneratePress) memiliki fitur Header & Footer Builder.

  1. Masuk ke Dashboard > Appearance (Tampilan) > Customize (Sesuaikan).

  2. Cari menu bernama Header Builder dan Footer Builder.

  3. Di sana Anda bisa:

    • Mengunggah logo perusahaan.

    • Mengatur menu navigasi.

    • Menambahkan tombol Call to Action (CTA).

    • Mengatur warna latar belakang dan tipografi secara langsung.

  4. Klik Publish jika sudah selesai.

2. Menggunakan Elementor (Untuk Desain Kustom)

Jika Anda menggunakan Elementor, Anda memiliki kontrol penuh terhadap tata letak tanpa batasan tema.

  • Jika menggunakan Elementor Pro: Pergi ke Templates > Theme Builder > Tambah baru Header atau Footer.

  • Jika menggunakan versi Gratis: Instal plugin tambahan bernama “Elementor Header & Footer Builder”.

    1. Buka plugin tersebut di menu Appearance.

    2. Pilih “Add New”, beri nama (misal: Header Utama), dan pilih tipe template sebagai “Header”.

    3. Tentukan lokasi tampilnya (pilih “Entire Website” agar muncul di semua halaman).

    4. Klik Edit with Elementor dan desainlah menggunakan widget seperti Site Logo, Navigation Menu, dan Search.

3. Menggunakan Blok Gutenberg (Full Site Editing / FSE)

Jika Anda menggunakan tema terbaru yang mendukung Full Site Editing (seperti tema Twenty Twenty-Four), Anda bisa mendesain langsung di editor blok.

  1. Masuk ke Appearance > Editor.

  2. Pilih bagian Patterns atau Parts.

  3. Klik pada bagian Header atau Footer.

  4. Anda bisa menambah atau menggeser blok (seperti gambar untuk logo atau daftar tautan untuk menu) secara visual.


Checklist Elemen Penting:

BagianElemen yang Harus Ada
HeaderLogo (kiri/tengah), Menu Navigasi Utama, Tombol Kontak/CTA, Ikon Pencarian.
FooterInfo Kontak (Alamat, Email, WA), Hak Cipta (Copyright), Tautan Cepat (Privacy Policy), Ikon Media Sosial.

Tips untuk Jasa Teknis:

  • Header: Pastikan menu navigasi sangat simpel. Untuk jasa teknis, letakkan tombol “Konsultasi” dengan warna kontras di pojok kanan atas header agar mudah ditemukan.

  • Footer: Manfaatkan area ini untuk menampilkan logo teknologi atau stack yang Anda gunakan (seperti logo Linux, WordPress, dll) sebagai penguat kredibilitas teknis di setiap halaman.

  • Sticky Header: Pertimbangkan untuk membuat header tetap muncul (sticky) saat pengunjung men-scroll ke bawah, agar mereka bisa langsung berpindah halaman tanpa harus kembali ke atas.

Cara Buat website dengan WordPress

Cara Desain Website dengan WordPress

Membuat Menu di Website wordpress

Promo Aplikasi Tanpa Web Regarcomm

Level Up Bisnismu dengan Aplikasi Web dari Regarcomm Regarcomm Development Solusi Aplikasi Web Digital Saatnya bisnis naik level Level Up Bisnismu dengan Aplikasi Web Keren dari Regarcomm! Bosan sama sistem manual yang ribet? 🤯 Mau bisnis makin cuan dan efisien? Regarcomm Development hadir buat nyulap bisnismu jadi GO DIGITAL! ✨ ✨ Lihat Fitur 💬 Konsultasi

Read More »

Promo Aplikasi Regarcomm Development

Level Up Bisnismu dengan Aplikasi Web dari Regarcomm 🔥 Level Up Bisnismu Pakai Aplikasi Web Keren dari Regarcomm! 🔥 Bosan sama sistem manual yang ribet? 🤯 Mau bisnis makin cuan dan efisien? Tenang, Regarcomm Development hadir buat nyulap bisnismu jadi GO DIGITAL! ✨ Kehebatan Produk Kami 🏃‍♂️💨 Absensi Anti Ribet: Lupakan absen manual yang bikin

Read More »

Promo Bank Sampah

Aplikasi Bank Sampah Modern | Regarcomm Development Regarcomm Development Lihat Harga 🌱 Google Apps Script Edition Aplikasi Bank Sampah Modern Solusi manajemen praktis untuk Bank Sampah. Tanpa biaya server bulanan, otomatis cetak struk dan kirim bukti transaksi melalui WhatsApp. 📲 Konsultasi via WhatsApp Lihat Fitur Dashboard Bank Sampah Sistem manajemen transaksi NasabahAktif StatusOnline ♻️ Setoran

Read More »

Aplikasi Web Tanpa Hosting & Domain

Regarcomm Development beri solusi praktis: membangun aplikasi web tanpa perlu membeli hosting atau domain dengan memanfaatkan Google Sheets + Google Apps Script. Pendekatan ini cocok untuk prototipe cepat, aplikasi internal, dashboard, atau form interaktif yang butuh backend sederhana dan penyimpanan data. Kenapa memakai Google Sheets + Apps Script? Tanpa biaya hosting/domain: data tersimpan di Google

Read More »

Landing Page Regarcomm Development

Regarcomm Development – Jasa Pembuatan Website Profesional 💬 REGARCOMM DEVELOPMENT 💬 Hubungi WA Jasa Pembuatan Website Profesional Ingin punya website keren untuk kebutuhan pribadi atau bisnis? Kami siap membantu Anda membangun website yang modern, cepat, aman, dan sesuai kebutuhan! 🚀 💬 Konsultasi Gratis 🌐 Kunjungi Website Kami Layanan Website Kami Profil Diri Halaman identitas pribadi

Read More »