Cara Menambahkan Tombol di Menu Header Website Anda

Bagikan

Cara Menambahkan Tombol

Apakah Anda ingin menambahkan tombol di menu header Website Anda?

Menambahkan tombol di menu navigasi header memungkinkan Anda membuat ajakan bertindak yang lebih terlihat. Itu bisa mendapatkan lebih banyak klik ke halaman Anda serta membantu para pengguna untuk mengambil tindakan selanjutnya.

Pada artikel ini, kami akan menunjukkan cara mudah menambahkan tombol ke menu header Website Anda.

Mengapa Harus Menambahkan Tombol di Menu Header WordPress?

Menu navigasi Website biasanya berupa tautan teks biasa yang semuanya terlihat sama. Dalam hal desain, semua tautan diberikan kepentingan dan bobot yang sama.

Cara Menambahkan Tombol

Bagaimana jika Anda ingin menambahkan link ke formulir pemesanan online, link halaman login atau sign up, atau link beli sekarang? Ajakan bertindak penting ini akan terlihat seperti tautan lainnya di menu header.

Mengubah tautan penting di menu navigasi Website Anda menjadi tombol akan membuatnya lebih terlihat. Ini membantu pengguna menemukan mereka dengan mudah, meningkatkan keterlibatan dan pengalaman mereka di situs web Anda.

Cara Menambahkan Tombol

Secara default, Website memiliki opsi untuk menambahkan tombol di posting dan halaman Website menggunakan blok Buttons. Namun, itu tidak memiliki opsi bawaan untuk menambahkan tombol di menu navigasi.

Untungnya, ada peretasan mudah untuk mengubah tautan apa pun di menu navigasi Website Anda menjadi tombol.

Karena itu, mari kita lihat cara menambahkan tombol di menu header Website Anda tanpa menginstal plugin.

Menambahkan Tombol di Menu Header Website Anda

Pertama, Anda perlu menambahkan link tautan yang ingin Anda ubah menjadi tombol ke menu navigasi Website Anda.

Cukup buka halaman Appearance »Menus di dasbor Website Anda dan tambahkan tautan ke menu navigasi Anda.

Cara Menambahkan Tombol

Setelah itu, Anda perlu mengklik tombol Opsi Layar di bagian atas. Anda perlu mencentang kotak di sebelah opsi ‘CSS Classes’.

Sekarang, gulir ke bawah ke menu Anda dan klik untuk memperluas item menu yang ingin Anda ubah menjadi tombol.

Anda akan melihat opsi kelas CSS baru di pengaturan item menu. Di sini, Anda perlu memasukkan nama kelas. Anda dapat memanggil kelas CSS ini dengan nama unik apa pun yang Anda inginkan, tetapi demi tutorial ini kami akan menyebutnya tombol menu.

Setelah memasukkan nama, klik tombol ‘Save Menu’ untuk menyimpan perubahan Anda.

Sekarang kita telah menambahkan kelas CSS kustom kita sendiri ke item menu, kita dapat mendesainnya dengan menambahkan kode CSS kustom kita sendiri.

Cukup buka Appearance »Customize untuk meluncurkan penyesuai tema Website.

Anda sekarang akan melihat pratinjau langsung situs web Anda di sebelah kanan dan banyak pengaturan tema di kolom kiri.

Sekarang Anda perlu mengklik tab CSS tambahan untuk memperluasnya. Ini akan menunjukkan kepada Anda sebuah kotak di mana Anda dapat menambahkan kode CSS khusus Anda.

Di sini, Anda dapat menyalin dan menempelkan kode CSS berikut sebagai titik awal.

Segera setelah Anda menambahkan kode CSS, penyesuai tema akan secara otomatis menerapkannya ke pratinjau situs web Anda, dan Anda akan dapat melihat perubahan yang diterapkan.

Jangan khawatir, perubahan tidak akan ditampilkan di situs web Anda sampai Anda mengklik tombol Terbitkan.

Jangan ragu untuk bermain-main dengan CSS sebanyak yang Anda suka. Anda dapat mengubah warna latar belakang, warna teks tautan, menambahkan batas, dan banyak lagi.

Jangan lupa klik tombol Publish untuk menyimpan perubahan Anda.

Bukankah ini mudah?

Anda dapat menggunakan trik ini untuk tidak hanya menambahkan tombol ke menu header Anda, tetapi Anda juga dapat menggunakannya untuk menyorot tautan apa pun di menu navigasi Website Anda.

Kami harap artikel ini membantu Anda mempelajari cara menambahkan tombol di menu header WordPress Anda.

Jika Anda menyukai artikel ini, silakan berlangganan di Website kami untuk terus mendapatkan update panduan terbaik yang kami sediakan. Semoga bermanfat!

Subscribe & Dapatkan Info Lainnya

WEBZID DEVELOPER

Berita Terkait