Webflowda Mobil Menü Nasıl Düzenlenir

Basit ve sezgisel bir gezinme menüsü, web sitenizdeki en önemli tasarım öğelerinden biridir. Ziyaretçilerinizi ana sayfanın ötesine yönlendiren bir harita gibi davranır. İnterneti mobil cihazlarında kullanan insan sayısının artmasıyla birlikte, web sitenizin de mobil uyumlu bir gezinme menüsü olmalıdır.

Neyse ki Webflow, mobil sitenizi düzene sokacak, katlanabilir bir hamburger menü çubuğu eklemeyi kolaylaştırdı. Webflow'da bu mobil menüyü nasıl düzenleyeceğinizi öğrenmek için okumaya devam edin.

Gezinme Çubuğu Nasıl Eklenir?

Sınırlı yatay alanla çalışırken hamburger menüsü hayati bir tasarım öğesidir. Değerli yer kaplayan hantal bir sabit gezinme çubuğuna olan ihtiyacı ortadan kaldırır.

Webflow'da bu menü ve işlevleri, NavBar öğesinin içinde oluşturulmuştur. Bu öğeyi tasarımınıza eklemek için dört basit adım gerekir:

1. "Ekle" panelini açmak için sol panelin üst kısmındaki "+" simgesine dokunun.
   
2. "Bileşenler" bölümüne gidin.
   
3. “NavBar” öğesini tıklayın ve basılı tutun.
   
4. Öğeyi sayfanın başlığına sürükleyin.
   

Mobil Menü Nasıl Düzenlenir

Web sitenize bir gezinme çubuğu ekledikten sonra, bu menüye stil ve kişilik katmanın birkaç farklı yolu vardır.

Menüye Daha Fazla Bağlantı Nasıl Eklenir?

Navigasyon çubuğu öğesi, menü düğmesini ve navigasyon bağlantılarını tutan navigasyon menüsünü içerir. Bunu tasarımınıza eklediğinizde, web sitesi bağlantılarınızla birlikte silebileceğiniz veya düzenleyebileceğiniz birkaç bağlantı yer tutucu olacaktır.

Daha fazla gezinme bağlantısı eklemek için şu adımları izleyin:

1. NavBar içindeki herhangi bir öğeye tıklayın.
   
2. Sağdaki “Öğe Ayarları” paneline gidin.
   
3. "Ayarlar"ı açmak için dişli simgesine basın.
   
4. "NavBar Ayarları" bölümüne gidin.
   
5. “Bağlantı Ekle” düğmesine dokunun.
   

Artık ilgili tüm web sitesi sayfalarınız için yeterli sayıda bağlantıya sahip olduğunuza göre, asıl bağlantıyı yapma zamanı.

1. Bir gezinme bağlantısı seçin.
2. “Öğe Ayarları” paneline gidin.
   
3. "Bağlantı Ayarları" bölümünü bulun.
   
4. Belirlenen web sayfası URL'sini "URL" alanına girin.
   

Menü Animasyonu Nasıl Değiştirilir

Webflow'da, ziyaretçiler menü düğmesini tıkladığında mobil menünün nasıl görüneceğini de değiştirebilirsiniz. Bu açıklama animasyonlarının üç türü arasından seçim yapabilirsiniz:

• Açılır - Varsayılan olarak, ziyaretçi menü düğmesine dokunduğunda mobil menü NavBar'dan açılır. Tarayıcı penceresinin genişliğini bütünüyle alacaktır.
• Sağda – Bu ortaya çıkarma animasyonunu seçerseniz, mobil menünüz ekranın sağ tarafında görünecektir. Bu menü, tüm tarayıcı penceresinin yüksekliğini kaplar.
• Sol Üstü – Bu menü türü, gezinti menüsünün ekranınızın sol tarafından taşınması dışında Sağ Üstü ile aynıdır.

İstediğiniz gösterme animasyonunu ayarlamak için aşağıdakileri yapın:

1. NavBar'ın içindeki herhangi bir öğeyi seçin.
   
2. Ekranınızın sağ tarafındaki “Öğe Ayarları” paneline gidin.
   
3. "Ayarlar"ı başlatmak için dişli çark simgesine dokunun.
   
4. “NavBar Ayarları” bölümüne gidin.
   
5. “Tür” seçeneğine tıklayın.
   
6. Açılır menüden tercih ettiğiniz stili seçin.
   

"NavBar Ayarları" bölümünde aşağıdakileri de kontrol edebilirsiniz:

• Kolaylaştırma açık: açık geçişi canlandırmak için kullanılan eğri türü.
• Yavaşlatma kapanışı: kapanış geçişini canlandırmak için kullanılan eğri tipi.
• Süre: menünün görünmesi için geçen süre.

Geçiş süresinin milisaniye cinsinden ölçüldüğünü unutmayın.

Menü Stili Nasıl Değiştirilir

Webflow, mobil menüyü web sitenizin tasarımına sorunsuz bir şekilde sığdırmanıza olanak tanıyarak gezinme çubuğunun herhangi bir bölümünü şekillendirmeyi kolaylaştırdı.

Menü düğmesinin stilini belirlemek için aşağıdakileri yapın:

1. Menü düğmesini seçin.
   
2. Sağdaki "Stil" paneline gidin (fırça simgesi).
   

Stil paneli, menü düğmesinin her yönünü değiştirmenize olanak tanır. Çoğu zaman, tasarımcılar düğmenin arka plan rengini ve boyutunu değiştirir.

Arka plan rengini değiştirmek için aşağıdakileri yapın:

1. "Arka Planlar" bölümüne gidin.
   
2. "Renk Seçici"yi açmak için renk bırakma simgesine dokunun.
   
3. İstediğiniz rengi seçin.
   

Hamburger simgesinin boyutunu değiştirmek isterseniz şu adımları izleyin:

1. "Tipografi" bölümüne gidin.
   
2. "Aa" alanındaki simge boyutunu artırın veya azaltın.
   

A harfi ve bir renk damlasıyla işaretlenmiş yukarıdaki alanda da simgenin rengini değiştirebilirsiniz.

Menü düğmesini özelleştirmenin birçok yolu olsa da, onu bir metin öğesi veya özel bir görselle değiştiremezsiniz.

Mobil Navigasyon Kolaylaştı

Bir mobil menü tasarlarken oldukça sınırlı alandan en iyi şekilde yararlanmak istersiniz. Bu nedenle, ziyaretçilerinizin kafasını karıştırmamak için menüyü seçeneklerle doldurmamaya çalışın. Ayrıca menü seçeneklerinin kısa, net ve kolay okunabilir olduğundan emin olun.

Bundan sonra, ziyaretçilerinizin her adımda ilgisini canlı tutmak için menü tasarımı ve animasyonu ile oynayabilirsiniz.

Web sitenize bir mobil menü eklemeyi denediniz mi? Kaç seçenek eklediniz? Aşağıdaki yorumlar bölümünde bize bildirin.