سوم
بانر كامل الشاشة مع نصوص (سوم)
مكوّن بانر رئيسي (Hero) يمتد على كامل عرض الشاشة، مصمّم ليكون أول ما يراه الزائر في الصفحة الرئيسية. يعرض محتوى تسويقيًا واضحًا مع نصوص، أزرار، وإحصائيات.
المميزات الرئيسية:
خلفية مرنة: إما صورة تغطي القسم كاملاً أو تدرّج لوني (Gradient) بين لونين قابلين للتخصيص.
عناصر زخرفية: دوائر ضبابية (blur) في الخلفية لإضافة عمق بصري.
محتوى النصوص: شارة (Badge) فوق العنوان، عنوان من سطرين (السطر الثاني بلون مختلف)، ووصف توضيحي.
أزرار الإجراء: زر رئيسي وزر فرعي، كلاهما مع روابط قابلة للتخصيص (منتج، تصنيف، صفحة، رابط خارجي، إلخ).
الإحصائيات: عرض حتى 4 إحصائيات (مثل: عدد العملاء، المنتجات، التقييم) مع قيمة وتسمية لكل واحدة.
بطاقة الوسائط: في شاشات الكمبيوتر فقط، يمكن عرض صورة أو فيديو MP4 في بطاقة جانبية مائلة.
تخصيص الألوان: تخصيص ألوان الخلفية، الشارة، العنوان، الوصف، الأزرار، والإحصائيات.
خيارات العرض: إظهار العنصر في الجوال فقط، أو في الكمبيوتر والتابلت فقط، أو حسب اللغة (عربي/إنجليزي).
دعم RTL: تخطيط متجاوب مع اتجاه اللغة العربية.
حركات بسيطة: ظهور تدريجي (fade-up) للمحتوى.
الاستخدام المثالي: مناسب كأول بانر في الصفحة الرئيسية لعرض العروض، المجموعات الجديدة، أو رسالة ترحيبية للزوار.
النص المتحرك (سوم)
شريط نصي أفقي متحرك (Marquee) يعرض رسائل إعلانية أو تنبيهية بشكل متكرر. يُستخدم غالبًا في الهيدر أو أعلى الصفحة لجذب الانتباه إلى العروض أو أكواد الخصم أو المنتجات الجديدة.
المميزات الرئيسية:
- عرض حتى 4 نصوص متحركة، كل نص يظهر بشكل متتابع مع فصل بينهما بنقطة صغيرة بلون الماركة.
- تكرار النصوص حسب عدد مرات التكرار (من 1 إلى 40).
- ضبط سرعة الحركة (من 1000 إلى 100000 مللي ثانية).
- تخصيص لون النص ولون الخلفية.
- إمكانية تفعيل حدود علوية وسفلية مع اختيار لون الحدود.
- إيقاف الحركة عند تمرير المؤشر فوق الشريط.
- خيارات العرض: الجوال فقط، أو الكمبيوتر والتابلت فقط، أو حسب اللغة (عربي/إنجليزي).
- ارتفاع ثابت (حوالي 2.5rem) ليكون مناسبًا للهيدر.
الاستخدام المثالي: عرض أكواد الخصم، العروض المحدودة، المنتجات الأكثر مبيعًا، أو أي رسائل ترويجية قصيرة تحتاج لفت الانتباه.
التصنيفات (سوم)
قسم يعرض شبكة من البطاقات القابلة للنقر، كل بطاقة تمثّل تصنيفًا أو قسمًا في المتجر مع أيقونة، عنوان، ووصف قصير. مناسب لعرض التصنيفات الرئيسية أو الأقسام المميزة في الصفحة الرئيسية.
المميزات الرئيسية:
عرض حتى 10 بطاقات، كل بطاقة تحتوي على: أيقونة (من مكتبة Salla)، عنوان، ووصف فرعي.
ربط كل بطاقة برابط (تصنيف، منتج، ماركة، صفحة، رابط خارجي، إلخ).
رأس القسم: شارة، عنوان رئيسي، وخط فاصل أسفله.
اختيار عدد الأعمدة في الشاشات الكبيرة: 4 أو 6 أو 8.
تخطيط متجاوب: عمودان في الجوال، 3 في التابلت، و4–8 في الكمبيوتر.
تأثيرات عند التمرير: ظل، رفع البطاقة قليلًا، وتغيير لون خلفية الأيقونة.
تخصيص الألوان: خلفية القسم، الشارة، العنوان، الخط الفاصل، خلفية البطاقات، الأيقونات، والعناوين.
خيارات العرض: الجوال فقط، أو الكمبيوتر والتابلت فقط، أو حسب اللغة (عربي/إنجليزي).
الاستخدام المثالي: عرض تصنيفات المتجر الرئيسية (عطور، أزياء، إلكترونيات، إلخ) أو أقسام مخصصة مع روابط سريعة للتصفح.
الماركات التجارية (سوم)
قسم يعرض شريطًا أفقيًا متحركًا (Marquee) بأسماء وأيقونات الماركات التجارية، مع إمكانية ربط كل ماركة برابط. مناسب لإبراز شركاء المتجر أو العلامات التجارية المعروضة.
المميزات الرئيسية:
- عرض حتى 20 ماركة تجارية، كل ماركة تحتوي على: أيقونة (اختيارية من مكتبة Salla)، اسم، ورابط.
- حركة أفقية مستمرة (يمينًا أو يسارًا) مع إيقاف الحركة عند التمرير.
- ضبط شفافية الماركات: شفافية افتراضية وشفافية عند التمرير (من 0 إلى 100).
- خيار عكس اتجاه الحركة (مناسب للواجهات RTL).
- نص تعريفي قصير أعلى الشريط.
- تخصيص الألوان: خلفية القسم، النص التعريفي، لون الأيقونات، ولون أسماء الماركات.
- تأثير عند التمرير: زيادة وضوح الماركة عند تمرير المؤشر عليها.
الاستخدام المثالي: عرض الماركات المتوفرة في المتجر أو الشريكة معه، لتعزيز الثقة وإتاحة الوصول السريع لصفحات الماركات.
الاحصائيات (سوم)
قسم يعرض إحصائيات المتجر أو العلامة التجارية في شبكة بطاقات، كل بطاقة تحتوي على أيقونة، قيمة رقمية، وتسمية توضيحية. مناسب لإبراز الأرقام التي تعزز الثقة (عدد العملاء، التقييم، سنوات الخبرة، إلخ).
المميزات الرئيسية:
عرض حتى 6 إحصائيات، كل إحصائية تحتوي على: أيقونة (من مكتبة Salla)، قيمة (رقم أو نص)، وتسمية.
تخطيط متجاوب: عمودان في الجوال، 4 أعمدة في الكمبيوتر.
كل أيقونة داخل مربع بخلفية وحدود قابلة للتخصيص.
تخصيص الألوان: خلفية القسم، لون الأيقونة، خلفية الأيقونة، لون القيمة، ولون التسميات.
دعم تأثير العد التصاعدي (Counter) للقيم الرقمية.
دعم اللغتين العربية والإنجليزية لكل إحصائية.
الاستخدام المثالي: عرض أرقام مثل عدد العملاء، متوسط التقييمات، نسبة الرضا، سنوات الخبرة، أو أي إحصائيات تعزز مصداقية المتجر.
عرض مع عداد تنازلي (سوم)
قسم لعرض العروض المحدودة زمنيًا مع عداد تنازلي (أيام، ساعات، دقائق، ثوانٍ) وقائمة منتجات مختارة. مناسب لتسليط الضوء على تخفيضات أو عروض تنتهي في تاريخ محدد.
المميزات الرئيسية:
- عداد تنازلي يعمل حتى تاريخ ووقت انتهاء العرض.
- عرض العداد في صناديق منفصلة مع تسميات (يوم، ساعة، دقيقة، ثانية).
- رأس القسم: شارة، عنوان رئيسي، ونص توضيحي.
- عرض منتجات مختارة من المتجر أسفل العداد (بطاقات عمودية).
- تخصيص الألوان: خلفية القسم، الشارة، العنوان، النص التوضيحي، ولون صناديق العداد.
- دعم اللغتين العربية والإنجليزية للنصوص.
الاستخدام المثالي: عروض نهاية الموسم، تخفيضات الجمعة البيضاء، أو أي عرض محدود بوقت مع عرض المنتجات المعروضة.
بانر العروض الترويجي (سوم)
بانر ترويجي بعرض كامل يعرض العروض وكود الخصم وزر إجراء. مناسب لإبراز العروض الموسمية أو أكواد الخصم أو المنتجات المميزة.
المميزات الرئيسية:
شارة مع أيقونة اختيارية فوق العنوان.
عنوان رئيسي يدعم الأسطر المتعددة.
نص وصفي.
عرض كود الخصم داخل مربع بحدود منقطة.
زر إجراء مع رابط قابل للتخصيص (منتج، تصنيف، صفحة، التخفيضات، رابط خارجي، إلخ).
خلفية مرنة: إما صورة مع طبقة داكنة أو تدرّج لوني من 3 ألوان.
جانب زخرفي (شاشات الكمبيوتر فقط): أيقونة كبيرة مع نص تحتها وتأثير نبض.
تخطيط متجاوب: عمودان في الكمبيوتر، عمود واحد في الجوال.
تخصيص الألوان: الشارة، العنوان، الوصف، كود الخصم، الزر، والأيقونة الجانبية.
زوايا مستديرة وظل للبانر.
الاستخدام المثالي: عرض كود خصم، تخفيضات موسمية، أو منتجات مميزة مع زر واضح للتسوق.
تابعنا على انستغرام (سوم)
قسم يعرض شبكة صور تشبه واجهة إنستغرام، مع رأس يحتوي على شارة وعنوان ونص توضيحي (مثل اسم الحساب). مناسب لعرض منشورات إنستغرام أو صور العملاء أو محتوى المتجر على وسائل التواصل.
المميزات الرئيسية:
عرض حتى 12 صورة في شبكة، كل صورة مربعة الشكل بزوايا مستديرة.
ربط كل صورة برابط اختياري (رابط المنشور في إنستغرام أو أي رابط آخر).
رأس القسم: شارة مع أيقونة إنستغرام، عنوان، خط فاصل، ونص توضيحي (مثل @username).
اختيار عدد الأعمدة: 2، 3، 4، 5، 6، أو 8 (في الشاشات الكبيرة).
تخطيط متجاوب: عمودان في الجوال، 3 في التابلت، و2–8 في الكمبيوتر حسب الإعداد.
تأثير عند التمرير: تكبير الصورة وظهور طبقة شفافة مع أيقونة إنستغرام.
تخصيص الألوان: خلفية القسم، الشارة، العنوان، النص التوضيحي، الخط الفاصل.
خيارات العرض: الجوال فقط، أو الكمبيوتر والتابلت فقط، أو حسب اللغة (عربي/إنجليزي).
الاستخدام المثالي: عرض منشورات إنستغرام، صور العملاء، أو محتوى المتجر على وسائل التواصل لزيادة التفاعل وربط المتجر بحساب إنستغرام.
المميزات (سوم)
قسم يعرض شبكة بطاقات للمميزات أو الخدمات (مثل التوصيل السريع، الضمان، الجودة). كل بطاقة تحتوي على أيقونة، عنوان، ووصف قصير.
المميزات الرئيسية:
عرض حتى 10 مميزات، كل ميزة تحتوي على: أيقونة (من مكتبة Salla)، عنوان، ووصف.
تخصيص ألوان كل ميزة: خلفية الأيقونة، لون الأيقونة، لون العنوان، ولون الوصف.
اختيار عدد الأعمدة في الشاشات الكبيرة: 2 أو 3 أو 4.
تخطيط متجاوب: عمودان في الجوال، و2–4 أعمدة في الكمبيوتر حسب الإعداد.
بطاقات بزوايا مستديرة وظل، مع زيادة الظل عند التمرير.
تخصيص لون خلفية القسم ولون خلفية البطاقات.
خيارات العرض: الجوال فقط، أو الكمبيوتر والتابلت فقط، أو حسب اللغة (عربي/إنجليزي).
الاستخدام المثالي: عرض مميزات المتجر مثل التوصيل السريع، الضمان، الدفع الآمن، أو أي خدمات تزيد ثقة العميل.
التقييمات (سوم)
قسم لعرض تقييمات العملاء وآرائهم في بطاقات، مع نجوم وتفاصيل العميل. مناسب لإبراز تجارب العملاء وزيادة الثقة في المتجر.
المميزات الرئيسية:
عرض حتى 12 تقييمًا، كل تقييم يحتوي على: حرف الاسم (Avatar)، اسم العميل، تقييم بالنجوم (1–5)، نص التقييم، والعنوان (المدينة أو الدولة).
عرض النجوم (ممتلئة وفارغة) حسب التقييم.
رأس القسم: شارة، عنوان رئيسي، وخط فاصل.
اختيار عدد الأعمدة: للتابلت (1، 2، أو 3) وللكمبيوتر (2، 3، أو 4).
تخطيط متجاوب حسب حجم الشاشة.
بطاقات بزوايا مستديرة وظل يزداد عند التمرير.
تخصيص الألوان: خلفية القسم، الشارة، العنوان، الخط الفاصل، خلفية البطاقات، الأفاتار، اسم العميل، النجوم، نص التقييم، والنص الإضافي.
دعم اللغتين العربية والإنجليزية لكل تقييم.
الاستخدام المثالي: عرض آراء العملاء، شهادات، أو تقييمات حقيقية لتعزيز المصداقية ومساعدة الزوار على اتخاذ قرار الشراء.
المجموعات (سوم)
قسم يعرض بطاقات لمجموعات أو إطلالات جاهزة (مثل: إطلالة العود، أناقة رجل الأعمال)، كل بطاقة تحتوي على عنوان، وصف، وسوم، سعر، وزر رابط. مناسب لعرض مجموعات منتجات أو إطلالات كاملة.
المميزات الرئيسية:
- عرض من 1 إلى 4 بطاقات، كل بطاقة تحتوي على: عنوان، وصف، وسمان اختياريان، سعر بعد الخصم، سعر قبل الخصم، ورابط (منتج، تصنيف، أو رابط خارجي).
- خلفية لكل بطاقة: إما صورة أو تدرّج لوني من 3 ألوان مع أيقونة كبيرة في المنتصف.
- زر مشترك لجميع البطاقات (مثل: أضف الكل) مع رابط خاص بكل بطاقة.
- رأس القسم: شارة، عنوان رئيسي، خط فاصل، ونص توضيحي.
- اختيار عدد الأعمدة في الشاشات الكبيرة: 2 أو 3 أو 4.
- تخطيط متجاوب: عمود واحد في الجوال، و2–4 أعمدة في الشاشات الكبيرة.
- ارتفاع ثابت للبطاقات (حوالي 420px) مع طبقة عند التمرير.
- خلفية القسم: إما صورة أو لون.
- تخصيص الألوان: الشارة، العنوان، الوصف، الخط الفاصل، السعر، الزر، وخلفية القسم.
- دعم اللغتين العربية والإنجليزية.
الاستخدام المثالي: عرض مجموعات أو إطلالات جاهزة (عطر + بخور، ساعة + محفظة، إلخ) مع أسعار وزر لشراء المجموعة أو التصفح.
بانر العروض (سوم)
بانر دعوة للإجراء (CTA) بسيط ومركّز يعرض عرضًا أو رسالة ترويجية مع زر واضح. مناسب لتحفيز التسجيل أو الشراء أو زيارة صفحة العروض.
المميزات الرئيسية:
- تخطيط مركّز: أيقونة اختيارية، عنوان، وصف، وزر إجراء.
- خلفية بتدرّج لوني من لونين مع نمط خفيف.
- أيقونة داخل مربع مستدير بلون تمييز.
- زر مع رابط قابل للتخصيص (منتج، تصنيف، ماركة، صفحة، التخفيضات، رابط خارجي).
- تخصيص الألوان: لونا الخلفية، لون التمييز، العنوان، الوصف، وخلفية ونص الزر.
- تأثير تكبير خفيف للزر عند التمرير.
- خيارات العرض: الجوال فقط، أو الكمبيوتر والتابلت فقط، أو حسب اللغة (عربي/إنجليزي).
- دعم اللغتين العربية والإنجليزية.
الاستخدام المثالي: عرض خصم أول طلب، تسجيل حساب جديد، أو التوجيه إلى صفحة التخفيضات أو منتجات محددة.
الأسئلة الشائعة (سوم)
قسم أكورديون للأسئلة الشائعة وأجوبتها، مع إمكانية إظهار تصنيف لكل سؤال وزر تواصل في الأسفل. مناسب لتوضيح سياسات الشحن، الإرجاع، الدفع، وغيرها.
المميزات الرئيسية:
- عرض حتى 15 سؤالاً، كل سؤال يحتوي على: نص السؤال، الإجابة، وتصنيف اختياري (مثل: الشحن، الدفع، الإرجاع).
- أكورديون قابل للطي والفتح مع تغيير ألوان السؤال والأيقونة عند الفتح.
- شكل الأيقونة: سهم أو علامة زائد/ناقص.
- شكل الحواف: بدون، صغير، متوسط، كبير، أو كبير جداً.
- رأس القسم (اختياري): عنوان، نص فرعي، ومحاذاة (بداية، وسط، نهاية).
- عرض القسم: عادي، ضيق، متوسط، أو كامل.
- إظهار تصنيفات الأسئلة كشارات اختيارية.
- زر تواصل (اختياري) أسفل الأسئلة: نص قبل الزر، زر مع رابط (صفحة أو رابط خارجي).
- تخصيص الألوان: خلفية القسم، العنوان، النص الفرعي، السؤال (مغلق/مفتوح)، الإجابة، الحدود، الأيقونة، التصنيفات، وزر التواصل.
- خيارات العرض: الجوال فقط، أو الكمبيوتر والتابلت فقط، أو حسب اللغة (عربي/إنجليزي).
- دعم اللغتين العربية والإنجليزية لكل سؤال وإجابة.
الاستخدام المثالي: الإجابة عن أسئلة الشحن، الإرجاع، الدفع، والمنتجات، وتوجيه من لم يجد إجابة لصفحة التواصل.
تحميل التطبيق (سوم)
قسم لعرض تطبيق المتجر وتشجيع التحميل، مع أزرار App Store و Google Play، وإحصائيات اختيارية، ومحاكاة شكل هاتف مع بطاقات عائمة.
المميزات الرئيسية:
شارة مع أيقونة اختيارية فوق العنوان.
عنوان رئيسي يدعم الأسطر المتعددة، ووصف توضيحي.
إحصائيات اختيارية (حتى 4): أيقونة، قيمة، وتسمية (مثل التقييم، عدد التحميلات).
زر App Store: رابط، نص، ونص فرعي (مثل: حمّل من).
زر Google Play: رابط، نص، ونص فرعي.
خلفية بتدرّج لوني من لونين مع عناصر زخرفية ضبابية.
شكل هاتف (شاشات الكمبيوتر فقط): إطار هاتف مع اسم المتجر وشعاره.
بطاقات عائمة (حتى 2): حول الهاتف، كل بطاقة تحتوي على أيقونة، عنوان، ووصف، وموضع (يسار أو يمين)، مع حركة عائمة.
تخصيص الألوان: الخلفية، لون التمييز، العنوان، الوصف، والإحصائيات، وأزرار التحميل.
خيارات العرض: الجوال فقط، أو الكمبيوتر والتابلت فقط، أو حسب اللغة (عربي/إنجليزي).
دعم اللغتين العربية والإنجليزية.
الاستخدام المثالي: تشجيع تحميل تطبيق المتجر عبر روابط App Store و Google Play، مع إبراز مميزات التطبيق والإحصائيات.
شبكة بنتو (سوم)
قسم يعرض شبكة غير منتظمة (Bento) بأحجام مختلفة، كل خلية تحتوي على صورة، عنوان، ووصف، وشارة اختيارية. مناسب لعرض تصنيفات أو عروض بأسلوب بصري مميز.
المميزات الرئيسية:
- عرض من 4 إلى 6 عناصر بتخطيط ثابت: العنصر الأول كبير (2×2)، الثاني طويل (1×2)، والباقي مربعات أصغر.
- كل عنصر يحتوي على: صورة، عنوان، وصف فرعي، شارة اختيارية، ورابط (منتج، تصنيف، ماركة، صفحة، التخفيضات، أو رابط خارجي).
- طبقة تظليل فوق الصور لتحسين قراءة النص، مع ضبط اللون والشفافية (0–80%).
- عنوان اختياري للقسم.
- تأثيرات عند التمرير: تكبير الصورة، تقليل التظليل، ورفع البطاقة قليلًا.
- تخصيص الألوان: خلفية القسم، لون التظليل، شفافيته، لون النص، والشارات.
- تخطيط متجاوب: عمودان في الجوال، 3 أعمدة في الشاشات الأكبر.
- خيارات العرض: الجوال فقط، أو الكمبيوتر والتابلت فقط، أو حسب اللغة (عربي/إنجليزي).
- دعم اللغتين العربية والإنجليزية.
الاستخدام المثالي: عرض تصنيفات أو عروض رئيسية (عطور، إلكترونيات، هدايا، إلخ) بتخطيط بصري جذاب يشبه واجهات Apple.