Cara Menambahkan Tombol di Menu Header WordPress Anda

Cara Menambahkan Tombol di Menu Header WordPress Anda

Apakah Anda ingin menambahkan tombol di menu header WordPress Anda?

Menambahkan tombol di menu navigasi header memungkinkan Anda membuat ajakan bertindak yang lebih terlihat. Itu bisa mendapatkan lebih banyak klik ke halaman Anda yang paling penting dan menciptakan pengalaman pengguna yang lebih baik dengan membantu pengunjung Anda mengambil tindakan.

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

Menambahkan tombol di menu navigasi WordPress

Mengapa Menambahkan Tombol di Menu Header WordPress?

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

Menu navigasi tajuk dengan tautan biasa

Bagaimana jika Anda ingin menambahkan hyperlink ke formulir pemesanan on-line, hyperlink halaman login atau join, atau hyperlink beli sekarang? Ajakan bertindak penting ini akan terlihat seperti tautan lainnya di menu header.

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

Menu navigasi dengan tombol

Secara default, WordPress memiliki opsi untuk menambahkan tombol di posting dan halaman WordPress 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 WordPress Anda menjadi tombol.

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

Menambahkan Tombol di Menu Header WordPress Anda

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

Cukup pergi ke Penampilan » Menu halaman di dasbor WordPress Anda dan tambahkan tautan ke menu navigasi Anda.

Tambahkan tautan ke menu WordPress

Setelah itu, Anda perlu mengklik tombol Opsi Layar di bagian atas. Ini akan mengungkapkan menu terbang ke bawah dengan banyak opsi. Anda perlu mencentang kotak di sebelah opsi ‘Kelas CSS’.

Tampilkan kelas CSS di Opsi Layar

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

Tambahkan kelas CSS khusus ke tautan

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

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

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

Cukup pergi ke Penampilan » Sesuaikan untuk meluncurkan penyesuai tema WordPress.

Sekarang Anda akan melihat pratinjau langsung situs internet Anda di sebelah kanan dan sekumpulan pengaturan tema di kolom kiri.

Opsi CSS tambahan di penyesuai tema WordPress

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.

.menu-button  
background-color:#eb5e28;
border:1px;
border-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:lively  
coloration:#fff !vital;

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

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

Pratinjau tombol menu

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 Submit 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 WordPress Anda.

Kami harap artikel ini membantu Anda mempelajari cara menambahkan tombol di menu header WordPress Anda. Ingin melihat bagaimana pengguna berinteraksi dengan tombol Anda? Lihat panduan kami tentang cara melacak tingkat konversi di WordPress. Selanjutnya, lihat daftar perangkat lunak obrolan langsung terbaik kami untuk bisnis kecil.

Jika Anda menyukai artikel ini, silakan berlangganan Saluran YouTube kami untuk instructional video WordPress. Anda juga dapat menemukan kami di Indonesia dan Fb.

Posting Cara Menambahkan Tombol di Menu Header WordPress Anda muncul pertama kali di WPBeginner.

Baca Juga : Jasa Seo Medan