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

ما معنى CSS؟

CSS  هي إختصار لـ Cascading Style Sheets وهي لغة تصميم تجعل المتجر أكثر جاذبية. في العموم،يتعامل CSS مع مظهر المتجر، بالتالي يستخدم في التحكم في لون النص ونمطه، وصورة الخلفية وألوانها ،و أيضا التباعد بين الفقرات، و كذلك أشكال العرض لمختلف الأجهزة وأحجام الشاشة بالإضافة إلى مجموعة كبيرة من التأثيرات الأخرى.

ما هي متطلبات تغيير تصميم متجر سلة CSS؟

• يتطلب صلاحية الدخول لتصميم المتجر.
• كما يتطلب وجود دومين خاص بالمتجر.

ما هي بنية كود الـ CSS؟

عليك أن تعلم أن كود CSS يتكون من 3 مكونات أساسية هي :

•  Selector:العنصر أو مجموعة العناصر التي تريد تنسيقها.
• ثم Property:الخاصية التي ترغب بتعديلها.
• كذلك Value: القيمة الخاصة بهذه الخاصية.

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

ما أهم الخصائص التي يمكنني التحكم بها كمبتدئ في CSS؟

1-الألوان: 

• opacity درجة الشفافية 
• و color اللون 

2-الخلفيات:

• background-color  تضبط لون الخلفية لأحد العناصر
• و box-shadow  إضافة ظل للعنصر
• و background  لون الخلفية

3-شكل الإطار: 

• border-bottom-color لون الإطار السفلي الخاص بالعنصر.
• و border-bottom-width عرض الإطار السفلي للعنصر.
• و border ضبط قيم الخاصيات التي تتحكم بإطار العنصر في آنٍ واحد، وهي: border-color و border-style و border-width

4-الأركان المدورة:

• border-top-right-radius تضبط تدوير الركن العلوي الأيمن من العنصر.
• و border-top-left-radius تضبط تدوير الركن العلوي الأيسر من العنصر.
• و border-bottom-right-radius تضبط تدوير الركن السفلي الأيمن من العنصر.
• و border-bottom-left-radius تضبط تدوير الركن السفلي الأيسر من العنصر.

5-الخطوط:

• font ضبط قيم الخاصيات font-style و font-size وغيرها.
• font-family تُحدِّد قائمةً تحتوي على نوع خط واحد أو أكثر من أنواع الخطوط الخاصة أو العامة،

ما هي الأكواد الأكثر استخداماً في تصميم متجر سلة CSS؟

1- قسم Header :

• حجم الشعار
  • اضغط هنا لنسخ الكود.
• الأيقونات
  • اضغط هنا لنسخ الكود.

2-قسم Nav – section 

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

3-قسم Footer

• الخط والألون
  • اضغط هنا لنسخ الكود.
  • كما يمكنك تغيير لون الشريط السفلي
    • اضغط هنا لنسخ الكود.

بصورة شاملة :يمكنك نسخ أي كود من الأكواد السابقة من هنا