7 Tahap Mudah Mengganti Header WordPress Untuk Pemula

Dengan fitur Live Preview bawaan WordPress, Anda bisa mengganti desain Header WordPress dengan mudah. Meskipun Anda belum tahu sama sekali tentang header website.

Ingat… Pada beberapa SUB-BAB sebelumnya (lihat Pintasan Panduan), Saya sudah jelaskan cara mengganti tema, membuat logo dan favicon hingga membuat menu.

Naah.. jika Anda belum tahu apa itu header, mari kita pelajari dahulu..

Ketahui Dahulu, Apa itu Header Website

Header itu merupakan bagian paling atas dari sebuah halaman website. Umumnya berisi Logo dan Menu Navigasi seperti ini:

Namun, terkadang beberapa pemilik website juga menampilkan iklan atau promosi dari layanan meraka pada bagian header, seperti ini:

Semua tema website WordPress pasti memiliki bagian header ini. Namun, bisa saja berbeda antara tema A dan tema B.

Ada tema yang menyediakan header tunggal seperti tema default WordPress Twenty Twenty-One.

Namun beberapa tema WordPress lainnya juga ada yang membagi header menjadi 3 section menjadi Above Header, Main Header, dan Below Header seperti tema Astra. Ketiga bagian ini tetap saja disebut dengan Header.

Note: Penamaan setiap section Header dari masing-masing theme bisa saja berbeda-beda. Tapi tujuannya tetap sama. Ada juga yang memberikan nama Top, Main dan Bottom Header. Jadi sesuaikan saja dengan theme Anda ya…

Dengan adanya 3 section dalam bagian header ini, Saya yakin Anda bisa membuat tampilan website yang keren.

Nah… sekarang kan sudah tahu nih header website itu ada dibagian mana… Selanjutnya, coba kita ganti desain header ini biar jadi lebih menarik.

Cara Mengganti Desain Header WordPress

Anda bisa melakukan 7 tahap mudah ini untuk mengganti desain header website yang menggunakan WordPress:

1. Login ke Dashboard Admin WordPress.
2. Gunakan Fitur Live Preview.
3. Buka Menu Header Builder.
4. Tambahkan Element ke dalam Header.
5. Sesuaikan Posisi Element Dalam Header.
6. Edit Setiap Element.
7. Sesuaikan Masing-Masing section.

Ke 7 tahap ini bisa Anda lakukan dengan mudah. Sangat mudah…

Coba praktikkan…

#1 Login ke Dashboard Admin WordPress

Umumnya menggunakan URL https://namadomain.com/wp-admin/. Namun jika Anda belum tahu caranya, silahkan kunjungi SUB-BAB Login Dashboard Admin WP.

#2 Gunakan Fitur Live Preview

Dalam dashboard Admin WordPress, silahkan buka menu Tampilan > Sesuaikan.

Atau juga bisa dengan cara klik Sesuaikan pada admin bar ketika mengunjungi salah satu halaman website Anda.

#3 Buka Menu Header Builder

Dalam tampilan Live Preview, pilih menu header builder.

Lihat, ada 3 section header. Dibagian inilah Anda bisa menambahkan element-element tertentu seperti Logo ke bagian Header.

#4 Tambahkan Element kedalam Header

Klik bagian header yang kosong untuk menambahkan element ke bagian header seperti gambar berikut:

Pilih element yang Anda butuhkan. Misalnya Saya ingin menambahkan Icon Pencarian tepat disamping Menu Navigasi. Silahkan klik element tersebut.

Note: Dalam Demo Site ID Blog, Saya hanya menggunakan 3 element pada bagian Main Header yaitu Site Identity dan Logo, Menu Utama, dan Pencarian.

Untuk website berupa blog, Saya rasa ke 3 elemen ini sudah lebih dari cukup. Namun Anda tetap bisa menambahkan elemen lainnya jika dibutuhkan.

#5 Sesuaikan Posisi Element Dalam Header

