Cara Mengubah Warna Menu Di WordPress
Anda telah menyesuaikan desain tema WordPress Anda, mengubah font, warna, gambar, dan lainnya tetapi tidak dapat menemukan cara untuk mengubah warna menu di WordPress.
Jika situasi ini terdengar familier, Anda tidak sendirian. Sebagian besar tema WordPress tidak memberi Anda opsi untuk mengedit warna yang digunakan di menu. Dan terkadang, hal itu dapat merusak branding seluruh desain situs web Anda.
Untungnya, ada cara untuk mengedit desain menu dan mengubah warnanya. Dalam posting ini, kami akan menunjukkan kepada Anda bagaimana melakukannya dalam beberapa langkah mudah.
Lebih baik lagi, kami bahkan akan menunjukkan kepada Anda cara menambahkan tautan ke menu Anda, mengubah font menu, dan menyesuaikan menu seluler. Teruskan membaca untuk mengetahui caranya.
Cara Mengedit Menu di WordPress
Anda dapat dengan mudah mengedit menu WordPress Anda langsung dari dasbor admin. Jika Anda hanya ingin menambahkan kategori, halaman, atau link baru ke menu Anda, berikut caranya.
Cara Menambahkan Tautan Khusus ke Menu WordPress
Saat Anda menambahkan kategori atau halaman ke menu situs web Anda di WordPress, Anda tidak dapat mengubah namanya. Ini bisa menjadi masalah jika Anda memiliki kategori dengan judul yang panjang.
Solusi yang bagus untuk masalah ini adalah dengan membuat tautan khusus. Dengan begitu Anda dapat memberi judul tautan sesuka Anda.
Pertama, buka Penampilan >> Menu lalu pilih Tautan Khusus.
Masukkan URL untuk tautan khusus, tambahkan teks tautan, dan klik Tambahkan Ke Menu.
Cara Menambahkan Kategori ke Menu WordPress
Cara kerja menambahkan kategori atau halaman ke menu juga sama.
Cukup beralih ke bagian Kategori atau Halaman. Centang kotak di samping item dan klik Tambahkan Ke Menu tombol.
Cara Mengubah Warna Latar Menu di WordPress
Mengubah warna latar belakang menu membutuhkan sedikit usaha. Anda juga akan bekerja dengan beberapa kode CSS.
Ini proses yang sederhana. Namun, untuk amannya, kami menyarankan Anda mencadangkan file tema Anda. Anda dapat mengunduh file tema melalui FTP atau menggunakan plugin untuk mencadangkan situs web ke penyimpanan cloud.
Langkah 1: Temukan ID CSS
Langkah pertama untuk mengedit gaya untuk menu adalah menemukan kode ID CSS untuk menu dan tajuk tema Anda.
Untuk melakukan ini, cukup muat situs web Anda di Chrome atau Firefox. Lalu arahkan kursor mouse Anda ke menu. Sekarang, klik kanan dan pilih Memeriksa.
Di sini Anda akan dapat melihat sebaris kode yang berbunyi seperti
Dalam contoh ini, kami menggunakan tema WordPress Twenty Twenty default. ID untuk header dan menu akan berbeda dari satu tema ke tema lainnya. Jadi, Anda harus menemukannya sendiri. Atau hubungi pengembang tema Anda dan tanyakan kepada mereka.
Langkah 2: Tentukan Warna Latar Belakang Menu
Setelah Anda menemukan ID untuk header, Anda dapat melanjutkan dan menyesuaikan warna latar belakang.
Untuk melakukan ini, Anda harus menambahkan kode CSS khusus ke situs web Anda.
Pergi ke Penampilan >> Sesuaikan dan pilih CSS tambahan lalu salin-tempel kode berikut di kotak kode CSS.
# site-header {
warna-latar belakang: # DD33FF;
}
Pastikan untuk mengedit kode ID dengan ID dari tema Anda. Dan untuk mengubah kode warna Hex dengan warna pilihan Anda. Anda dapat menemukan kode warna hex menggunakan alat ini.
Langkah 3: Ubah Warna Tautan Menu
Anda akan melihat bahwa ini mengubah warna untuk seluruh bagian header. Ini pendekatan terbaik untuk mengubah desain.
Jika Anda juga ingin mengubah warna tautan, salin-tempel kode berikut di bagian CSS Tambahan Anda.
# site-header li a {
warna: #fff;
}
Tentu saja, Anda harus menyesuaikan kode dengan tag ID yang digunakan oleh tema Anda.
Langkah 4: Ubah Warna Latar Belakang Menu Seluler
Anda juga harus mengubah warna menu versi seluler secara manual.
Ikuti langkah yang sama seperti di atas untuk menemukan kode ID untuk menu seluler. Biasanya sesuatu seperti .mobile-menu atau .responsive-menu. Dan kemudian gunakan kode berikut untuk mengubah warna latar belakang.
.mobile-menu {
warna-latar belakang: # DD33FF;
}
Cara Mengubah Font Menu di WordPress
Anda juga dapat mengubah fonta yang digunakan di menu dengan font yang sama sekali berbeda. Begini caranya.
Langkah 1: Pilih Font Google
Pertama, buka Google Fonts dan temukan font yang ingin Anda gunakan.
Kemudian salin kode semat HTML dan aturan CSS-nya.
Langkah 2: Sematkan Font
Kembali ke dasbor admin WordPress dan buka Penampilan >> Editor Tema.
Edit Header Tema (header.php) file dan tempel kode semat HTML font tepat sebelum penutupan menandai.
Klik Menyimpan tombol untuk menyimpan perubahan.
Langkah 3: Tentukan Font Menu Baru di CSS
Sekarang buka tema Anda Penyesuai >> CSS Tambahan bagian. Dan copy-paste kode berikut untuk mengubah font yang digunakan di menu.
.menu-item {
font-family: ‘Cinzel’, serif;
}
Pastikan untuk menyesuaikan aturan font dengan yang Anda salin dari halaman Google Fonts.
Cara Menginstal Menu WordPress Kustom
Jika Anda menginginkan pendekatan yang lebih mudah dan ramah pemula, Anda dapat menggunakan plugin untuk sepenuhnya mengubah desain menu Anda.
Ada plugin gratis seperti Menu Groovy dan Menu Mega Maks yang memungkinkan Anda menyiapkan menu khusus di WordPress dengan beberapa klik.
Misalnya, plugin Groovy Menu memungkinkan Anda untuk dengan mudah menyesuaikan gaya menu Anda dan mengubah warnanya dengan lebih mudah. Ini jauh lebih mudah daripada mengedit kode tema Anda.
Ada juga banyak plugin menu premium yang memberi Anda lebih banyak desain dan fitur menu khusus untuk dipilih. Anda dapat merujuk ke cara kami membuat panduan menu untuk instruksi terperinci.
Kesimpulan
Jangan mengabaikan pentingnya menciptakan pengalaman bermerek untuk audiens Anda. Mengedit menu untuk mengubah warna mungkin tampak seperti tugas yang sederhana, tetapi itu akan sangat membantu dalam meningkatkan pengalaman pengguna.
Jika Anda mengalami masalah dalam meningkatkan desain situs web Anda, mungkin inilah saatnya untuk meningkatkan dan beralih ke tema yang terlihat lebih baik. Lihat paket tema eksklusif kami untuk mengunduh lebih dari 60 tema WordPress premium dengan harga satu.
.
