Menu Widget

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

image 42 , WPCLUB Indonesia, WordPress Community, WP Club, WP Community
  1. Menu Items: Edit dan buat konten menu
  2. Copy icon: Copy/salin menu item yang dipilih. Dengan menyalin menu akan membantu konsistensi tampilan menu anda
  3. X icon: Hapus menu yang dipilih
  4. Title: Beri judul untuk menu yang dipilih
  5. Link: Tambahkan link dalam menu
  6. Dropdown Content: Dropdown content akan tampil ketika pengguna melakukan hover atau klik pada menu
  7. Icon: Tambahkan icon untuk menu
  8. CSS ID: Tambahkan ID css pada menu
  9. Add Item: Tambahkan lebih banyak item menu
  10. 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
  11. 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
  12. Item Position: Tentukan posisi item menu
  13. Dropdown Indicator: Tentukan icon untuk menu dropdown anda. Icon untuk dropdown sebelum dibuka, dan Active Icon untuk menu setelah dibuka.

Content tab – Dropdown Effect

image 43 , WPCLUB Indonesia, WordPress Community, WP Club, WP Community
  1. Open on: Pilih apakah Dropdown menu akan terbuka ketika hover atau ketika menu di klik
  2. Animation: Tentukan animasi ketika dropdown tampil
  3. Animation Duration: Atur berapa lama waktu untuk menampilkan seluruh isi dropdown menu

Content tab – Menu Toggle

image 44 , WPCLUB Indonesia, WordPress Community, WP Club, WP Community

Menu Toggle digunakan untuk mengatur tampilan dropdown menu

  1. Alignment: Tentukan posisi dropdown menu
  2. Normal: Tentukan icon ketika dropdown menu tidak sedang aktif atau hover
  3. Hover: Tentukan icon dropdown menu ketika hover
  4. 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

image 45 , WPCLUB Indonesia, WordPress Community, WP Club, WP Community

Horizontal Scroll:

Aktifkan untuk membuat menu bisa digeser apabila ukuran layar tidak cukup untuk menampilkan semua menu. Apabila dinonaktifkan akan tampil seperti gambar ini

image 46 , WPCLUB Indonesia, WordPress Community, WP Club, WP Community

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

image 47 , WPCLUB Indonesia, WordPress Community, WP Club, WP Community
  1. Space between items: Tentukan jarak antar item menu
  2. Distance from content: Atur jarak antara menu dan area konten
  3. Typography: Atur tipografi menu
  4. Color: Pilih warna teks menu
  5. Shadow: Beri efek bayangan pada menu
  6. Background type: Pilih tipe background menu
  7. Border type: Pilih tipe border menu
  8. Box Shadow: Beri efek bayangan untuk menu widget
  9. Divider: Aktifkan untuk memberi garis pembatas diatara item menu
  10. Border Radius: Atur ukuran sudut border, semakin besar akan semakin melingkar
  11. Padding: Tentukan padding menu

Style tab – Icon (Hanya untuk Elementor yang dihosting)

Pengaturan ini relevan jika anda menggunakan icon untuk menu

image 48 , WPCLUB Indonesia, WordPress Community, WP Club, WP Community
  1. Position: Tentukan posisi icon
  2. Size: Atur ukuran icon
  3. Spacing: Atur jarak icon dengan item menu
  4. Color: Tentukan warna icon

Style tab – Menu Toggle

Pengaturan ini relevan jika anda menggunakan dropdown menu

image 49 , WPCLUB Indonesia, WordPress Community, WP Club, WP Community
  1. Size: Tentukan ukuran icon menu
  2. Normal: Tampilan icon ketika mode normal
  3. Hover: Tampilan icon ketika mode hover
  4. Active: Tampilan icon ketika dropdown menu diaktifkan
  5. Color: Pilih warna icon dropdown menu
  6. Background Type: Tentukan tipe background untuk icon
  7. Border Type: Tentukan tipe border icon
  8. Box Shadow: Atur efek bayangan icon
  9. Border Radius: Tentukan ukuran sudut border icon, semakin besar akan semakin melingkar
  10. Padding: Tentukan padding icon
  11. Distance from dropdown: Tentukan jarak antara icon dropdown dan area konten

Style tab – Content

image 50 , WPCLUB Indonesia, WordPress Community, WP Club, WP Community
  1. Background Type: Tentukan tipe background menu
  2. Border Type: Tentukan tipe border untuk menu
  3. Border Radius: Tentukan ukuran sudut border menu, semakin besar akan semakin melingkar
  4. Box Shadow: Atur efek bayangan pada menu
  5. Padding: Tentukan padding menu

Style tab – Dropdown Menu

Atur tampilan untuk dropdown menu

image 51 , WPCLUB Indonesia, WordPress Community, WP Club, WP Community

Normal: Tampilan dropdown menu ketika tidak ditampilkan / nonaktif

Active: Tampilan dropdown menu ketika ditampilkan / aktif

Menu Items

  1. Text Color: Tentukan warna teks dropdown menu
  2. Background Type: Tentukan tipe background dropdown menu
  3. Box Shadow: Beri efek bayangan untuk item dropdown menu

Dropdown Box

  1. Border Type: Tentukan tipe border dropdown
  2. Border Radius: Tentukan ukuran sudut border dropdown
  3. Box Shadow: Beri efek bayangan untuk box dropdown

Pengetahuan Dasar

  • Apakah Knowledge Base / Pengetahuan Dasar ini cocok untuk Pemula ?

    Kami berusaha untuk menggunakan bahasa dan penjelasan yang mudah dipahami oleh semua pihak terutama bagi pemula yang baru belajar mengenai kategori kategori di Knowledge Base kami. Apabila ada bahasa atau pengertian yang belum / tidak Anda ketahui maka silahkan menghubungi kami. 

  • Dapatkah link dari Knowledge base ini dibagikan kepada umum ?

    Anda dapat melakukan sharing / membagikan konten di Knowledge Base kami melalui link sosial media, whatsapp atau telegram kepada komunitas lain.

  • Apa yang dimaksud Knowledge Base ?

    Knowledge Base adalah database / pustaka dasar pengetahuan mengenai topik atau kategori tertentu yang berhubungan dengan penggunaan, permasalahan dan solusi atas topik / kategori tertentu. Di dalam knowledge base ini Anda akan diberikan informasi dasar mulai dari pengertian sampai dengan trouble solving. 

  • Database / Pengetahuan dasar berdasarkan apa ?

    Tim WP Club Indonesia mengambil database / Pengetahun Dasar berdasarkan situs website kategori / topik tersebut ditambahkan dengan pengalaman dan user experience yang dialami oleh member WP Club Indonesia. Adapun beberapa knowledge base yang ada di WP Club Indonesia berdasarkan pengalaman dari tenaga ahli / praktisi di komunitas. 

  • Bagaimana jika tidak menemukan kata kunci / keyword yang dicari ?

    Apabila Anda tidak menemukan kata kunci / keyword yang dicari maka silahkan hubungi kami . Dengan senang hati kami akan membantu Anda mendapatkan / membuat pengetahuan dasar mengenai hal tersebut. 

  • Dapatkah pengunjung menambahkan / melakukan editing Knowledge Base ?

    Anda dapat melakukan penambahan / editing knowledge base di WP Club Indonesia dengan cara melakukan email ke [email protected] dengan subject : [Knowledge Base]