Cara mengubah tampilan header di WordPress bisa dilakukan dengan berbagai cara — baik menggunakan fitur bawaan tema, kustomisasi manual lewat CSS, atau menggunakan page builder seperti Elementor. Bagian header penting karena menjadi elemen pertama yang dilihat pengunjung saat membuka situsmu.
Mengenal Bagian Header di WordPress
Header biasanya berisi logo, menu navigasi, ikon pencarian, dan kadang tombol CTA (Call to Action) seperti “Hubungi Kami”. Tampilan header berbeda tergantung tema yang digunakan, tapi sebagian besar bisa dikustomisasi tanpa coding.
🔹 1. Mengubah Header dari Customizer (Tanpa Plugin)
Cara paling mudah untuk mengubah tampilan header di WordPress adalah melalui menu Tampilan → Sesuaikan (Appearance → Customize).
- Buka Dashboard WordPress.
- Pilih Tampilan → Sesuaikan.
- Klik bagian Header atau Site Identity (nama bisa berbeda tergantung tema).
- Ubah logo, judul situs, tagline, dan warna background header.
- Klik Terbitkan (Publish) untuk menyimpan perubahan.
💡 Tips: Gunakan gambar logo dengan ukuran ringan (di bawah 100 KB) agar situs tetap cepat dimuat.
🔹 2. Mengubah Header Menggunakan Elementor
Jika kamu menggunakan tema kompatibel dengan Elementor, kamu bisa membuat header kustom dengan tampilan lebih bebas.
- Masuk ke Dashboard → Templates → Theme Builder.
- Pilih Add New → Header.
- Pilih template kosong atau salah satu desain bawaan.
- Gunakan widget seperti:
- Site Logo — untuk menampilkan logo.
- Nav Menu — untuk menu navigasi.
- Button — untuk tombol CTA seperti “Daftar” atau “Hubungi”.
- Atur layout dan warna sesuai gaya situsmu.
- Klik Publish dan pilih kondisi penempatan “Entire Site”.
🔹 3. Mengubah Header Secara Manual dengan CSS
Bagi yang ingin kontrol penuh tanpa plugin, kamu bisa menambahkan CSS khusus melalui menu Tampilan → Sesuaikan → CSS Tambahan (Additional CSS).
Contoh sederhana:
/* Ubah warna latar header */
header.site-header {
background-color: #111;
padding: 20px 0;
}
/* Logo dan teks header */
header .site-title a {
color: #fff;
font-size: 22px;
font-weight: bold;
text-decoration: none;
}
/* Menu navigasi */
header .main-navigation a {
color: #ddd;
margin: 0 10px;
}
header .main-navigation a:hover {
color: #fff;
}Sesuaikan warna, padding, dan font agar sesuai tema blogmu. Jangan lupa lakukan pratinjau sebelum menyimpan.
🔹 4. Tips Desain Header agar Lebih Menarik
- Gunakan warna kontras dengan background halaman.
- Pastikan menu navigasi mudah dibaca dan tidak terlalu banyak item.
- Gunakan logo beresolusi tajam namun ukuran file kecil.
- Tambahkan efek sticky agar header tetap terlihat saat scroll.
- Uji tampilan di mobile — pastikan menu tetap responsif.
🧠 Kesimpulan
Mengubah tampilan header di WordPress dapat dilakukan dengan mudah, baik melalui Customizer, Elementor, atau CSS manual. Gunakan cara yang sesuai dengan kemampuanmu — tanpa plugin pun kamu bisa membuat header yang profesional dan ringan.
💬 Coba dan Bagikan!
Sudah berhasil mengubah tampilan header situsmu? Ceritakan hasilnya atau ajukan pertanyaan di kolom komentar di bawah. 😊
Terima kasih sudah membaca di Tipstech Praktis. Nantikan panduan berikutnya: Cara Membuat Homepage Kustom di WordPress.
❓ Pertanyaan Umum
Apakah semua tema WordPress bisa ubah header tanpa plugin?
Ya, hampir semua tema mendukung pengaturan header bawaan di menu “Sesuaikan”. Namun tampilan dan opsi bisa berbeda tergantung tema yang digunakan.
Apakah perlu Elementor Pro untuk membuat header?
Ya, fitur Theme Builder (termasuk header kustom) hanya tersedia di Elementor Pro. Namun versi gratis tetap bisa ubah tampilan header tema yang aktif.
Bagaimana cara membuat header tetap di atas saat scroll?
Gunakan CSS seperti position: sticky; top: 0; pada elemen header. Beberapa tema sudah memiliki opsi “Sticky Header” di menu kustomisasi.