Cara Mengedit Menu Seluler Di Webflow

Sign up and earn $1000 a day ⋙

Menu navigasi yang sederhana dan intuitif adalah salah satu elemen desain paling penting di situs web Anda. Kerjanya seperti peta, memandu pengunjung Anda di luar beranda. Dengan semakin banyaknya orang yang menggunakan internet di perangkat seluler mereka, situs web Anda juga harus memiliki menu navigasi yang ramah seluler.

Cara Mengedit Menu Seluler Di Webflow

Untungnya, Webflow memudahkan penambahan bilah menu hamburger yang dapat dilipat yang akan merampingkan situs seluler Anda. Teruslah membaca untuk mempelajari cara mengedit menu seluler ini di Webflow.

Cara Menambahkan Bilah Navigasi

Menu hamburger adalah elemen desain yang vital saat bekerja dengan ruang horizontal terbatas. Ini menghilangkan kebutuhan akan bilah navigasi tetap besar yang menghabiskan ruang berharga.

Di Webflow, menu ini dan fungsinya dibangun di dalam elemen NavBar. Menambahkan elemen ini ke desain Anda memerlukan empat langkah sederhana:

  1. Ketuk ikon "+" di bagian atas panel kiri untuk membuka panel "Tambah".
    Cara Mengedit Menu Seluler Di Webflow
  2. Gulir ke bawah ke bagian "Komponen".
    Cara Mengedit Menu Seluler Di Webflow
  3. Klik dan tahan elemen "NavBar".
    Cara Mengedit Menu Seluler Di Webflow
  4. Seret elemen ke header halaman.
    Cara Mengedit Menu Seluler Di Webflow

Cara Mengedit Menu Seluler

Setelah Anda menambahkan bilah navigasi ke situs web Anda, ada beberapa cara berbeda untuk menambahkan gaya dan kepribadian ke menu ini.

Cara Menambahkan Lebih Banyak Tautan ke Menu

Elemen bilah navigasi berisi tombol menu dan menu navigasi, dengan yang terakhir menahan tautan navigasi. Saat Anda menambahkannya ke desain Anda, akan ada beberapa placeholder tautan yang dapat Anda hapus atau edit dengan tautan situs web Anda.

Ikuti langkah-langkah ini untuk menambahkan lebih banyak tautan navigasi:

  1. Klik pada elemen apa pun di dalam NavBar.
    Cara Mengedit Menu Seluler Di Webflow
  2. Buka panel "Pengaturan Elemen" di sebelah kanan.
    Cara Mengedit Menu Seluler Di Webflow
  3. Tekan ikon roda gigi untuk membuka "Pengaturan."
    Cara Mengedit Menu Seluler Di Webflow
  4. Gulir ke bagian "Pengaturan NavBar".
    Cara Mengedit Menu Seluler Di Webflow
  5. Ketuk tombol "Tambah Tautan".
    Cara Mengedit Menu Seluler Di Webflow

Sekarang setelah Anda memiliki jumlah tautan yang cukup untuk semua halaman situs web Anda yang relevan, saatnya untuk melakukan penautan yang sebenarnya.

  1. Pilih tautan navigasi.
  2. Buka panel "Pengaturan Elemen".
    Cara Mengedit Menu Seluler Di Webflow
  3. Temukan bagian "Pengaturan Tautan".
    Cara Mengedit Menu Seluler Di Webflow
  4. Masukkan URL laman web yang ditunjuk ke bidang "URL".
    Cara Mengedit Menu Seluler Di Webflow

Cara Mengubah Animasi Menu

Di Webflow, Anda juga dapat mengubah tampilan menu seluler saat pengunjung mengeklik tombol menu. Anda dapat memilih di antara tiga jenis animasi pengungkapan ini:

  • Drop Down – Secara default, menu seluler akan turun dari NavBar setelah pengunjung mengetuk tombol menu. Ini akan mengambil lebar jendela browser secara keseluruhan.
  • Over Right – Jika Anda memilih animasi pengungkapan ini, menu seluler Anda akan muncul dari sisi kanan layar. Menu ini akan menempati seluruh tinggi jendela browser.
  • Over Left – Jenis menu ini identik dengan Over Right, kecuali menu navigasi akan berpindah dari sisi kiri layar Anda.

