تخطٍّ إلى المحتوى
المساعدة
العربية
منشئ الواجهة الأمامية للمتجر

كيف أغيّر ألوان المتجر والخطوط والشعار والأيقونة المفضلة (Favicon)؟

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

مكان وجود هذه الإعدادات

يتم ضبط الهوية البصرية لكل سوق، وداخل السوق تؤثر على جميع الصفحات دفعة واحدة. افتح أداة البناء، ثم اختر السوق باستخدام زر الأسواق (علم الدولة) في أعلى الشريط الجانبي الأيسر، ثم افتح علامة تبويب الإعدادات (أيقونة الترس). تحتوي الإعدادات على علامات تبويب فرعية بهذا الترتيب: الهوية البصرية، الألوان، الخطوط، التخطيط، الحركات، الأتمتة، المدخلات، الأيقونات، المحظورات، الدفع، نموذج الدفع، صفحة الصيانة، CSS مخصص، وJavascript مخصص. التغييرات تطبق على السوق الذي اخترته وتصبح مباشرة عند النقر على نشر. عند تبديل السوق، يتم تحميل ألوان وخطوط وتخطيط ذلك السوق تلقائياً.

مخططات الألوان

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

أدوار الألوان في كل مخطط

كل مخطط يحدد هذه الأدوار، جميعها بقيم hex:

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

نصائح لمخططات ألوان قوية

  • استخدم خلفية فاتحة ومحايدة في معظم الأقسام، وخصص الألوان الجريئة لمخطط تمييز واحد في أقسام البطل والدعوة لاتخاذ إجراء.
  • اجعل خلفية الزر الرئيسي مختلفة بوضوح عن خلفية القسم ليبرز الزر.
  • اجعل الخلفية الداخلية بدرجة لونية خفيفة من الخلفية الرئيسية حتى تظهر البطاقات منفصلة بدون تنافر.
  • استهدف نسبة تباين لا تقل عن 4.5:1 بين النص وخلفيته.

الخطوط

تقوم علامة تبويب الخطوط بتعيين أربعة أدوار لعائلة خط لكل منها:

  • النص الرئيسي: نص الفقرات والوصف.
  • العناوين: جميع العناوين في المتجر.
  • العناوين الفرعية: العناوين الثانوية وعناوين الأقسام الفرعية.
  • التمييز: خط زخرفي للأسعار والشارات والتأكيدات الزخرفية.

الخطوط المتاحة: Inter، Helvetica، SF Mono، New York، System UI، Roboto، Open Sans، Lato، Montserrat، Poppins، Raleway، Nunito، Merriweather، Playfair Display، Lora، PT Sans، PT Serif، Quicksand، Space Grotesk، DM Sans، Syne، Manrope، Outfit، Urbanist، Oswald، Bebas Neue، Abel، Abril Fatface، وAcme. للمتاجر التي تحتوي على محتوى عربي، يتم إقران كل خط تلقائياً مع خط عربي مناسب، ولا تحتاج لاختيار خط عربي بشكل منفصل.

عرض الصفحة

تحتوي علامة تبويب التخطيط على شريط تمرير عرض الصفحة الذي يحدد الحد الأقصى لعرض شبكة المحتوى الرئيسية، من 900 إلى 1400 بكسل بخطوات 100 (أي 900، 1000، 1100، 1200، 1300، أو 1400؛ الافتراضي 1200). الأقسام المضبوطة على عرض الصفحة تلتزم بهذا العرض؛ أما الأقسام المضبوطة على كامل العرض فتملأ الشاشة دائماً بغض النظر عن القيمة. في الشاشات الأضيق من العرض المختار، تنكمش الأقسام لتملأ الشاشة بنسبة 100%.

الشعار

يتم تعيين الشعار في مكانين: كتلة الشعار داخل قسم رأس الصفحة، وكتلة من نحن في التذييل. انقر على الكتلة، ثم استخدم منتقي صورة الشعار لاختيار صورة من مكتبة الوسائط أو رفع صورة جديدة. بعد اختيارها، حدد العرض والارتفاع (كل منهما من 20 إلى 300 بكسل)؛ البعد الآخر يتغير تلقائياً للحفاظ على نسبة الأبعاد. الشعار في الرأس افتراضياً بعرض 120 بكسل وارتفاع 50 بكسل، ويمكنك ضبط موضعه الأفقي (يسار، وسط، يمين) والمسافة الداخلية. افتراضياً، الشعار في الرأس يربط إلى الصفحة الرئيسية؛ يمكنك جعله للزينة فقط بإيقاف خيار توجيه الشعار إلى الصفحة الرئيسية في مجموعة رأس الصفحة ضمن علامة تبويب المحظورات.

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

قم بتعيين الأيقونة المفضلة في علامة تبويب الهوية البصرية. انقر على اختيار الأيقونة المفضلة واختر صورة PNG أو JPEG أو WEBP أو ICO (الحجم الموصى به 32×32 أو 16×16 بكسل). تظهر في علامات تبويب المتصفح والإشارات المرجعية.

صورة خلفية الجسم

أيضاً في علامة تبويب الهوية البصرية، يمكنك اختيارياً تعيين صورة للجسم خلف المتجر بالكامل (PNG أو JPEG أو WEBP). بعد اختيار صورة، تظهر لك خياران: الحجم (تعبئة تملأ الشاشة وتقص إذا لزم الأمر؛ احتواء تعرض الصورة كاملة) والتكرار (عند التفعيل، تتكرر الصورة وتتحرك مع الصفحة؛ عند الإيقاف، تبقى صورة واحدة ثابتة في الخلفية أثناء تمرير المحتوى فوقها). استخدم صورة مضغوطة جيداً لتجنب بطء تحميل الصفحة.

CSS وJavaScript مخصص

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