التخصيص المرئي

خصّص مظهر واجهة مستخدم B2CORE عبر تفعيل المظهرين الفاتح والداكن، ورفع الشعارات والخلفيات، وضبط الألوان، وإضافة نصوص برمجية مخصصة للهوية التجارية والوظائف

استخدم الخيارات في هذا القسم لتخصيص مظهر واجهة مستخدم B2CORE بما يعكس الطابع الفريد لعلامتك التجارية.

النقاط الرئيسية

تتيح لك الخيارات المتاحة ما يلي:

  • اختيار ما إذا كنت تريد تفعيل المظهر الفاتح أو المظهر الداكن أو كليهما لواجهة مستخدم B2CORE، وتحديد أيهما يجب تعيينه كمظهر افتراضي.
  • رفع شعارات مخصصة لكلا مظهري واجهة مستخدم B2CORE.
  • ضبط ألوان عناصر واجهة المستخدم المختلفة للمظهرين الفاتح والداكن.
  • تعيين صور الخلفية وتحديثها لصفحتي تسجيل الدخول وإنشاء حساب في واجهة مستخدم B2CORE.
  • إضافة نصوص برمجية مخصصة، مثل نصوص دمج روبوتات الدردشة وتتبع التحليلات.

الموارد

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

شعار للمظهر الفاتح

الشعار الرئيسي المعروض في واجهة مستخدم B2CORE عند تفعيل المظهر الفاتح.

التنسيق المطلوب: SVG بخلفية شفافة، بحجم ملف يصل إلى 10 ميغابايت.


شعار مختصر للمظهر الفاتح

نسخة مضغوطة من الشعار تُعرض عند طي القائمة الرئيسية في المظهر الفاتح.

التنسيق المطلوب: SVG بخلفية شفافة، بحجم ملف يصل إلى 10 ميغابايت.


شعار للمظهر الداكن

الشعار الرئيسي المعروض في واجهة مستخدم B2CORE عند تفعيل المظهر الداكن.

التنسيق المطلوب: SVG بخلفية شفافة، بحجم ملف يصل إلى 10 ميغابايت.


شعار مختصر للمظهر الداكن

نسخة مضغوطة من الشعار تُعرض عند طي القائمة الرئيسية في المظهر الداكن.

التنسيق المطلوب: SVG بخلفية شفافة، بحجم ملف يصل إلى 10 ميغابايت.


الأيقونة المفضلة (.ico)

الأيقونة الصغيرة التي تظهر في علامة تبويب المتصفح.

التنسيق المطلوب: ICO، بحجم ملف يصل إلى 10 ميغابايت.


الأيقونة المفضلة (.svg)

النسخة المتجهية من الأيقونة المفضلة للمتصفحات التي تدعم SVG.

التنسيق المطلوب: SVG، بحجم ملف يصل إلى 10 ميغابايت. ستُستخدم كأيقونة قابلة للتحجيم.


أيقونة Apple touch

الأيقونة المعروضة على أجهزة Apple عند إضافة صفحة واجهة مستخدم B2CORE إلى الشاشة الرئيسية.

التنسيق المطلوب: PNG، بأبعاد 180×180 بكسل، وبحجم ملف يصل إلى 10 ميغابايت.


خلفية المظهر الفاتح

صورة الخلفية المطبقة على صفحتي إنشاء حساب وتسجيل الدخول عند تفعيل المظهر الفاتح. إضافة صورة خلفية اختيارية.

التنسيق الموصى به: SVG أو JPG أو PNG، بحجم ملف يصل إلى 10 ميغابايت.


خلفية المظهر الداكن

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

التنسيق الموصى به: SVG أو JPG أو PNG، بحجم ملف يصل إلى 10 ميغابايت.

صور لوحة الإدارة

في هذا القسم، يمكنك رفع الصور المعروضة في Back Office (التنسيق الموصى به: JPG أو PNG أو SVG، بحجم ملف يصل إلى 10 ميغابايت):

  • شعار القائمة — الشعار المعروض في القائمة الرئيسية لـ Back Office
  • شعار صفحة تسجيل الدخول — الشعار المعروض في صفحة تسجيل الدخول إلى Back Office
  • خلفية صفحة تسجيل الدخول — صورة الخلفية المطبقة على صفحة تسجيل الدخول إلى Back Office

نظام الألوان

في هذه الصفحة، خصّص إعدادات الألوان للمظهرين الفاتح والداكن في واجهة مستخدم B2CORE.

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

