الألوان والخطوط والهوية البصرية

أين توجد هذه الإعدادات

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

مجموعات الألوان

تستخدم Storeep لوحة ألوان تضم حتى 9 مجموعات ألوان. يشير كل قسم وكتلة ومكوّن في متجرك إلى إحدى هذه المجموعات برقمها (من 1 إلى 9). يؤدي تغيير ألوان مجموعة ما إلى تحديث فوري لكل قسم يستخدمها، عبر جميع الصفحات.

أدوار الألوان داخل كل مجموعة

تحدد كل مجموعة أدوار الألوان التالية، وجميعها تُضبط بقيم ألوان سداسية عشرية:

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

نصائح لمجموعات ألوان قوية

• استخدم لونًا فاتحًا محايدًا لـالخلفية في معظم الأقسام، واحتفظ بالألوان الجريئة لمجموعة مميزة واحدة تُستخدم في أقسام البطل والحث على الإجراء.
• اجعل خلفية الزر الأساسي مميزة بصريًا عن خلفية القسم، لأن الزر يجب أن يبرز بوضوح.
• أبقِ الخلفية الداخلية تدرجًا خفيفًا جدًا من الخلفية الرئيسية كي تكون خلفيات البطاقات مميزة دون أن تكون صادمة.
• استهدف تباينًا لا يقل عن 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.

بالنسبة للمتاجر التي تحتوي على محتوى عربي، تُقرَن الخطوط تلقائيًا بنظيراتها العربية المطابقة: على سبيل المثال، يُقرَن Inter مع Cairo، وPoppins مع Tajawal. لا حاجة لاختيار الخط العربي بشكل منفصل.

عرض الصفحة

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

الشعار

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

أيقونة الموقع

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

صورة خلفية الصفحة

أيضًا في الإعدادات ← الهوية البصرية: يمكنك اختياريًا ضبط صورة خلفية للصفحة بأكملها. اضبط كيفية تحجيمها (تغطية تملأ منفذ العرض بالكامل، واحتواء يُلائم الصورة داخله) وما إذا كانت تتكرر (تتبلط) أو تبقى صورة واحدة خلف المحتوى المتمرر.

CSS وJavaScript المخصصان عامةً

للتخصيصات المتقدمة التي لا تستطيع الإعدادات القياسية تحقيقها، توفر الإعداداتحقل CSS العام (حتى 1000 حرف) وحقل JS العام (حتى 1000 حرف). تُحقَن أكواد CSS المُدخلة هنا في كل صفحة من المتجر؛ وتعمل أكواد JS المُدخلة هنا في كل صفحة. استخدمها باعتدال، وفضّل قسم الكود المخصص للتخصيصات الخاصة بصفحة بعينها.