Header merupakan bagian utama website yang menjadi fokus pengunjung pertama kali pada saat mengunjungi website. Header menggambarkan identitas dan deskripsi dari web. Header dalam kaitannya dalam pembuatan website terdiri dari beberapa elemen seperti logo,slogan, menu navigasi. Selain itu ada juga yang menambahkan beberapa informasi seperti link social media, no kontak, email, dll. Dalam mendesain header tidak boleh asal-asalan.
Coba perhatikan header website Anda. Sudah puaskah dengan tampilan menu header yang ada di website Anda? Supaya lebih menarik Anda bisa menambah Link Button pada salah satu item menu Header supaya pengunjung bisa tertarik untuk mengklik link tersebut.
BACA JUGA: Cara Mengatasi Secure Connection Error di WordPress
Untuk itulah Link button di menu Header perlu dibuat dengan desain yang menarik. Untuk mendesain link button, kita bisa manambahkan CSS (Cascade Sheet Style) pada website.
Apa itu Menu Header?
Menu Header adalah menu yang terletak pada area header. Menu Header biasanya menjadi menu utama dari sebuah website. Menu utama ini menjadi hal penting yang akan pertama kali dilihat dan mudah digunakan oleh pengunjung untuk menelusuri semua halaman dan postingan pada website . Oleh karena itu membuat menu header menjadi hal penting yang perlu dipertimbangkan terutama dalam hal desain dan struktur navigasinya.
Kebanyakan web developer meletakkan menu utama dibagian header. Area header untuk meletakkan menu utama dikenal sebagai Primary Menu. Selain Primary menu, pada header terkadang kita jumpai juga Top Menu. Top menu ini biasanya ditempatkan di atas Header. Top menu digunakan untuk meletakkan menu menu lainnya.
Pada artikel ini kita akan belajar membuat button menu untuk item menu di Primary menu. Misalkan pada area Primary menu ada beberapa item menu sebagai contoh: Home,Kontak, My account. Nah misalkan Anda ingin menghighlight menu My account menjadi Button.
Prinsip dasar pembuatan Link Button pada Menu Header
Prinsip dasarnya adalah membuat menu class pada item menu dengan nama unik dan menambahkan properti css atributnya pada menu class seperti background-color, color, background-radius, a:hover, dll.
Dalam pemberian nama item menu class tidak boleh sama dengan yang sudah ada di template. Anda bisa buat nama unik sendiri.
Nama unik ini akan digunakan untuk membedakan menu class item menu yang diedit dengan item menu lainya
Cara membuat Link Button di Menu Header
Ayoo kita mulai belajar membuat secara detilnya.
Login ke area dashboard wordpress website Anda
Selnjutnya pilih menu Appearance >> pilih submenu Menu
Pada jendela Menu, pilihlah nama Kelompok Menu yang berisi item menu yang digunakan untuk menu Header. Maka akan tampil item-item menu yang terdapat didalamnya.
Aktifkan Menu Class pada bagian Options.
Jika sudah aktif maka jika item menu di klik maka akan keluar opsi tambahan CSS Classes.
Berikan nama unik pada CSS Classes pada menu item yang anda pilih. Sebagai contoh: button-myaccount
Selanjutnya klik pada tombol Save Menu untuk menyimpan settingan item menu.
Langkah terakhir adalah menambahkan atribut CSS pada template yang aktif .
Pilih menu Apperance >> pilih submenu Customize
Pada jendela navigasi Customize pilih Additional CSS.
Tambahkan Atribut css dari menu class yang sudah dibuat sebelumnya.
Contohnya:
/* Style button-myaccount */
.button-myaccount {
background-color:#EE5D26;
}
.button-myaccount a, .button-myaccount a:hover {
color: #FFFFFF !important;
}
Jika sudah selesai klik tombol “Publish” untuk menyimpan atribut css dan nilainya.
Cobalah Refresh website Anda. Maka tampilan item menu “My account” akan menjadi Button.
BACA: Tips Menduplikasi Widget Dengan Cepat
Demikian cara membuat link button pada menu Header. Adanya link button pada menu Header akan menambah tampilan menu menjadi lebih menarik dan mengajak pengunjung untuk fokus dan mengklik pada item menu tersebut.
Untuk lebih paham dan mahir dalam menggunakan css, anda bisa belajar css di W3Schools
