Cara mengubah tampilan header di WordPress bisa dilakukan dengan berbagai cara — mulai dari fitur bawaan tema, kustomisasi manual menggunakan CSS, hingga memanfaatkan page builder seperti Elementor. Bagian header merupakan elemen penting karena menjadi tampilan pertama yang dilihat pengunjung saat membuka situs.
Header yang menarik, rapi, dan responsif tidak hanya meningkatkan tampilan visual, tetapi juga berpengaruh pada pengalaman pengguna (UX), navigasi, hingga tingkat konversi. Oleh karena itu, penting untuk memahami cara mengoptimalkan header agar terlihat profesional di semua perangkat, baik desktop maupun mobile.
Mengenal Bagian Header di WordPress
Header biasanya berisi logo, menu navigasi, ikon pencarian, dan terkadang tombol CTA (Call to Action) seperti “Hubungi Kami” atau “Daftar”. Tampilan header bisa berbeda tergantung tema yang digunakan, namun sebagian besar tetap bisa dikustomisasi tanpa harus menulis kode.
Selain itu, beberapa tema modern juga menyediakan fitur tambahan seperti sticky header, mega menu, hingga integrasi ikon sosial media untuk meningkatkan interaksi dan memudahkan navigasi pengguna.
1. Mengubah Header dari Customizer (Tanpa Plugin)
Cara paling mudah untuk mengubah tampilan header di WordPress adalah melalui menu Tampilan → Sesuaikan (Appearance → Customize). Metode ini cocok untuk pemula karena tidak memerlukan coding sama sekali.
- Buka Dashboard WordPress.
- Pilih Tampilan → Sesuaikan.
- Klik bagian Header atau Site Identity (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) dan format WebP agar loading tetap cepat dan tidak mengganggu performa situs.
2. Mengubah Header Menggunakan Elementor
Jika kamu menggunakan tema yang kompatibel dengan Elementor, kamu bisa membuat header kustom dengan tampilan yang lebih fleksibel dan modern menggunakan sistem drag-and-drop.
Metode ini cocok untuk kamu yang ingin desain unik tanpa harus menulis kode, karena Elementor menyediakan berbagai widget siap pakai yang bisa disusun sesuai kebutuhan.
- Masuk ke Dashboard → Templates → Theme Builder.
- Pilih Add New → Header.
- Pilih template kosong atau desain bawaan.
- Tambahkan widget seperti:
- Site Logo — menampilkan logo.
- Nav Menu — menu navigasi.
- Button — tombol CTA seperti “Daftar”.
- Atur layout, warna, dan spacing sesuai branding situs.
- Klik Publish lalu pilih kondisi “Entire Site”.
3. Mengubah Header Secara Manual dengan CSS
Bagi yang ingin kontrol penuh tanpa plugin, kamu bisa menambahkan CSS melalui menu Tampilan → Sesuaikan → CSS Tambahan. Metode ini cocok untuk penyesuaian detail seperti warna, jarak, hingga efek hover.
Contoh sederhana:
/* Background header */
header.site-header {
background-color: #111;
padding: 20px 0;
}
/* Logo */
header .site-title a {
color: #fff;
font-size: 22px;
font-weight: bold;
text-decoration: none;
}
/* Menu */
header .main-navigation a {
color: #ddd;
margin: 0 10px;
}
header .main-navigation a:hover {
color: #fff;
}Sesuaikan warna dan ukuran agar tetap konsisten dengan identitas brand. Lakukan pratinjau sebelum menyimpan agar tidak merusak tampilan.
4. Tips Desain Header agar Lebih Menarik
- Gunakan warna kontras agar elemen mudah terlihat.
- Batasi jumlah menu agar tidak membingungkan.
- Gunakan logo ringan dan tajam.
- Aktifkan sticky header untuk navigasi cepat.
- Optimalkan tampilan di mobile.
Kelebihan dan Kekurangan Mengubah Header
Setiap metode memiliki kelebihan dan kekurangan yang perlu dipertimbangkan:
- Customizer: Mudah digunakan, tetapi fitur terbatas.
- Elementor: Fleksibel dan visual, namun beberapa fitur premium.
- CSS Manual: Sangat fleksibel, tapi butuh pemahaman dasar coding.
Kesimpulan
Mengubah tampilan header di WordPress bisa dilakukan dengan mudah sesuai kebutuhan. Pilih metode yang paling sesuai dengan kemampuanmu agar hasilnya optimal tanpa mengorbankan performa.
Header yang baik akan meningkatkan kepercayaan pengunjung, mempermudah navigasi, dan memberikan kesan profesional pada situs.
💬 Coba dan Bagikan!
Sudah berhasil mengubah header situsmu? Bagikan pengalamanmu di kolom komentar atau tanyakan jika masih ada kendala.
Terima kasih sudah membaca di TipsTechPraktis. Selanjutnya: Cara Membuat Homepage Kustom di WordPress.
FAQ post
Apakah semua tema WordPress bisa mengubah header tanpa plugin?
Ya, hampir semua tema WordPress menyediakan pengaturan header melalui menu Tampilan → Sesuaikan. Namun, fitur yang tersedia bisa berbeda tergantung tema yang digunakan. Tema premium biasanya memiliki opsi lebih lengkap dibanding tema gratis.
Mana yang lebih baik, Customizer atau Elementor untuk mengubah header?
Customizer cocok untuk perubahan dasar seperti logo, warna, dan menu. Sedangkan Elementor lebih fleksibel karena memungkinkan desain header secara visual dengan sistem drag-and-drop. Jika ingin desain profesional dan unik, Elementor lebih disarankan.
Apakah perlu Elementor Pro untuk membuat header kustom?
Ya, fitur Theme Builder untuk membuat header kustom sepenuhnya hanya tersedia di Elementor Pro. Namun, versi gratis tetap bisa digunakan untuk mengatur tampilan dasar melalui tema yang digunakan.
Bagaimana cara membuat header tetap di atas saat scroll (sticky header)?
Kamu bisa menggunakan CSS seperti position: sticky; top: 0; pada elemen header atau mengaktifkan fitur sticky header jika tersedia di tema. Cara ini membuat header tetap terlihat saat pengguna menggulir halaman.