Untuk mengatur animasi pengungkapan yang Anda inginkan, lakukan hal berikut:

  1. Pilih elemen apa pun di dalam NavBar.
    Cara Mengedit Menu Seluler Di Webflow
  2. Buka panel "Pengaturan Elemen" di sisi kanan layar Anda.
    Cara Mengedit Menu Seluler Di Webflow
  3. Ketuk ikon roda gigi untuk meluncurkan "Pengaturan."
    Cara Mengedit Menu Seluler Di Webflow
  4. Arahkan ke bagian "Pengaturan NavBar".
    Cara Mengedit Menu Seluler Di Webflow
  5. Klik pada opsi "Ketik".
    Cara Mengedit Menu Seluler Di Webflow
  6. Pilih gaya yang disukai dari menu drop-down.
    Cara Mengedit Menu Seluler Di Webflow

Di bagian "Pengaturan NavBar", Anda juga dapat mengontrol yang berikut:

  • Easing open: tipe kurva yang digunakan untuk menganimasikan transisi terbuka.
  • Easing close: tipe kurva yang digunakan untuk menganimasikan transisi close.
  • Durasi: berapa lama waktu yang diperlukan untuk menampilkan menu.

Perhatikan bahwa durasi transisi diukur dalam milidetik.

Cara Mengubah Gaya Menu

Aliran web memudahkan penataan bagian mana pun dari bilah navigasi, memungkinkan Anda menyesuaikan menu seluler dengan mulus ke dalam desain situs web Anda.

Untuk menata tombol menu, lakukan hal berikut:

  1. Pilih tombol menu.
    Cara Mengedit Menu Seluler Di Webflow
  2. Buka panel "Gaya" di sebelah kanan (ikon kuas).
    Cara Mengedit Menu Seluler Di Webflow

Panel Gaya memungkinkan Anda mengubah setiap aspek tombol menu. Paling umum, desainer mengubah warna dan ukuran latar belakang tombol.

Untuk mengubah warna latar belakang, lakukan hal berikut:

  1. Buka bagian "Latar Belakang".
    Cara Mengedit Menu Seluler Di Webflow
  2. Ketuk ikon jatuhkan warna untuk membuka "Pemilih Warna".
    Cara Mengedit Menu Seluler Di Webflow
  3. Pilih warna yang diinginkan.
    Cara Mengedit Menu Seluler Di Webflow

Jika Anda ingin mengubah ukuran ikon hamburger, ikuti langkah berikut:

  1. Arahkan ke bagian "Tipografi".
    Cara Mengedit Menu Seluler Di Webflow
  2. Tambah atau kurangi ukuran ikon di bidang "Aa".
    Cara Mengedit Menu Seluler Di Webflow

Anda juga dapat mengubah warna ikon pada kolom di atas, yang ditandai dengan huruf A dan penurunan warna.

Meskipun ada banyak cara untuk menyesuaikan tombol menu, Anda tidak dapat menggantinya dengan elemen teks atau gambar khusus.

Navigasi Seluler Menjadi Mudah

Saat mendesain menu seluler, Anda ingin memaksimalkan ruang yang cukup terbatas. Jadi, cobalah untuk tidak membanjiri menu dengan pilihan agar tidak membingungkan pengunjung Anda. Selain itu, pastikan pilihan menu singkat, jelas, dan mudah dibaca.

Setelah itu, Anda dapat bermain dengan gaya menu dan animasi untuk membuat pengunjung Anda tertarik di setiap langkahnya.

Sudahkah Anda mencoba menambahkan menu seluler ke situs web Anda? Berapa banyak opsi yang Anda sertakan? Beri tahu kami di bagian komentar di bawah.

Sign up and earn $1000 a day ⋙

Leave a Comment

Apakah Platform Lintas Gerbang 3 Baldur? Belum

Apakah Platform Lintas Gerbang 3 Baldur? Belum

Setelah banyak hype dan antisipasi, “Baldur's Gate 3” telah dirilis. Tapi, sebelum terjun ke dalam permainannya, banyak pemain yang ingin mengetahui apakah itu benar atau tidak

Cara Memperbaiki DS4Windows Tidak Mendeteksi Kesalahan Pengontrol

Cara Memperbaiki DS4Windows Tidak Mendeteksi Kesalahan Pengontrol

Apakah Anda mengalami masalah dengan koneksi pengontrol Anda? Anda siap bermain, tetapi tanpa menggunakan pengontrol, permainan akan berakhir. Anda bukan satu-satunya gamer