Sebetulnya menyesuaikan posisi element dalam header sangat mudah. Cukup Klik-Tahan Element yang akan dipindahkan. Kemudian Tarik-Lepas ke bagian yang Anda inginkan.

Sambil mengubah tampilan header, perhatikan pula bahwa live preview akan selalu berubah. Jadi Anda bisa tahu seperti apa hasil yang akan didapatkan sebelum menerapkan perubahan.

#6 Edit Setiap Element

Untuk mengubah tampilan setiap elemen dalam header, silahkan klik elemen tersebut. Kemudian sesuaikan beberapa pengaturan yang tersedia seperti design dll.

Misalnya untuk animasi Hover Zoom menu yang ada pada Demo Site ID Blog. Ubah pengaturan seperti ini:

1. Klik Element Menu Utama.
2. Pada Tab Design, ubah Menu Hover Style menjadi Zoom in.
3. Tentukan Animasi untuk Submenu. Saya menggunakan Geser turun.
4. Gunakan border masing-masing 1px. Ini untuk border yang mengelilingi Submenu.
5. Sedangkan untuk Radius Tepi, Saya menggunakan 15px. Ini untuk lengkungan border disetiap sudut (seperti gambar).

Sementara untuk pengaturan lainnya, ubah sesuka hati Anda. Atau biarkan default saja.

#7 Sesuaikan Masing-Masing Section Dalam Header

Jika dibutuhkan, Anda bisa menggunakan lebih dari 1 section header. Jadi jika ingin menggunakan Above Header (Top Header), silahkan masukkan elemen yang Anda inginkan.

Misalnya Saya menggunakan Element HTML 1 dan Secondary Menu. Ini hasilnya:

Jangan lupa atur masing-masing Element.

Sementara untuk mengubah desain tampilan masing-masing section, silahkan klik icon roda gigi (pengaturan) pada masing-masing section.

Ini akan membuka menu pengaturan section dalam header. Silahkan sesuaikan dengan selera Anda.

Sesuaikan Header Untuk Masing-Masing Perangkat (Desktop, Tablet, & Mobile)

Beberapa theme WordPress memberlakukan desain dan tampilan yang berbeda untuk perangkat Desktop, Tablet, dan Mobile (salah satunya theme Astra).

Jadi Anda harus menyesuaikan element-element apa saja yang akan diletakkan pada header Tablet dan Mobile.

Caranya cukup klik icon tablet / mobile pada window Live Preview seperti gambar berikut:

Lihat, pada Above Header Section, Saya hanya menggunakan 1 element yaitu Secondary Menu.

Sedangkan pada Main Header Section, Saya tetap menggunakan 3 element yang sama. Namun Saya mengubah posisi element tersebut menjadi Pencarian > Site Identity & Logo > Toggle Button.

1 Lagi yang penting… Theme Astra memberikan fitur tambahan untuk perangkat Tablet dan Mobile, yaitu Off Canvas Section.

Theme lain mungkin memberikan nama yang berbeda, misalnya Mobile Menu.

Section ini umumnya digunakan untuk menu navigasi. Tapi Anda juga bisa menambahkan elemen lain seperti HTML, Widget dll. Boleh lebih dari 1 element.

Section Off Canvas akan muncul setelah klik Icon Menu yang ada di header (icon menu ini merupakan element Toggle Button).

Penting! Pada SUB-BAB Menu, Saya sudah bahas tentang pembuatan Menu Utama hingga Off Canvas (Lihat Pintasan Panduan).

Selain itu, Anda juga bisa mengubah desain tampilan dari Off Canvas Section ini. Caranya sama saja dengan mengubah desain section header lainnya.

1 hal yang perlu Anda perhatikan…

Atur semua element agar tampak bagus pada perangkat Tablet dan Mobile. Jadi manfaatkan baik-baik fitur Live Preview ini.

Saya rasa sampai disini saja panduan tentang Mengganti Desain Header Website WordPress. Jadi selamat berkreasi… Buatlah desain yang keren sesuai dengan selera Anda.

Next… Silahkan lanjut ke SUB-BAB berikutnya. Gunakan Pintasan Panduan berikut: