قسم قبل وبعد يضع صورتين فوق بعضهما مع فاصل. يسحب المتسوقون الفاصل لإظهار جزء أكبر من إحدى الصورتين. استخدمه للنتائج (قبل وبعد)، أو للونين، أو لتشطيبين لمنتج ما.
أضف القسم
- افتح المنشئ وانتقل إلى الصفحة التي تريدها. يعمل في الصفحة الرئيسية وصفحات المنتج والهبوط والمجموعة والمجموعات، حتى 3 في الصفحة.
- في تبويب الأقسام، انقر على إضافة قسم جديد واختر قبل وبعد من مجموعة المحتوى.
- انقر على عنصر قبل وبعد بداخله واختر صورتيك، ثم انقر على نشر.
عنصر قبل وبعد
هذا العنصر يضم الصورتين. يكون موجودًا دائمًا في القسم ولا يمكن حذفه.
- صورة قبل وصورة بعد: الصورتان. استخدم صورًا ملتقطة من الزاوية نفسها، لتتطابقا.
- تسمية قبل وتسمية بعد: وسم قصير على زاوية كل صورة، مثل "قبل" و"بعد"، أو "أسود" و"أبيض". اتركه فارغًا لإخفاء الوسم.
- الاتجاه: أفقي يستخدم فاصلًا يسحبه المتسوقون يمينًا ويسارًا. وعمودي يستخدم فاصلًا يسحبونه إلى الأعلى والأسفل.
- النسبة: شكل الإطار. تلقائي يتبع صورة قبل، أو اختر عمودي أو مربع أو أفقي. تُقص الصورتان إلى الإطار نفسه.
- موضع الفاصل: مكان بداية الفاصل، من 5% إلى 95%. عند 50% يرى المتسوقون نصف كل صورة.
- اعرض تلميحًا عند ظهوره: يتحرك الفاصل قليلًا وحده، فيفهم المتسوقون أنهم يستطيعون سحبه.
- اتبع مؤشر الفأرة على الحاسوب: على الحواسيب يتبع الفاصل الفأرة دون نقر. وعلى الهواتف يسحب المتسوقون دائمًا.
- استخدم نظام ألوان العنصر الأب: يستخدم الفاصل والمقبض والوسوم ألوان القسم. أوقفه لاختيار نظام الألوان آخر.
إعدادات القسم والعنوان
أضف حتى 2 من عناصر نص، و1 فاصل، و1 مجموعة عناصر لعنوان ونص قصير.
- الاتجاه: عمودي يضع العنوان فوق الصور، وأفقي يضعه بجانبها.
- تكديس عمودياً على الجوال: مفعّل افتراضيًا، لتحتفظ الصور بعرض الهاتف الكامل.
- موضع والمحاذاة، وعرض القسم، ونظام الألوان، والهامش الداخلي، وتبويب CSS مخصص.
في صفحة المنتج
يمكن وضع عنصر قبل وبعد نفسه أيضًا داخل قسمي معلومات المنتج ومعلومات صفحة الهبوط، وداخل التبويبات القابلة للطي، لتكون المقارنة بجانب زر الشراء. راجع كيف أضيف تبويبات قابلة للطي، أو مواعيد التوصيل، أو دليل المقاسات، أو شارات، أو صور قبل وبعد إلى صفحة المنتج؟
معلومات مفيدة
- في متجرك المباشر، لا تظهر المقارنة إلا بعد اختيار الصورتين. ويعرض المنشئ صورًا نموذجية حتى ذلك الحين.
- يستطيع المتسوقون أيضًا تحريك الفاصل بلوحة المفاتيح.
- المتسوقون الذين فعّلوا تقليل الحركة على أجهزتهم لا يرون حركة التلميح.
- الصور تبدو مقصوصة؟ اختر النسبة الأقرب إلى صورك، أو استخدم صورًا بالشكل نفسه.
- لا تستخدم إلا صورًا حقيقية لنتائج حقيقية.