إعدادات الهوية البصرية للبوابة: تخصيص الويب والجوال

الملخص

دليل شامل لتخصيص الهوية البصرية لبوابة KnowledgeCity الخاصة بك، بما يشمل شعارات الموقع، والألوان، وتهيئة شريط اللافتات (Banner Slider)، وهوية تطبيق الجوال البصرية.

مقدمة

تتيح لك إعدادات الهوية البصرية للبوابة (Portal Branding) تخصيص مظهر بوابة التعلم الخاصة بك عبر منصتَي الويب والجوال. هنا يمكنك تحميل الشعارات، وتعيين ألوان العلامة التجارية، وتهيئة شريط اللافتات في الصفحة الرئيسية، وتحديد المظهر البصري لتطبيق الجوال الخاص بك. تضمن الهوية البصرية المتسقة أن يتعرف المتعلمون على بيئة التدريب الخاصة بك مع خلق تجربة احترافية ومتماسكة. للحصول على نظرة عامة كاملة على جميع علامات تبويب إعدادات البوابة، راجع فهم إعدادات البوابة والتنقل فيها في نظام KnowledgeCity LMS.

الخطوات المتبعة

الوصول إلى إعدادات الهوية البصرية للبوابة

اتبع الخطوات أدناه للوصول إلى تهيئة الهوية البصرية:

1. سجّل الدخول إلى نظام KnowledgeCity LMS الخاص بك بحساب مسؤول لديه الوصول الكامل (Full Access).
2. حدد موقع القائمة المنسدلة الإعدادات (Settings) في اللوحة العلوية لواجهة نظام إدارة التعلم واختر إعدادات البوابة (Portal Settings).
3. تحتوي صفحة إعدادات البوابة على علامتَي تبويب متعلقتين بالهوية البصرية:
4. الهوية البصرية للموقع (Website branding): لمظهر بوابة الويب
5. الهوية البصرية للتطبيق (App branding): لمظهر تطبيق الجوال

الهوية البصرية للموقع

تتحكم علامة تبويب الهوية البصرية للموقع في كيفية ظهور بوابة التعلم الخاصة بك للمستخدمين على أجهزة الحاسوب المكتبي.

تهيئة شعارات البوابة

يمكن تحميل ثلاثة أنواع من الشعارات لإرساء الهوية البصرية لبوابتك:

لتحميل شعار أو تغييره:

1. انقر على زر تغيير الشعار (Change Logo) بجانب نوع الشعار المطلوب.
2. اختر ملف صورة من جهاز الحاسوب الخاص بك وفقاً للصيغ المدعومة.
3. يظهر الشعار الجديد فوراً في لوحة المعاينة المباشرة على اليمين.

تهيئة سمة البوابة والألوان

يتحكم قسم سمة البوابة في نظام الألوان المطبَّق في جميع أنحاء موقعك.

سمة البوابة اختر من بين خيارات السمات المتاحة: Default، وKaleidoscope، وImpulse، وDynamics، أو Custom للبدء بلوحة ألوان محددة مسبقاً.

ملاحظة: عند اختيار Custom كسمة للبوابة، تصبح خيارات تهيئة إضافية متاحة إلى جانب إعدادات الألوان القياسية. يمكنك ضبط نصف قطر زوايا البوابة (Portal corner radius) للتحكم في استدارة الأزرار وعناصر الواجهة. بالنسبة لأقسام الفئات المميزة ولافتة التطبيق، يمكنك تهيئة أنواع الخلفية بشكل مستقل (لون واحد أو صورة مخصصة) إلى جانب ألوان نص مخصصة. تمنحك هذه الخيارات الخاصة بكل قسم مزيداً من التحكم المخصص في المظهر البصري لبوابتك.

اللون الأساسي

• يُطبَّق اللون الأساسي على كتل الصفحة الرئيسية، والأزرار، والروابط.
• يُضبط لون الخلفية الرئيسية تلقائياً على شفافية 10% من اللون الأساسي المختار.
• انقر على منتقي الألوان لاختيار قيمة HEX.

اللون الثانوي

• فعّل مفتاح إضافة لون ثانوي لتفعيل لون ثانوي للعلامة التجارية.
• يُطبَّق اللون الثانوي على كتل إضافية في الصفحة الرئيسية، والأزرار، والروابط.
• تستخدم الخلفية الرئيسية شفافية 10% من اللون الثانوي المختار.
• انقر لاختيار قيمة HEX أو أوقف المفتاح لتعطيل استخدام اللون الثانوي.

