Tutorial Lengkap Cara Mengganti Header Website WordPress Menggunakan Theme Blocksy

Theme Blocksy adalah salah satu theme WordPress modern yang paling mudah digunakan dan powerful. Salah satu fitur unggulannya adalah Header Builder, di mana kamu bisa menyusun tampilan header menggunakan sistem drag & drop. Dengan fitur ini, kamu bisa dengan mudah mengganti logo, menata menu navigasi, hingga menambahkan tombol WhatsApp atau CTA lainnya.

Pada artikel ini, kamu akan belajar cara mengganti header di WordPress menggunakan Theme Blocksy, disertai tips profesional agar tampilan website jauh lebih rapi, modern, dan responsif.

Mengapa Header Sangat Penting untuk Website?

Header adalah bagian pertama yang dilihat pengunjung ketika membuka website. Fungsinya sangat vital:

Menampilkan identitas brand (logo, warna brand)

Menyediakan navigasi utama agar pengunjung mudah menjelajah

Memberikan akses cepat ke tombol CTA seperti WhatsApp atau Simulasi Kredit

Meningkatkan citra profesional website

Dengan struktur header yang jelas dan rapi, tingkat kepercayaan pengunjung akan meningkat.

Cara Mengganti Header di Theme Blocksy (Lengkap & Mudah)

1. Masuk ke Customizer Blocksy

Langkah awal:

Login ke dashboard WordPress

Pilih Appearance → Customize

Klik menu Header

Di sini kamu akan masuk ke Header Builder, lengkap dengan preview langsung sehingga mudah melihat perubahan yang kamu buat.

2. Mengenal Struktur Header di Blocksy

Blocksy menyediakan tiga baris header:

Top Row – Cocok untuk social media, info kontak, pengumuman

Middle Row – Area utama (biasanya logo + menu)

Bottom Row – Bisa diisi tombol CTA atau elemen tambahan

Selain itu, Blocksy menyediakan elemen seperti:

Logo

Menu 1 & Menu 2

Button

Search

HTML

Social icons

Trigger (untuk mobile)

Off-canvas menu

Cukup drag elemen ke posisi yang kamu inginkan.

3. Cara Mengganti Logo di Header Blocksy

Untuk mengubah logo website:

Klik elemen Logo di Header Builder

Upload logo baru

Atur Maximum Width dan Height agar proporsional

Atur logo versi Desktop dan Mobile secara terpisah

Rekomendasi profesional:

Gunakan file PNG transparan

Lebar ideal desktop: 120–160px

Lebar ideal mobile: 80–120px

4. Mengatur Menu Navigasi di Header Blocksy

Menu adalah navigasi utama yang memudahkan pengunjung memahami struktur website.

Cara mengaturnya:

Masuk ke Appearance → Menus untuk membuat atau mengedit menu

Setelah selesai, kembali ke Customizer → Header

Klik elemen Menu 1

Pilih menu yang ingin ditampilkan

Blocksy juga memungkinkan customisasi seperti:

Menentukan alignment (kiri / tengah / kanan)

Memberi jarak antar menu

Memberi efek hover

Menampilkan dropdown dengan animasi

5. Menambahkan Tombol CTA (WhatsApp dll.)

Tombol CTA sangat penting untuk mendatangkan konversi.

Cara menambahkannya:

Tambahkan elemen Button pada header

Edit:

Atur posisi tombol dengan drag & drop

Hasilnya sangat clean dan profesional.

6. Menambahkan HTML Custom (Opsional)

Blocksy menyediakan elemen HTML yang dapat digunakan untuk:

Script WhatsApp API

Teks berjalan

Tombol custom berbasis kode

Nomor telepon statis

Badge promo

Cara penggunaannya:

Tambahkan elemen HTML

Masukkan kode HTML/shortcode

Tambahkan CSS jika diperlukan

Contoh HTML button:

<a href="https://wa.me/628xxxx" class="btn-wa">Chat WhatsApp</a>

7. Menyesuaikan Header Mobile di Theme Blocksy

Keunggulan Blocksy adalah pengaturan mobile yang benar-benar terpisah dari desktop sehingga jauh lebih fleksibel.

Cara mengedit tampilan mobile:

Klik ikon Mobile View pada Customizer

Atur ulang layout header khusus untuk mobile

Sesuaikan ukuran logo

Pastikan tombol WhatsApp tetap terlihat jelas

Gunakan menu hamburger (trigger) agar tidak memakan tempat

Tips mobile:

Sederhanakan tampilan

Hapus elemen tidak penting

Buat tombol CTA lebih besar agar mudah diklik

8. Simpan & Uji Tampilan Header

Setelah selesai:

Klik Publish

Refresh website

Cek di:

Pastikan semuanya tampil rapih tanpa bergeser.

Tips Profesional untuk Membuat Header Blocksy Lebih Menarik

Gunakan warna maksimal 3 tone agar tidak terlalu ramai

Atur spacing yang cukup agar tampilan lebih elegan

Gunakan sticky header jika halaman website panjang

Letakkan tombol CTA di area kanan atas

Pastikan kontras warna background dan teks baik

Header yang bersih = website terlihat mahal & profesional.

Kesimpulan

Blocksy adalah theme WordPress yang sangat fleksibel dan memudahkan pengguna dalam mengatur header tanpa coding. Dengan Header Builder-nya, kamu dapat:

Mengganti logo

Mengatur menu navigasi

Menambahkan tombol WhatsApp atau Simulasi Kredit

Menambahkan elemen HTML

Menyesuaikan tampilan mobile

Dengan pengaturan yang tepat, kamu bisa membuat header website terlihat profesional, rapi, dan meningkatkan pengalaman pengguna.