Setelah membuat menu dan menambahkan tautan ke dalamnya, Anda mungkin ingin menyesuaikan tampilan menu tersebut. Panduan ini membahas berbagai perubahan umum yang dapat Anda lakukan pada desain menu.
Tema yang menggunakan Editor Situs memungkinkan Anda menyesuaikan desain menu situs sepenuhnya melalui Editor di bawah Tampilan di Dasbor Anda. Tema klasik memiliki pilihan desain menu yang terbatas, yang tersedia di Customizer di bawah Tampilan di Dasbor Anda.
Untuk mengetahui bagian panduan yang perlu Anda ikuti, kunjungi Dasbor WordPress.com Anda dan periksa di bawah Tampilan di sisi kiri. Jika Anda melihat Editor, gunakan bagian Editor Situs dari panduan ini. Jika tidak, gunakan petunjuk Customizer .
Jika tema Anda menggunakan Editor Situs (yaitu, ada Tampilan → Editor di Dasbor), Anda dapat mengatur desain menu melalui pengaturan blok Navigasi dengan mengikuti langkah-langkah berikut:
- Dari Dasbor situs Anda, buka Tampilan → Editor.
- Pilih Template, lalu pilih template yang berisi menu Anda, misalnya Beranda atau Halaman Depan.
- Buka Tampilan Daftar di sudut kiri atas layar Anda, yaitu ikon yang terlihat seperti tiga garis horizontal yang bertumpuk.
- Pilih blok Navigasi di Tampilan Daftar.
- Jika Anda tidak melihat blok Navigasi, Anda dapat membuatnya.
- Lihat pengaturan blok Navigasi di sisi kanan layar.
- Sesuaikan gaya blok Navigasi melalui ikon pengaturan atau ikon gaya.
- Klik tombol Simpan untuk menyimpan perubahan.
Pelajari cara menggunakan setiap pengaturan di panduan pengaturan blok Navigasi kami, termasuk:
- Gaya blok Navigasi, seperti warna, tipografi, dan dimensi.
- Pengaturan tata letak blok Navigasi, seperti perataan, orientasi, dan tampilan menu.
Video tutorial ini menunjukkan cara mengakses blok Navigasi serta mengubah pengaturan dan gayanya. Fungsionalitas ini tersedia di tema Editor Situs kami yang sepenuhnya dapat disesuaikan. Perlambat atau percepat video menggunakan kontrol di sudut kanan bawah setelah mengklik tombol Putar.
Bagian ini berlaku untuk situs yang dibuat dengan Pembuat Situs Web AI (semua paket berbayar) atau situs yang telah mengaktifkan Agen WordPress (semua paket berbayar). Buka Agen WordPress dengan mengklik ikon AI (bintang bersudut empat) di bawah layar.
Agen WordPress dapat membantu langsung mengubah tampilan dan perilaku menu Anda. Berikut beberapa hal yang dapat Anda minta:
- “Ubah warna menu navigasi saya agar sesuai dengan merek saya.”
- “Atur menu drop-down saya agar terbuka saat diklik, bukan saat hover.”
- “Tampilkan menu saya sebagai menu hamburger pada semua ukuran layar.”
- “Tambahkan kelas CSS bernama ‘featured-link’ ke item menu Kontak.”
Anda dapat memindahkan posisi menu di semua tema Editor Situs. Tema Editor Situs menggunakan Editor di Tampilan sehingga Anda dapat mengatur tata letak dengan leluasa, termasuk posisi menu situs Anda.
Meskipun posisi menu di tema Editor Situs sepenuhnya dapat disesuaikan, Anda mungkin ingin memulai dengan mencari tema yang menampilkan menu di posisi yang Anda suka. Pelajari lebih lanjut tentang mengganti tema.
Jika Anda sudah memilih tema Editor Situs yang ingin digunakan dan ingin mengubah posisi menu, ada beberapa pilihan:
- Pelajari cara memilih dan memindahkan blok Navigasi, atau langsung ke video tutorial tersebut.
- Tambahkan menu baru ke template Anda.
- Tambahkan navigasi situs ke halaman atau pos tertentu menggunakan blok Daftar Halaman.
- Tambahkan navigasi di dalam halaman atau pos menggunakan blok Daftar Isi.
Jika Anda menggunakan tema yang tidak memiliki Editor di bawah Tampilan di Dasbor, lihat tema Editor Situs kami yang sepenuhnya dapat disesuaikan.
Menu pada layar desktop biasanya muncul sebagai daftar tautan teks dalam satu baris. Pada layar yang lebih kecil (tablet dan perangkat seluler), mungkin tidak tersedia cukup ruang untuk menampilkan semua tautan teks agar pengunjung tetap dapat mengetuknya dengan mudah.
Sebagai gantinya, item menu biasanya disembunyikan di balik tombol yang disebut menu overlay atau menu hamburger, yang disebut demikian karena tiga garis horizontalnya menyerupai hamburger.
Dari pengaturan blok Navigasi di Editor Situs, Anda dapat mengatur bagaimana menu overlay ditampilkan. Ikuti langkah-langkah berikut untuk menyesuaikan tampilan menu overlay:
- Dari Dasbor situs Anda, buka Tampilan → Editor.
- Pilih Template, lalu pilih template yang berisi menu Anda, misalnya Beranda atau Halaman Depan.
- Buka Tampilan Daftar di sudut kiri atas layar Anda, yaitu ikon yang terlihat seperti tiga garis horizontal yang bertumpuk.
- Pilih blok Navigasi di Tampilan Daftar.
- Lihat pengaturan blok Navigasi di sisi kanan layar.
- Klik ikon Pengaturan (ikon roda gigi).
- Di bagian Display, pilih pengaturan untuk menu overlay:
- Seluler: Pengaturan asal. Menu overlay hanya muncul pada layar berukuran seluler.
- Nonaktif: Tidak menampilkan menu overlay sama sekali.
- Selalu: Menampilkan menu overlay setiap saat, terlepas dari ukuran layar.
- Dengan template overlay, Anda dapat menyesuaikan tampilan overlay layar penuh yang muncul di perangkat seluler. Lihat panduan kami tentang menyesuaikan overlay navigasi.
- Klik tombol “Simpan” untuk menyimpan perubahan.
Pengunjung situs umumnya sudah terbiasa melihat ikon atau menu hamburger di perangkat seluler. Menampilkan menu desktop, yaitu menonaktifkan menu overlay, dapat menyulitkan pengunjung untuk bernavigasi di situs Anda pada perangkat seluler.
Kunjungi panduan blok Navigasi untuk mempelajari cara menggunakan semua fitur blok ini.
Tema Klasik dan tema pihak ketiga mungkin menerapkan pengaturan asal tersendiri untuk tampilan menu di perangkat seluler. Periksa dokumentasi tema yang Anda pilih untuk informasi lebih lanjut.
Anda dapat mengontrol apakah menu drop-down terbuka saat pengunjung mengarahkan kursor ke item menu, mengekliknya, atau tetap terlihat setiap saat.
Untuk mengatur visibilitas submenu, ikuti langkah-langkah berikut:
- Dari Dasbor situs Anda, buka Tampilan → Editor.
- Pilih Template, lalu pilih template yang berisi menu Anda, misalnya Beranda atau Halaman Depan.
- Buka Tampilan Daftar di sudut kiri atas layar Anda.
- Pilih blok Navigasi Anda.
- Di bilah sisi pengaturan blok, klik ikon Pengaturan (ikon roda gigi).
- Di bagian Display, temukan pengaturan “Visibilitas Submenu” dan pilih salah satu pilihan berikut:
- Hover: Menu drop-down akan terbuka saat pengunjung mengarahkan kursor ke item menu utama. Anda juga dapat menonaktifkan opsi untuk menampilkan tanda panah di samping menu.
- Klik: Menu drop-down terbuka saat pengunjung mengeklik item menu induk.
- Klik tombol Simpan untuk menyimpan perubahan.
Bagian panduan ini berlaku untuk situs dengan paket WordPress.com Personal, Premium, Business, dan Commerce. Untuk situs gratis, tingkatkan paket Anda untuk mengakses fitur ini.
Kelas CSS adalah pengaturan menu lanjutan yang dapat Anda gunakan untuk menambahkan kelas CSS ke tiap item menu.
Untuk mengetahui bagian panduan yang perlu Anda ikuti, kunjungi Dasbor WordPress.com Anda dan periksa di bawah Tampilan di sisi kiri. Jika Anda melihat Editor, gunakan bagian Tema Blok dari panduan ini. Jika tidak, gunakan petunjuk Tema Klasik.
Untuk menambahkan kelas CSS di Editor Situs, ikuti langkah-langkah berikut:
- Dari Dasbor situs Anda, buka Tampilan → Editor.
- Pilih Template, lalu pilih template yang berisi menu Anda, misalnya Beranda atau Halaman Depan.
- Buka Tampilan Daftar di sudut kiri atas layar Anda, yaitu ikon yang terlihat seperti tiga garis horizontal yang bertumpuk.
- Pilih blok Navigasi di Tampilan Daftar.
- Jika Anda tidak melihat blok Navigasi, Anda dapat membuatnya.
- Lihat pengaturan blok Navigasi di sisi kanan layar.
- Klik ikon Pengaturan (roda gigi) ⚙️, lalu buka bagian “Lanjutan”.
- Tambahkan kelas CSS Anda.
Anda juga dapat menetapkan kelas CSS untuk tautan tertentu di blok Navigasi. Pilih tautan tersebut sebelum membuka bagian Lanjutan.
Kunjungi panduan kami tentang blok Navigasi untuk mempelajari semua fitur blok ini.
Pelajari lebih lanjut tentang menambahkan CSS Khusus.
Dukungan