لون التذييل

• يحدد لون خلفية تذييل بوابتك.

التوصية: استخدم الألوان الداكنة فقط لتلبية متطلبات تباين WCAG AA مع عناصر النص الفاتحة.

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

تهيئة شريط اللافتات

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

تفعيل الشريط فعّل مفتاح إظهار الشريط في الصفحة الرئيسية (Show slider on index page) لعرض شريط اللافتات على صفحتك الرئيسية.

إضافة الشرائح وإدارتها يمكن تهيئة كل شريحة بالخيارات التالية:

القائمة المنسدلة لنوع الشريحة اختر نوع المحتوى لشريحتك:

• صورة مع نص: عرض صورة مع عنوان وعنوان فرعي متراكبَين
• صورة: عرض صورة فقط
• فيديو: عرض محتوى فيديو (قد تختلف خيارات التهيئة)

المحتوى النصي (لنوع "صورة مع نص")

• العنوان: أدخل العنوان الرئيسي (بحد أقصى 50 حرفاً)
• العنوان الفرعي: أدخل النص الداعم (بحد أقصى 160 حرفاً)
• ترجمة: انقر لفتح نموذج يمكنك من خلاله تعيين عناوين وعناوين فرعية للغات البوابة المتاحة

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

تحميل الصور

طرق التحميل:

• سحب وإفلات صورة في منطقة التحميل
• انقر على تحميل صورة (Upload image) لتصفح ملفاتك
• لاستبدال صورة موجودة، انقر على معاينة الصورة الحالية

إضافة تظليل (Tint) فعّل مفتاح إضافة تظليل (Add tint) لتطبيق تراكب شبه شفاف فوق الصورة، مما يحسّن وضوح قراءة النص.

إدارة شرائح متعددة

• انقر على إضافة شريحة (Add slide) لإنشاء شرائح إضافية
• استخدم علامات تبويب الشرائح للتنقل بين الشرائح المختلفة
• انقر على إزالة شريحة (Remove slide) لحذف الشريحة الحالية

الهوية البصرية للتطبيق

تتحكم علامة تبويب الهوية البصرية للتطبيق في كيفية ظهور مؤسستك في تطبيق KnowledgeCity الجوال.

تهيئة شعار التطبيق

شعار التطبيق

• الصيغ المدعومة: jpg, png, svg.
• انقر على تحميل الشعار (Upload Logo) لاختيار صورة من جهاز الحاسوب الخاص بك.
• يظهر الشعار المحمَّل في نموذج المعاينة المباشرة على اليمين.

تهيئة ألوان التطبيق

تحدد ثلاثة إعدادات ألوان مظهر تطبيقك الجوال:

لتعيين الألوان:

1. انقر على منتقي الألوان بجانب كل حقل لون.
2. اختر لوناً باستخدام المنتقي أو أدخل قيمة HEX مباشرة.
3. تنعكس التغييرات فوراً في نموذج تطبيق الجوال.

المعاينة المباشرة

يعرض الجانب الأيمن من علامة تبويب الهوية البصرية للتطبيق نموذجاً واقعياً لجهاز جوال يظهر:

• شعار تطبيقك في موضعه.
• الألوان الأساسي والثانوي وشريط التنقل مُطبَّقة على الواجهة.
• تحديثات فورية أثناء إجراء التغييرات.

احفظ تغييراتك

بعد تهيئة إعدادات الهوية البصرية المطلوبة في أي من علامتَي التبويب، مرر إلى أسفل الصفحة وانقر على حفظ التغييرات (Save changes) لتطبيق جميع التعديلات. لن تصبح التغييرات سارية المفعول حتى يتم النقر على زر الحفظ.

الخاتمة

لقد نجحت في تهيئة إعدادات الهوية البصرية لبوابة نظام KnowledgeCity LMS الخاصة بك. تعكس الآن شعارات الموقع، وألوان السمة، وشريط اللافتات، ومظهر تطبيق الجوال الهوية الفريدة لمؤسستك. يخلق الاتساق في الهوية البصرية عبر منصتَي الويب والجوال بيئة تعلم احترافية وموثوقة تلقى صدى لدى مستخدميك.