مقارنة الصور
الصورة تساوي ألف كلمة، لكن المقارنة لا تقدر بثمن. يتيح لك عنصر مقارنة الصور عرض التغييرات أو الترقيات أو الاختلافات باستخدام شريط التمرير التفاعلي. ضع صورتين جنبًا إلى جنب ودع الزائرين يسحبون المقبض للكشف عن “after” على “before.” مثالي للتجديدات أو نتائج اللياقة البدنية أو تجديد المنتجات أو أي قصة مرئية للتقدم. مع التحكم الكامل في المقبض والملصقات والتراكب، يمكنك إنشاء مقارنة احترافية مقنعة تتفاعل وتقنع في ثوانٍ.
شريط التمرير التفاعلي للسحب والكشف
السحر في التفاعل. قم بتحميل صور “Before” و“After”، ثم اضبط النسبة المرئية الأولية مثل البدء بنسبة 50% لإظهار كليهما بالتساوي. يمكن للمستخدمين النقر على المقبض وسحبه للانزلاق بين الصورتين، مما يمنحهم التحكم المباشر في الكشف. اختر الاتجاه (أفقيًا أو رأسيًا) وقم بتعيين التفاعل على سحب الماوس أو التمرير باللمس. إنها طريقة غامرة لإظهار التغيير.
- التحكم البديهي: يقوم المستخدمون بسحب المقبض لمقارنة الصورتين بشكل تفاعلي.
- اتجاه مرن: قم بإنشاء أشرطة تمرير مقارنة أفقية (يسار/يمين) أو رأسية (أعلى/أسفل).
- نقطة البداية القابلة للتعديل: اضبط التقسيم الأولي (على سبيل المثال، 30% قبل، 70% بعد) لتسليط الضوء على النتيجة.
تراكب قابل للتخصيص وملصقات واضحة
تأكد من أن المشاهدين يفهمون ما يرونه. قم بتمكين التراكب لعرض تسميات “Before” و“After” مباشرة على الصور. قم بتخصيص هذه التسميات بالكامل: قم بتغيير النص والطباعة والألوان والخلفية. يمكنك حتى استخدام التدرج للتراكب. قم بتصميم الحالات العادية وحالات التمرير بشكل منفصل، وتحكم في حشوة التراكب وهوامشه وحدوده للحصول على مظهر مصقول ومتكامل.
- نص التسمية المخصص: قم بتغيير “Before/After” إلى أي شيء مثل “Old/New،”“Original/Enhanced،” وما إلى ذلك.
- خلفية تراكب أنيقة: استخدم الألوان الصلبة أو التدرجات أو حتى الصور لخلفيات الملصق.
- سياق مرئي واضح: تأكد من أن المشاهدين لا يتساءلون أبدًا عن الصورة التي توجد بها.
تصميم احترافي للمقبض والحاويات
يجب أن يبدو شريط التمرير جزءًا من تصميمك، وليس أداة عامة. قم بتخصيص المقبض بالكامل: قم بتغيير لون الشريط وحجمه، وقم بتصميم صندوق السحب باستخدام الرموز والألوان والخلفيات، وأضف Box Shadow وBorder Radius. بعد ذلك، قم بتصميم الحاوية الرئيسية (نمط التخطيط) بالحدود والحشو والظلال. يمكن تصميم كل عنصر من المقبض إلى الملصقات إلى الحاوية 7 بما يتناسب مع علامتك التجارية.
- تصميم مقبض السحب: قم بتصميم شريط التمرير والمربع القابل للسحب باستخدام الرموز والألوان وتأثيرات التمرير.
- تلميع الحاويات: أضف الحدود والظلال والمسافات إلى الأداة بحيث تتناسب بسلاسة مع تخطيطك.
- اللمس المستجيب: تم تصميم المقبض ليكون سهل الإمساك والسحب على كل من أجهزة سطح المكتب وشاشات اللمس.
الأسئلة المتداولة لمقارنة الصور
هل يمكنني استخدام هذا لمقارنة أكثر من صورتين؟
لا، تم تصميم هذا العنصر خصيصًا لإجراء مقارنة مباشرة بين صورتين جنبًا إلى جنب. إنه مثالي لسيناريوهات ما قبل/بعد. لعرض صور أو حالات متعددة، فكر في استخدام Gallery Slider أو Image Carousel بدلاً من ذلك.
كيف يعمل هذا على الهواتف المحمولة؟
ممتاز! شريط التمرير سهل اللمس بالكامل. يمكن للمستخدمين التمرير إلى اليسار/اليمين (أو لأعلى/لأسفل) لتحريك المقبض. العنصر سريع الاستجابة، ويمكنك ضبط الإعدادات مثل حجم الملصق وحجم المقبض للجوال في وضع التحرير سريع الاستجابة الخاص بـ Elementor.
هل يمكنني تغيير النص الموجود على الملصقات؟
قطعاً. يمكنك تغيير النص الافتراضي “Before” و“After” إلى أي شيء تريده مباشرة في إعدادات المحتوى. يتيح لك هذا تخصيص التسميات لأي سيناريو، مثل “Day/Night، أو” “بدون/مع،” أو“Product A/Product B.”
ما هو أفضل استخدام للاتجاه العمودي؟
تعد أشرطة التمرير العمودية رائعة لمقارنة الصور الطويلة، مثل الصور الشخصية كاملة الطول، أو واجهات المباني، أو أي تحويل “top مقابل الأسفل. إنه أيضًا خيار مرئي فريد يمكن أن يجعل المقارنة الخاصة بك بارزة على صفحة ذات محتوى أفقي.
هل سيؤدي استخدام صورتين عاليتي الدقة إلى إبطاء صفحتي؟
يمكن ذلك، إذا كانت الصور كبيرة جدًا. استخدم إعداد دقة الصورة بحكمة (على سبيل المثال، “Large” بدلاً من "Full") وقم دائمًا بتحسين صورك للويب قبل التحميل. العنصر نفسه خفيف الوزن، ولكن حجم ملف الصورة هو العامل الرئيسي للأداء.
هل يمكنني بدء شريط التمرير بالصورة "بعد" المخفية في الغالب؟
نعم، استخدم إعداد النسبة المرئية. إذا قمت بتعيينها على 90%، فستشغل صورة “Before” 90% من المساحة، مما يؤدي إلى إخفاء معظم صورة “After” حتى يسحب المستخدم المقبض. هذا رائع لإنشاء كشف مفاجئ.
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
ناسخ البريد/الصفحة
