Menu Widget membantu anda untuk membuat menu yang kreatif ataupun rumit dengan mudah untuk website anda.
Sebagai percobaan, Elementor memberi pengguna akses untuk membuat menu dengan format yang sesuai untuk halaman website.
Untuk menggunakan mega menu, anda perlu untuk mengaktifkan beberapa fitur experimental (percobaan), antara lain:
- Flexbox Containers
- Nested Elements
- Menu
Catatan: Mengaktifkan fitur ini akan menggantikan widget Nav Menu dengan dua widget yaitu WordPress Menu widget (fungsinya mirip dengan Nav Menu), dan mengaktifkan Menu widget.
Kenapa Menggunakan Menu Widget?
Menu sangat memudahkan navigasi pengunjung pada website untuk mempercepat mencapai atau menuju apa yang mereka cari dalam website anda. Widget ini menawarkan cara yang lebih mudah untuk membuat menu.
Kapan Harus Menggunakan Menu Widget?
Menu Widget mendukung anda untuk menambahkan gambar, link, video, dan masih banyak lagi.
Menu widget cocok untuk:
- Membantu pengunjung dengan menghubungkan menu ke halaman yang sesuai untuk mencapai kebutuhan pengunjung
- Membuat menu yang kompleks
- Membuat situs anda menjadi lebih hidup
Mari langsung kita bahas apa saja yang bisa kita lakukan atau kustomisasi pada widget ini.
Content tab
Content tab – Layout
- Menu Items: Edit dan buat konten menu
- Copy icon: Copy/salin menu item yang dipilih. Dengan menyalin menu akan membantu konsistensi tampilan menu anda
- X icon: Hapus menu yang dipilih
- Title: Beri judul untuk menu yang dipilih
- Link: Tambahkan link dalam menu
- Dropdown Content: Dropdown content akan tampil ketika pengguna melakukan hover atau klik pada menu
- Icon: Tambahkan icon untuk menu
- CSS ID: Tambahkan ID css pada menu
- Add Item: Tambahkan lebih banyak item menu
- Content Width: Tentukan lebar konten, anda bisa memilih antara Full Width dan Fit to Content. Full Width akan membuat menu memenuhi lebar layar. Fit to Content akan menyesuaikan panjang dan lebar menu
- Item Layout: Pilih Horizontal untuk menampilkan item menu secara horizontal atau kesamping kanan dan kiri. Atau anda bisa memilih Dropdown untuk menampilkan menu dari atas kebawah
- Item Position: Tentukan posisi item menu
- Dropdown Indicator: Tentukan icon untuk menu dropdown anda. Icon untuk dropdown sebelum dibuka, dan Active Icon untuk menu setelah dibuka.
Content tab – Dropdown Effect
- Open on: Pilih apakah Dropdown menu akan terbuka ketika hover atau ketika menu di klik
- Animation: Tentukan animasi ketika dropdown tampil
- Animation Duration: Atur berapa lama waktu untuk menampilkan seluruh isi dropdown menu
Content tab – Menu Toggle
Menu Toggle digunakan untuk mengatur tampilan dropdown menu
- Alignment: Tentukan posisi dropdown menu
- Normal: Tentukan icon ketika dropdown menu tidak sedang aktif atau hover
- Hover: Tentukan icon dropdown menu ketika hover
- Active: Tentukan icon dropdown menu ketika menu sedang aktif atau terbuka
Content tab – Additional Settings
Untuk layar yang lebih kecil, seringkali apabila terlalu banyak menu, menu tidak dapat tampil semua. Untuk mengatasi ini anda bisa menggunakan fungsi Horizontal Scroll dan Breakpoint
Horizontal Scroll:
Aktifkan untuk membuat menu bisa digeser apabila ukuran layar tidak cukup untuk menampilkan semua menu. Apabila dinonaktifkan akan tampil seperti gambar ini
Apabila layar tidak cukup, maka item menu akan ditampilkan dibawah
Breakpoint:
Breakpoint merupakan pilihan terbaik untuk tampilan tablet dan mobile karena akan membuat menu menjadi lebih ringkas
Terdapat pilihan untuk membuat breakpoint:
- None: Jangan ringkas menu
- Mobile Portrait (>767px): Ringkas menu ketika ukuran layar kurang dari 767 pixels
- Tablet Portrait (>1024): Ringkas menu ketika ukuran layar kurang dari 1024 pixels
Style tab
Style tab – Menu Items
Atur bagaimana konten menu akan ditampilkan
- Space between items: Tentukan jarak antar item menu
- Distance from content: Atur jarak antara menu dan area konten
- Typography: Atur tipografi menu
- Color: Pilih warna teks menu
- Shadow: Beri efek bayangan pada menu
- Background type: Pilih tipe background menu
- Border type: Pilih tipe border menu
- Box Shadow: Beri efek bayangan untuk menu widget
- Divider: Aktifkan untuk memberi garis pembatas diatara item menu
- Border Radius: Atur ukuran sudut border, semakin besar akan semakin melingkar
- Padding: Tentukan padding menu
Style tab – Icon (Hanya untuk Elementor yang dihosting)
Pengaturan ini relevan jika anda menggunakan icon untuk menu
- Position: Tentukan posisi icon
- Size: Atur ukuran icon
- Spacing: Atur jarak icon dengan item menu
- Color: Tentukan warna icon
Style tab – Menu Toggle
Pengaturan ini relevan jika anda menggunakan dropdown menu
- Size: Tentukan ukuran icon menu
- Normal: Tampilan icon ketika mode normal
- Hover: Tampilan icon ketika mode hover
- Active: Tampilan icon ketika dropdown menu diaktifkan
- Color: Pilih warna icon dropdown menu
- Background Type: Tentukan tipe background untuk icon
- Border Type: Tentukan tipe border icon
- Box Shadow: Atur efek bayangan icon
- Border Radius: Tentukan ukuran sudut border icon, semakin besar akan semakin melingkar
- Padding: Tentukan padding icon
- Distance from dropdown: Tentukan jarak antara icon dropdown dan area konten
Style tab – Content
- Background Type: Tentukan tipe background menu
- Border Type: Tentukan tipe border untuk menu
- Border Radius: Tentukan ukuran sudut border menu, semakin besar akan semakin melingkar
- Box Shadow: Atur efek bayangan pada menu
- Padding: Tentukan padding menu
Style tab – Dropdown Menu
Atur tampilan untuk dropdown menu
Normal: Tampilan dropdown menu ketika tidak ditampilkan / nonaktif
Active: Tampilan dropdown menu ketika ditampilkan / aktif
Menu Items
- Text Color: Tentukan warna teks dropdown menu
- Background Type: Tentukan tipe background dropdown menu
- Box Shadow: Beri efek bayangan untuk item dropdown menu
Dropdown Box
- Border Type: Tentukan tipe border dropdown
- Border Radius: Tentukan ukuran sudut border dropdown
- Box Shadow: Beri efek bayangan untuk box dropdown