Cara Mendesain Menu Navigasi WordPress

Apakah Anda ingin mendesain menu navigasi WordPress Anda untuk mengubah warna atau tampilannya? Sementara tema WordPress Anda menangani tampilan dan nuansa menu navigasi, Anda dapat dengan mudah menyesuaikannya dengan CSS untuk memenuhi kebutuhan Anda. Pada artikel ini, kami akan menunjukkan cara mendesain menu navigasi WordPress di situs web Anda.

Kami akan menunjukkan dua metode yang berbeda. Metode pertama adalah untuk pemula karena menggunakan plugin dan tidak memerlukan pengetahuan pengkodean apa pun. Metode kedua adalah untuk pengguna DIY menengah yang lebih suka menggunakan kode CSS daripada plugin.

Metode 1: Rancang menu navigasi WordPress menggunakan plugin

Tema WordPress Anda menggunakan CSS untuk mendesain menu navigasi. Banyak pemula tidak nyaman mengedit file tema atau menulis kode CSS sendiri.

Saat itulah plugin bergaya WordPress berguna. Ini menyelamatkan Anda dari mengedit file tema atau menulis kode apa pun.

Hal pertama yang harus Anda lakukan adalah menginstal dan mengaktifkan plugin CSS Hero. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara menginstal plugin WordPress.

CSS Hero adalah plugin WordPress premium yang memungkinkan Anda mendesain tema WordPress Anda sendiri tanpa menulis satu baris kode pun (tidak perlu HTML atau CSS). Lihat ulasan Pahlawan CSS kami untuk informasi lebih lanjut.

Pengguna WPBeginner dapat menggunakan kupon Pahlawan CSS ini untuk mendapatkan diskon 34% dari pembelian mereka.

Setelah aktivasi, Anda akan diarahkan untuk mendapatkan kunci lisensi Pahlawan CSS. Cukup ikuti petunjuk di layar dan Anda akan diarahkan ke situs web Anda dalam beberapa klik.

Selanjutnya, Anda perlu mengklik tombol Pahlawan CSS di bilah alat admin WordPress.

CSS Hero menyediakan editor WYSIWYG (apa yang Anda lihat adalah apa yang Anda dapatkan). Dengan mengklik tombol, Anda akan mengakses situs web Anda dengan bilah alat Pahlawan CSS yang mengambang di layar.

Anda harus mengklik ikon biru di bagian atas untuk mulai mengedit.

Setelah mengklik ikon biru, gerakkan mouse Anda ke menu navigasi Anda dan CSS Hero akan menyorotnya dengan menunjukkan batas di sekitarnya. Ketika Anda mengklik menu navigasi yang disorot, itu akan menunjukkan kepada Anda item yang dapat Anda edit.

Pada tangkapan layar di atas, ini menunjukkan kepada kita wadah menu navigasi atas. Katakanlah kita ingin mengubah warna latar belakang menu navigasi. Dalam hal ini, kami akan memilih navigasi teratas yang memengaruhi seluruh menu kami.

CSS Hero sekarang akan menunjukkan kepada Anda berbagai properti yang dapat Anda edit seperti teks, latar belakang, batas, margin, isi, dll.

Anda dapat mengklik properti mana pun yang ingin Anda ubah. CSS Hero akan menunjukkan antarmuka sederhana tempat Anda dapat membuat perubahan.

Pada tangkapan layar di atas, kami telah memilih latar belakang dan itu menunjukkan kepada kami antarmuka yang bagus untuk memilih warna latar belakang, gradien, gambar, dan lainnya.

Saat Anda membuat perubahan, Anda dapat melihatnya langsung di pratinjau tema.

Bila Anda puas dengan perubahan, klik tombol Simpan pada toolbar Pahlawan CSS untuk menyimpan perubahan.

Hal terbaik tentang menggunakan metode ini adalah Anda dapat dengan mudah membatalkan perubahan apa pun yang Anda buat. CSS Hero menyimpan riwayat lengkap dari semua perubahan Anda dan dapat datang dan pergi di antara mereka.

Metode 2: Rancang menu navigasi WordPress Anda sendiri

Metode ini mengharuskan Anda untuk menambahkan CSS khusus secara manual dan ditujukan untuk pengguna perantara.

Menu navigasi WordPress ditampilkan dalam daftar yang tidak berurutan (bullet list).

Biasanya jika Anda menggunakan tag menu default WordPress, itu akan menampilkan daftar tanpa kelas CSS yang terkait.

Daftar tidak berurutan Anda akan memiliki nama kelas “menu” dengan setiap item daftar memiliki kelas CSS sendiri.

Ini mungkin berhasil jika Anda hanya memiliki satu lokasi menu. Namun, sebagian besar tema memiliki beberapa lokasi tempat Anda dapat menampilkan menu navigasi.

Menggunakan hanya kelas CSS default dapat menyebabkan konflik dengan menu di lokasi lain.

Inilah sebabnya mengapa Anda perlu mendefinisikan kelas CSS dan posisi menu. Kemungkinan, tema WordPress Anda sudah melakukan ini dengan menambahkan menu navigasi dengan kode seperti ini: