أنماط التنقل
خصّص ألوان شريط التنقل في موقع كنيستك لتتناسب مع هويتها البصرية. يمكنك ضبط الألوان لكل من الخلفية الصلبة والطبقات الشفافة، مما يمنحك تحكمًا كاملًا في شكل التنقل عبر الصفحات المختلفة.
قبل أن تبدأ
- تحتاج إلى صلاحية إدارة موقع كنيستك. راجع الأدوار والصلاحيات للتفاصيل.
- جهّز ألوان هويتك البصرية، بما في ذلك رموز الألوان السداسية العشرية (مثل #03A9F4).
- افهم الفرق بين أنماط التنقل الصلبة والشفافة على موقعك.
فهم أوضاع التنقل
يمكن أن يظهر التنقل في موقعك بنمطين مختلفين حسب الصفحة:
- التنقل الصلب -- شريط تنقل بلون خلفية، ويُستخدم عادةً في صفحات المحتوى
- التنقل الشفاف -- تنقل يظهر فوق محتوى الصفحة، ويُستخدم عادةً في الصفحات التي تحتوي على صور رئيسية أو خلفيات بملء الشاشة
يمكنك تخصيص الألوان لكلا الوضعين بشكل مستقل.
الوصول إلى أنماط التنقل
- في B1 Admin، افتح قائمة الانتقال (شريط البحث في أعلى اليسار) ثم وسّع Website
- انقر على Appearance
- في قائمة Style Settings، انقر على Navigation
يحتوي محرر Navigation Styling على بطاقتين: Header (solid) وHeader over hero (transparent).
ضبط التنقل الصلب
يظهر التنقل الصلب مع لون خلفية خلف شريط التنقل. توجد هذه الإعدادات في بطاقة Header (solid). يمكنك تخصيص:
لون الخلفية
- فعّل مفتاح Override الخاص بـ Background color
- انقر على أداة اختيار الألوان
- اختر لون الخلفية المطلوب
- اللون الافتراضي هو الأبيض (#FFFFFF)
لون الروابط
- فعّل مفتاح Override الخاص بـ Link color
- اختر اللون الخاص بنص روابط التنقل
- يؤثر هذا على الروابط في حالتها الافتراضية
- اللون الافتراضي هو الرمادي الداكن (#555555)
لون الروابط عند التمرير
- فعّل مفتاح Override الخاص بـ Link hover color
- اختر اللون الذي تتحول إليه الروابط عندما يمرر المستخدمون المؤشر فوقها
- يوفّر هذا تغذية راجعة بصرية للروابط القابلة للنقر
- اللون الافتراضي هو الأزرق الفاتح (#03A9F4)
لون الرابط النشط
- فعّل مفتاح Override الخاص بـ Active link color
- اختر اللون الخاص برابط الصفحة الحالية
- يساعد هذا المستخدمين على معرفة الصفحة التي يتصفحونها
- اللون الافتراضي هو الأزرق الفاتح (#03A9F4)
ضبط التنقل الشفاف
يتراكب التنقل الشفاف فوق محتوى صفحتك دون خلفية. توجد هذه الإعدادات في بطاقة Header over hero (transparent). يمكنك تخصيص:
لون الروابط
- فعّل مفتاح Override الخاص بـ Link color
- اختر لونًا يتباين بوضوح مع خلفية صفحتك
- غالبًا ما تكون الألوان البيضاء أو الفاتحة الأنسب فوق الخلفيات الداكنة
- اللون الافتراضي هو الرمادي الداكن (#555555)
لون الروابط عند التمرير
- فعّل مفتاح Override الخاص بـ Link hover color
- اختر لون حالة التمرير
- تأكد من أنه مرئي على خلفية صفحتك
- اللون الافتراضي هو الأزرق الفاتح (#03A9F4)
لون الرابط النشط
-
فعّل مفتاح Override الخاص بـ Active link color
-
اختر لون مؤشر الصفحة النشطة
-
يجب أن يكون بارزًا مع الحفاظ على انسجامه مع تصميمك
-
اللون الافتراضي هو الأزرق الفاتح (#03A9F4)
لا يحتوي التنقل الشفاف على إعداد لون الخلفية، لأنه يتراكب مباشرةً فوق محتوى الصفحة.
حفظ التغييرات
- بعد ضبط الألوان، انقر على Save Navigation
- تُطبَّق تغييراتك فورًا على موقعك المباشر
- زر موقعك لمشاهدة التنقل في الوضعين
استعادة الإعدادات الافتراضية
إذا أردت العودة إلى الألوان الافتراضية:
- أوقف مفاتيح Override لأي ألوان مخصصة
- انقر على Save Navigation
- يعود التنقل إلى نظام الألوان الافتراضي
أو انقر على Cancel لتجاهل جميع التغييرات دون حفظ.
أفضل الممارسات
التباين اللوني
- سهولة القراءة -- تأكد من أن ألوان الروابط تتباين بوضوح مع الخلفية
- توافق WCAG -- استهدف نسبة تباين لا تقل عن 4.5:1 لتحقيق إمكانية الوصول
- اختبر الوضعين -- عاين موقعك مع التنقل الصلب والشفاف
اتساق الهوية
- استخدم ألوان هويتك -- طابق شعارك وسمة موقعك
- قلّل عدد الألوان -- التزم بلونين أو ثلاثة للحصول على مظهر متماسك
- فكّر في صورك -- إذا استخدمت التنقل الشفاف، اختبره على خلفيات الصفحات المعتادة
حالات التمرير والنشاط
- تغذية راجعة واضحة -- اجعل ألوان حالة التمرير مختلفة بوضوح عن الروابط العادية
- ميّز الصفحات النشطة -- استخدم لونًا مميزًا ليعرف المستخدمون مكانهم
- انتقالات سلسة -- يقوم النظام تلقائيًا بتحريك تغييرات الألوان
استكشاف الأخطاء وإصلاحها
الألوان لا تبدو صحيحة
- امسح ذاكرة التخزين المؤقت -- قد يعرض المتصفح ألوانًا قديمة بسبب التخزين المؤقت
- تحقق من رموز الألوان السداسية -- تأكد من إدخال رموز ألوان سداسية عشرية صالحة
- اختبر على خلفيات مختلفة -- قد تبدو الألوان مختلفة حسب الصفحة
التنقل غير مرئي
- الوضع الشفاف -- إذا كنت تستخدم التنقل الشفاف فوق صور فاتحة، فقد يصعب رؤية النص الداكن
- الحل -- عدّل ألوان الروابط أو استخدم خلفيات صفحات أغمق
- بديل -- أضف ظلًا خفيفًا أو طبقة خلفية للمنطقة التي تحتوي على التنقل
تفاصيل تقنية
تُخزَّن أنماط التنقل بصيغة JSON، وتُطبَّق باستخدام متغيرات CSS:
- تُطبَّق التغييرات فورًا دون الحاجة إلى إعادة بناء الموقع
- تنتشر الألوان إلى جميع عناصر التنقل
- التخصيصات اختيارية؛ الألوان غير المحددة تستخدم ألوان السمة الافتراضية
مقالات ذات صلة
- المظهر -- خصّص المظهر العام لموقعك
- إدارة الصفحات -- أنشئ صفحات موقعك ونظّمها
- محرر الصفحات -- صمّم تخطيطات الصفحات ومحتواها