Menambahkan tombol di menu navigasi header

Menu navigasi header adalah WordPress adalah bagian dari real estat situs web yang sering tidak digunakan. Meskipun sebagian besar pengelola web menggunakannya hanya untuk navigasi, Anda juga dapat menambahkan bilah pencarian atau bahkan konten promosi. Namun, untuk melakukannya secara efektif, Anda harus mempertimbangkan untuk menambahkan tombol di menu navigasi header . Dalam artikel ini kami akan menguraikan mengapa melakukannya bermanfaat, dan bagaimana melakukannya dengan benar.

Manfaat menambahkan tombol di menu navigasi header

Memiliki tombol di menu navigasi header mungkin terlihat sepele. Lagi pula, tampaknya tidak ada banyak perbedaan antara hyperlink standar, dan tombol. Sebenarnya, memiliki tombol alih-alih teks biasa dapat memberikan hasil yang mengejutkan . Ini sebagian besar disebabkan oleh cara kerja perhatian manusia, dan betapa menonjolnya tombol Anda.

Bagaimana orang biasanya mengalami menu navigasi header

Menu navigasi header biasanya menjadi hal kedua yang diperhatikan orang. Jika Anda telah merancang situs web Anda dengan baik dan menambahkan menu navigasi dengan benar, judul posting Anda harus menjadi hal pertama yang menarik perhatian pemirsa. Tapi, setelah itu, pandangan mereka secara alami harus menuju ke menu navigasi untuk melihat apa yang tersedia. Jika mereka memutuskan untuk tetap berada di halaman saat ini, biarlah. Tapi, jika ada tempat menarik lain di situs web Anda, itu harus terlihat jelas di menu navigasi header.

Lagi pula, tujuan Anda adalah membuat orang-orang bertahan selama mungkin di situs web Anda . Dan memiliki menu yang mudah dipahami dapat sangat membantu. Jadi, dari mana tombol datang dalam semua ini?

Manfaat menambahkan tombol

Ide utama menambahkan tombol adalah untuk menekankan sesuatu yang penting. Meskipun menu header memang berisi tautan yang menarik, tidak semuanya memiliki kepentingan yang sama. Beberapa adalah alat navigasi sederhana untuk membantu membaca. Dan lainnya adalah konten promosi yang lebih langsung, yang berfungsi untuk memandu pembaca Anda menuju konversi. Nah, untuk konten yang terakhir, tombol harus menjadi pilihan utama Anda . Karena Anda dapat mengubahnya dengan cara apa pun yang Anda inginkan, mereka secara alami akan menonjol dan menarik perhatian. Jadi, jika Anda memahami perjalanan pelanggan Anda melalui situs web Anda, Anda dapat dengan mudah menggunakan tombol untuk menarik mereka ke media sosial, atau ke konversi yang berhasil.

Kiat penyesuaian

Menyesuaikan tombol Anda untuk memiliki efek yang tepat bisa sedikit rumit. Di satu sisi, Anda tidak ingin mereka terlalu menonjol karena akan merusak tampilan halaman web. Tapi, Anda juga tidak ingin mereka berbaur terlalu banyak karena mereka tidak akan menarik perhatian. Jadi, yang perlu Anda temukan adalah jalan tengahnya, yang lebih mudah diucapkan daripada dilakukan. Saran kami adalah mencari situs web yang berhasil menggunakan tombol di menu navigasi header mereka dan melihat bagaimana mereka menggunakan warna. Ingat, Anda dapat mengubah bentuk, garis luar, font, dan warna tombol Anda. Jadi, gunakan variasi ini dalam penyesuaian untuk keuntungan Anda. Idealnya, Anda akan menemukan gaya yang cocok dengan keseluruhan estetika situs web Anda . Sambil juga menarik perhatian.

Bagaimana cara menambahkan tombol di menu navigasi header

Untungnya, menambahkan tombol di menu navigasi header WordPress sangat mudah. Pertama, Anda harus menuju ke menu navigasi dan menambahkan tautan yang ingin Anda ubah menjadi tombol. Anda dapat melakukannya di halaman Appearance -> Menu . Setelah Anda selesai melakukannya, klik tombol Opsi Layar di dekat bagian atas. Dengan demikian Anda akan mendapatkan menu fly-down dengan beberapa pilihan. Untuk kasus ini, Anda hanya perlu mencentang opsi 'CSS Classes' .

Setelah Anda melewati ini, gulir ke bawah dan klik pada item menu yang ingin Anda ubah menjadi tombol. Di sana Anda akan mendapatkan opsi kelas CSS baru di pengaturan item. Di dalamnya, Anda dapat memasukkan nama kelas. Secara teoritis, Anda dapat memberi nama kelas Anda dengan cara apa pun yang Anda inginkan. Namun, untuk artikel kali ini, kami akan memberikan nama class “menu-button” agar lebih mudah dipahami. Setelah Anda memasukkan nama Anda, ingatlah untuk mengklik tombol 'Simpan Menu' .

Menambahkan kode CSS

Setelah menambahkan kelas CSS khusus kami, kami dapat melanjutkan untuk menambahkan kode CSS. Di sini Anda harus pergi ke Appearance -> Customize dan luncurkan penyesuai tema WordPress. Dengan melakukan itu, Anda akan mendapatkan pratinjau situs web Anda, dan daftar pengaturan tema. Yang perlu Anda lakukan adalah mengklik tab CSS tambahan dan memperluasnya. Di sini Anda akan mendapatkan kotak tempat Anda dapat menambahkan kode CSS khusus Anda. Sebagai permulaan, kami sarankan Anda cukup menempelkan kode berikut:

.tombol menu {
warna latar:#eb5e28;
batas: 1 piksel;
batas-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.menu-button a, .menu-button a:hover, .menu-button a:active {
warna:#fff !penting;
}

Setelah Anda menambahkan kode CSS, penyesuai tema akan menerapkannya ke pratinjau situs web Anda. Ini akan memungkinkan Anda untuk melihat perubahan yang telah Anda buat. Dan jangan khawatir, perubahannya tidak permanen. Jika Anda merasa perlu, lanjutkan dan bereksperimen dengan CSS dan lihat apa yang dapat Anda lakukan. Untuk menyimpan perubahan Anda, klik tombol Terbitkan.

Dan dengan ini, Anda selesai menambahkan tombol di menu navigasi header.

Pikiran terakhir

Semua hal dipertimbangkan, tombol bisa menjadi tambahan yang bagus untuk menu header Anda. Tapi, yang terpenting adalah Anda menemukan desain yang tepat . Faktanya, salah satu alasan utama mengapa orang menghindari menambahkan tombol adalah karena mereka tidak dapat menyesuaikan tombol dengan desain situs web. Jika Anda buntu, kami sangat menyarankan agar Anda berkonsultasi dengan desainer grafis profesional dan menghargai masukan mereka. Seperti yang Anda lihat, tidak perlu banyak menambahkan tombol, setelah Anda mengetahui desainnya.