Skip to Content
عناصر الصفحة الرئيسيةتبويبات المنتجات

تبويبات المنتجات

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


خيارات الخلفية

تتحكم هذه الخيارات في شكل المساحة أو الخلفية التي تقع خلف المكون بالكامل.

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

خيارات العنوان

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

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

خيارات المسافات

تتحكم هذه الخيارات في المسافات الداخلية للمكون، لإضافة مسافات خارجية يرجى إضافة عنصر «فاصل» من قائمة المكونات.

اسم الخيارالوصف
المسافة العلوية - شاشات الكمبيوترتحديد مقدار الفراغ أعلى المكون عند التصفح من جهاز الكمبيوتر.
المسافة العلوية - شاشات الجوالتحديد مقدار الفراغ أعلى المكون عند التصفح من الجوال لضمان مظهر متناسق.
المسافة السفلية - شاشات الكمبيوترتحديد مقدار الفراغ أسفل المكون عند التصفح من جهاز الكمبيوتر.
المسافة السفلية - شاشات الجوالتحديد مقدار الفراغ أسفل المكون عند التصفح من الجوال.

خيارات تبويبات المنتجات (الإعدادات العامة)

تتحكم هذه الخيارات في طريقة عرض وتخطيط التبويبات والمنتجات داخلها.

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

قائمة التبويبات

من هنا يمكنك إضافة التبويبات نفسها (كحد أقصى 8 تبويبات)، وكل تبويب يحتوي على الإعدادات التالية للتحكم في المنتجات التي ستظهر بداخله:

اسم الخيارالوصف
العنواناسم التبويب الذي سيظهر للعميل لينقر عليه (مثال: “ملابس رجالية”، “تخفيضات الشتاء”).
نوع المنتجاتلاختيار مصدر المنتجات التي ستعرض داخل هذا التبويب تحديداً (إما “أحدث المنتجات” المضافة لمتجرك، أو جلب “منتجات من تصنيف” معين، أو تحديد “منتجات مختارة” يدوياً).
المنتجات المختارةيظهر هذا الخيار إذا اخترت “منتجات مختارة”، ويتيح لك البحث وتحديد المنتجات الفردية التي ترغب بعرضها (كحد أقصى 12 منتجاً).
التصنيفيظهر هذا الخيار إذا اخترت عرض “منتجات من تصنيف”، ويتيح لك اختيار القسم أو الفئة (مثل: الساعات) ليتم عرض منتجاته تلقائياً في هذا التبويب.
عدد المنتجاتلتحديد الحد الأقصى لعدد المنتجات المسموح بظهورها داخل هذا التبويب (من 4 وحتى 32 منتجاً).