تتوفر إعدادات الألوان لعناصر الواجهة الفردية الموضحة أدناه في قسم إعدادات الألوان المتقدمة.

تفعيل المظهر الفاتح

حدد مربع الاختيار لتفعيل المظهر الفاتح لواجهة مستخدم B2CORE.

فعّل خيار الافتراضي لتعيين المظهر الفاتح كمظهر افتراضي إذا كان كلا المظهرين مفعّلين.


تفعيل المظهر الداكن

حدد مربع الاختيار لتفعيل المظهر الداكن لواجهة مستخدم B2CORE.

فعّل خيار الافتراضي لتعيين المظهر الداكن كمظهر افتراضي إذا كان كلا المظهرين مفعّلين.

إذا لم يتم تحديد أي من مربعي اختيار المظهر، فستستخدم واجهة مستخدم B2CORE المظهرين الفاتح والداكن المحددين مسبقًا من تصميم B2BDemo، وسيتم تجاهل جميع إعدادات الألوان المخصصة المدرجة أدناه.

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

يتم تنظيم إعدادات الألوان المتقدمة ضمن قسمي الرموز الدلالية V1 (فاتح / داكن) والرموز الدلالية V2 (فاتح / داكن)، مما يتيح لك تخصيص كل رمز لوني بشكل منفصل للمظهرين الفاتح والداكن. لإعادة تعيين الرموز اللونية إلى القيم المشتقة من لون علامتك التجارية، انقر فوق زر إعادة تعيين الألوان من العلامة التجارية.

يتم دعم رموز الألوان السداسية العشرية المكونة من 6 أو 8 أحرف فقط.

يتضمن قسم الرموز الدلالية V1 (فاتح / داكن) مجموعات الرموز التالية:

  • التمييز — accent, accentHover, accent40, accent10, demo
  • الحالة — positive, positive20, medium, medium20, negative, negative20
  • السطح — background, background96, card, field, disabled, overlay, tooltip, divider
  • النص — textMain, textSecondary, textSecondary40, textContrast

يتضمن قسم الرموز الدلالية V2 (فاتح / داكن) مجموعات الرموز التالية:

  • التمييز — brand, brandSubtle, brandMuted, alternative, alternativeSubtle, alternativeMuted, positive, positiveSubtle, positiveMuted, medium, mediumSubtle, mediumMuted, negative, negativeSubtle, negativeMuted, neutral, overlay, overlaySubtle, overlayMuted
  • الرموز النصية — onSurface, onSurfaceSecondary, onSurfaceInverse, onBrand, onAlternative, onPositive, onMedium, onNegative, onNeutral, onOverlay, onSurfaceBrand, onSurfaceAlternative, onSurfacePositive, onSurfaceMedium, onSurfaceNegative, onSurfaceOverlay
  • السطح — surfaceLow, surface, surfaceHigh, surfaceHighest, surfaceInverse, backdrop
  • المخطط — outline, outlineStrong
  • الحالة — stateHovered, statePressed, stateHoveredInverse, statePressedInverse, stateDarken, stateDarkenStrong

متغيرات إضافية للمظهر الفاتح/الداكن (json)

استخدم هذا الحقل لتحديد كائن JSON يحتوي على متغيرات إضافية، مثل المتغيرات التي تحدد كيفية تصرف صورة الخلفية في المظهر المعني:

{
"optional-external-bg-position": "0 0",
"optional-external-bg-size": "cover",
"optional-external-bg-repeat": "no-repeat",
"optional-external-bg-attachment": "fixed"
}

"optional-external-bg-position": "0 0"

يضع صورة الخلفية في الزاوية العلوية اليسرى.


"optional-external-bg-size": "cover"

يُحجّم صورة الخلفية لتغطية الصفحة بالكامل.


"optional-external-bg-repeat": "no-repeat"

يمنع تكرار صورة الخلفية (تجانبها) في أي اتجاه.


"optional-external-bg-attachment": "fixed"

يبقي صورة الخلفية ثابتة في مكانها عند تمرير الصفحة. ولن تتحرك مع المحتوى.


الحقول

في هذه الصفحة، يمكنك تحديد حقول تخصيص إضافية.

اسم المشروع

اسم مشروعك المعروض في واجهة مستخدم B2CORE.


النصوص البرمجية (js-script)

أضف نصوص JavaScript (JS) البرمجية هنا. سيتم تنفيذ هذه النصوص تلقائيًا عند فتح العملاء لصفحة إنشاء حساب أو تسجيل الدخول.

آخر تحديث في

في هذه الصفحة