Cara Reset Keterampilan Di Diablo 4

Cara Reset Keterampilan Di Diablo 4

Pernahkah Anda mencari cara untuk memodifikasi build pemain Anda tanpa membuat ulang karakter baru di “Diablo 4”? Nah, Anda beruntung. Permainan ini memungkinkan Anda

Cara Menyesuaikan Kecerahan Pada PC Windows 10

Cara Menyesuaikan Kecerahan Pada PC Windows 10

Pengaturan kecerahan layar adalah fitur penting, apa pun perangkat yang Anda gunakan. Namun yang terpenting adalah mengetahui tingkat kecerahannya

Cara Mendapatkan Yama Di Buah Blox

Cara Mendapatkan Yama Di Buah Blox

Yama adalah salah satu Katana Terkutuk dalam game dan menyandang status Legendaris. Memegang senjata ampuh di dunia terbuka “Blox Fruits” akan menawarkan Anda

Cara Memperbaiki Adaptor Jaringan Windows 10 yang Hilang

Cara Memperbaiki Adaptor Jaringan Windows 10 yang Hilang

Adaptor jaringan pada sistem operasi Windows merupakan perangkat vital yang memastikan koneksi jaringan berjalan lancar. Sejak adaptor jaringan menerima

Cara Mendapatkan Bantuan Di Windows

Cara Mendapatkan Bantuan Di Windows

Meskipun Anda sudah lama menggunakan Windows, terkadang Anda mungkin menghadapi tantangan yang memerlukan bantuan ahli. Apakah Anda sedang menghadapinya

Cara Melihat Kata Sandi Wi-Fi Tersimpan di Windows 11

Cara Melihat Kata Sandi Wi-Fi Tersimpan di Windows 11

Ada beberapa hal yang lebih membuat frustrasi daripada terkunci dari jaringan internet Anda. Jika Anda belum menuliskan kata sandinya, Anda berisiko kehilangan akses

Di mana Menemukan Lokasi Wallpaper Windows Di PC Anda

Di mana Menemukan Lokasi Wallpaper Windows Di PC Anda

Inilah lokasi wallpaper Windows untuk Windows 8 dan 10, sehingga Anda dapat menggunakan gambar beresolusi tinggi ini dengan perangkat lain atau versi Windows yang lebih lama.

Cara Menguji Kamera Pada PC Windows 10

Cara Menguji Kamera Pada PC Windows 10

Jika Anda ingin mengambil gambar dengan PC Windows 10, Anda perlu menguji fungsi kamera terlebih dahulu. Apakah Anda hanya ingin mengambil foto selfie

Cara Menghapus File Sementara Di PC Windows 10 Atau 11

Cara Menghapus File Sementara Di PC Windows 10 Atau 11

Setelah komputer Anda mulai lamban, itu tandanya Anda perlu mengosongkan sebagian ruang. Biasanya, menghapus file-file sementara adalah awal yang baik.

Ringkasan pintasan aplikasi Film & TV di Windows 10

Ringkasan pintasan aplikasi Film & TV di Windows 10

Ringkasan pintasan aplikasi Film & TV di Windows 10, Ringkasan pintasan aplikasi Film & TV di Windows 10 untuk memberi Anda pengalaman yang luar biasa. Mungkin

Cara memperbaiki kesalahan Pesan Gagal Memuat pada Discord untuk Windows

Cara memperbaiki kesalahan Pesan Gagal Memuat pada Discord untuk Windows

Cara memperbaiki kesalahan Pesan Gagal Memuat di Discord untuk Windows, Discord tidak menyenangkan jika Anda tidak dapat membaca apa yang ditulis orang lain. Berikut cara memperbaiki kesalahan Pesan

Cara menampilkan ikon PC ini di desktop Windows 11

Cara menampilkan ikon PC ini di desktop Windows 11

Cara Menampilkan Ikon PC Ini di Desktop Windows 11, Selama proses penggunaan Windows 11, banyak pengguna yang perlu mengakses PC ini (manajemen).

Cara mencari informasi di Windows Registry dengan cepat

Cara mencari informasi di Windows Registry dengan cepat

Cara mencari informasi di Windows Registry dengan cepat, Apakah Anda kesulitan mencari informasi di Windows Registry? Jadi di bawah ini adalah cara cepat untuk menemukan registri