كيفية تحرير قائمة الجوال في Webflow

تعد قائمة التنقل البسيطة والبديهية أحد أهم عناصر التصميم على موقع الويب الخاص بك. إنها تعمل كخريطة توجه زوارك خارج الصفحة الرئيسية. مع تزايد عدد الأشخاص الذين يستخدمون الإنترنت على أجهزتهم المحمولة ، يجب أن يحتوي موقع الويب الخاص بك أيضًا على قائمة تنقل متوافقة مع الجوّال.

لحسن الحظ ، سهّل Webflow إضافة شريط قوائم هامبرغر قابل للطي من شأنه تبسيط موقع الجوال الخاص بك. استمر في القراءة لمعرفة كيفية تحرير قائمة الهاتف المحمول هذه على Webflow.

كيفية إضافة شريط التنقل

قائمة الهامبرغر هي عنصر تصميم حيوي عند العمل بمساحة أفقية محدودة. إنه يلغي الحاجة إلى شريط تنقل ثابت ضخم يشغل مساحة كبيرة.

في Webflow ، تم إنشاء هذه القائمة ووظائفها داخل عنصر NavBar. تتطلب إضافة هذا العنصر إلى تصميمك أربع خطوات بسيطة:

1. اضغط على أيقونة "+" في الجزء العلوي من اللوحة اليسرى لفتح لوحة "إضافة".
   
2. مرر لأسفل إلى قسم "المكونات".
   
3. انقر مع الاستمرار فوق عنصر "NavBar".
   
4. اسحب العنصر إلى رأس الصفحة.
   

كيفية تحرير قائمة الجوال

بمجرد إضافة شريط التنقل إلى موقع الويب الخاص بك ، هناك عدة طرق مختلفة يمكنك من خلالها إضافة نمط وشخصية إلى هذه القائمة.

كيفية إضافة المزيد من الروابط إلى القائمة

يحتوي عنصر شريط التنقل على زر القائمة وقائمة التنقل ، حيث يحتفظ الأخير بروابط التنقل. عند إضافته إلى تصميمك ، سيكون هناك العديد من العناصر النائبة للروابط التي يمكنك حذفها أو تعديلها باستخدام روابط موقع الويب الخاص بك.

اتبع هذه الخطوات لإضافة المزيد من روابط التنقل:

1. انقر فوق أي عنصر داخل شريط التنقل.
   
2. توجه إلى لوحة "Elements Settings" على اليمين.
   
3. اضغط على رمز الترس لفتح "الإعدادات".
   
4. قم بالتمرير إلى قسم "إعدادات شريط التنقل".
   
5. اضغط على زر "إضافة رابط".
   

الآن بعد أن أصبح لديك عدد كافٍ من الروابط لجميع صفحات موقعك ذات الصلة ، فقد حان الوقت للقيام بالربط الفعلي.

1. حدد ارتباط التنقل.
2. انتقل إلى لوحة "إعدادات العناصر".
   
3. حدد موقع قسم "إعدادات الارتباط".
   
4. أدخل عنوان URL لصفحة الويب المعينة في حقل "URL".
   

كيفية تغيير قائمة الرسوم المتحركة

في Webflow ، يمكنك أيضًا تغيير كيفية ظهور قائمة الجوال عندما ينقر الزائرون على زر القائمة. يمكنك الاختيار من بين ثلاثة أنواع من حركات الكشف هذه:

• منسدلة - بشكل افتراضي ، ستنزل قائمة الهاتف المحمول من شريط التنقل بمجرد أن ينقر الزائر على زر القائمة. سيستغرق عرض نافذة المتصفح بالكامل.
• على اليمين - إذا حددت رسم الكشف هذا ، فستظهر قائمة هاتفك المحمول من الجانب الأيمن من الشاشة. ستشغل هذه القائمة ارتفاع نافذة المتصفح بالكامل.
• على اليسار - نوع القائمة هذا مطابق لـ Over Right ، باستثناء أن قائمة التنقل ستتحرك من الجانب الأيسر من شاشتك.

لتعيين الرسوم المتحركة للكشف التي تريدها ، قم بما يلي:

1. حدد أي عنصر داخل شريط التنقل.
   
2. انتقل إلى لوحة "إعدادات العناصر" على الجانب الأيمن من شاشتك.
   
3. انقر على رمز الترس لتشغيل "الإعدادات".
   
4. انتقل إلى قسم "إعدادات شريط التنقل".
   
5. انقر فوق خيار "النوع".
   
6. حدد النمط المفضل من القائمة المنسدلة.
   

في قسم "إعدادات شريط التنقل" ، يمكنك أيضًا التحكم في ما يلي:

• تسهيل الفتح: نوع المنحنى المستخدم لتحريك الانتقال المفتوح.
• تخفيف الإغلاق: نوع المنحنى المستخدم لتحريك الانتقال القريب.
• المدة: المدة التي تستغرقها القائمة لتظهر.

لاحظ أن مدة الانتقال تقاس بالمللي ثانية.

كيفية تغيير نمط القائمة

جعل Webflow من السهل تصميم أي جزء من شريط التنقل ، مما يسمح لك بملاءمة قائمة الهاتف المحمول بسلاسة في تصميم موقع الويب الخاص بك.

لتحديد نمط زر القائمة ، قم بما يلي:

1. حدد زر القائمة.
   
2. انتقل إلى لوحة "النمط" على اليمين (رمز الفرشاة).
   

تسمح لك لوحة النمط بتغيير كل جانب من جوانب زر القائمة. غالبًا ما يقوم المصممون بتغيير لون خلفية الزر وحجمه.

لتغيير لون الخلفية ، قم بما يلي:

1. انتقل إلى قسم "الخلفيات".
   
2. انقر على رمز إسقاط الألوان لفتح "Color Picker".
   
3. حدد اللون المطلوب.
   

إذا كنت ترغب في تغيير حجم رمز الهامبرغر ، فاتبع الخطوات التالية:

1. انتقل إلى قسم "الطباعة".
   
2. قم بزيادة أو تقليل حجم الرمز في الحقل "Aa".
   

يمكنك أيضًا تغيير لون الرمز في الحقل أعلاه ، المميز بالحرف A وإسقاط اللون.

في حين أن هناك العديد من الطرق لتخصيص زر القائمة ، لا يمكنك استبداله بعنصر نصي أو صورة مخصصة.

أصبح التنقل عبر الهاتف المحمول سهلاً

عند تصميم قائمة الأجهزة المحمولة ، فأنت تريد الحصول على أقصى استفادة من المساحة المحدودة نسبيًا. لذا ، حاول عدم تجاوز القائمة بالخيارات لتجنب إرباك زوارك. تأكد أيضًا من أن خيارات القائمة قصيرة وواضحة وسهلة القراءة.

بعد ذلك ، يمكنك اللعب بنمط القائمة والرسوم المتحركة لإبقاء زوار موقعك مهتمين في كل خطوة على الطريق.

هل حاولت إضافة قائمة المحمول إلى موقع الويب الخاص بك؟ كم عدد الخيارات التي قمت بتضمينها؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه.