قبل وبعد

مقارنة بين صورتين بفاصل قابل للسحب، يتيح للزائر السحب لاستعراض صورة “قبل” وصورة “بعد” - مثالي لعرض تحول، تجديد، نتيجة عناية بالبشرة، أو أي قصة قبل/بعد.

اتجاه المقارنة

هل يسحب الزائر الفاصل يميناً/يساراً (أفقي) أم أعلى/أسفل (عمودي) لاستعراض المزيد من صورة القبل أو البعد.

موضع النص

مكان استقرار نص عنوان القسم بالنسبة لصور المقارنة: أعلاها، أسفلها، أو بجانبها (مع تقديم النص أولاً أو الصور أولاً).

أبعاد الصور

الشكل الذي تُقتصّ عليه صور القبل والبعد: أبعادها الأصلية، أفقي 16:9، عريض 3:2، مربع 1:1، أو طولي 3:4.

حجم المقارنة

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

العرض المخصص (بكسل)

العرض الدقيق لأداة المقارنة بالبكسل. يُستخدم فقط عندما يكون حجم المقارنة “مخصص”.

موضع الفاصل الابتدائي (%)

مكان بداية خط الفاصل عند تحميل الصفحة، كنسبة عبر الصور - 50% تجعله في المنتصف، معروضاً نصف كل صورة.

صورة (قبل) / صورة (بعد)

الصورتان اللتان تتم مقارنتهما - الحالة الأولى والنتيجة.

تسمية (قبل) / تسمية (بعد)

التسميات النصية الصغيرة المعروضة على كل جانب من الفاصل (مثل “قبل” و“بعد”). تظهر فقط عند تفعيل “إظهار التسميات”.

إظهار التسميات

عند التفعيل، يعرض تسميات قبل/بعد النصية فوق الصور.

نص علوي صغير

سطر نص صغير يظهر أعلى عنوان القسم - مفيد لشعار قصير أو تسمية تصنيف.

عنوان القسم وزخرفته

• العنوان - العنوان الرئيسي للقسم.
• العنوان الفرعي - نص إضافي يظهر قرب العنوان.
• سماكة خط العنوان - درجة سماكة نص العنوان، من خفيف إلى عريض جداً.
• سماكة خط الوصف - درجة سماكة نص العنوان الفرعي، من خفيف إلى عريض جداً.
• لون العنوان الرئيسي (اختياري) - لون مخصص لعنوان القسم. اتركه فارغاً للإبقاء على اللون الافتراضي.
• لون العنوان الفرعي (اختياري) - لون مخصص للعنوان الفرعي. اتركه فارغاً للإبقاء على اللون الافتراضي.

محاذاة النص

هل يُحاذى نص العنوان لبداية السطر، المنتصف، أو نهاية السطر.

إعدادات الزر

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

لون مقبض السحب

لون المقبض الذي يسحبه الزائر لتحريك الفاصل.

لون خط الفاصل

لون الخط الذي يفصل بين صورتي القبل والبعد.

لون خلفية التسمية / لون نص التسمية

لون خلفية ونص تسميات قبل/بعد.

لون خلفية القسم

لون الخلفية خلف القسم بالكامل، يظهر في أي فراغ حول أداة المقارنة.