أداة شريط التمرير لمقارنة قبل وبعد لموقع الويب الخاص بك
Show visual transformations with an interactive comparison slider. Jotform's Before and After Slider widget lets you add image pairs, choose horizontal or vertical reveal direction, set drag or hover interaction, add labels and captions, enable fullscreen viewing, and embed the result on your website without code.
كيفية إنشاء عنصر واجهة Before and After Slider
Add image pairs
Paste before and after image URLs, then write clear labels and captions for each comparison.
Customize the reveal
Choose horizontal or vertical direction, set the initial divider position, and use drag, click, or hover interaction.
قم بتضمينها في موقع الويب الخاص بك
Adjust size, ratio, colors, fullscreen behavior, and display rules before publishing the widget.
Show transformations with a comparison widget that fits your page
Compare before and after images
Place two images in one frame so visitors can instantly understand renovation, design, beauty, repair, or product changes.
Use horizontal or vertical reveal
Switch the divider direction to match the subject matter and let visitors inspect changes with drag, click, or hover movement.
Create a small transformation gallery
Add up to three image pairs and enable carousel navigation so visitors can browse multiple project stages or case studies.
اجعلها متوافقة مع تصميم موقعك الإلكتروني.
Control width, image ratio, corner radius, divider size, colors, labels, captions, custom CSS, fullscreen mode, and mobile visibility.
لماذا تتميز أدوات Jotform لمواقع الويب؟
تجعل أدوات Jotform موقع الويب الخاص بك أكثر تفاعلية وتساعد على زيادة معدلات التحويل. تتوفر العديد من الأدوات، بدءًا من تقييمات النجوم وأشرطة تمرير تقييمات العملاء، وصولًا إلى النوافذ المنبثقة التي تعرض تقييمات العملاء وتضمين الوسائط. أضف الأدوات إلى نماذجك أو صفحاتك المقصودة لجمع البيانات، وعرض آراء العملاء، وجمع العملاء المحتملين — دون الحاجة إلى كتابة أكواد.
أضف أدوات Jotform إلى موقعك الإلكتروني باستخدام كود تضمين بسيط. خصّص الأداة، واعرض معاينة لشكلها، ثم أدرجها في أي صفحة تدعم HTML المخصص أو حزم التضمين، وكل ذلك دون الحاجة إلى مطور.
استخدم أدوات مواقع الويب من Jotform لجمع بيانات العملاء المحتملين، وإظهار تقييمات العملاء، وعرض الآراء الاجتماعية، وتضمين ملفات الوسائط، أو إضافة أدوات مفيدة لصفحات ويب. تقوم كل أداة بمساعدة الزوار على التفاعل مع خدماتك مباشرةً من موقعك الإلكتروني.
إذا كنت بحاجة إلى مساعدة في إعداد أداتك أو تخصيصها أو تضمينها أو استكشاف المشكلات وإصلاحها، فإن فريق دعم العملاء في Jotform متاح على مدار الساعة طوال أيام الأسبوع. يمكنك المتابعة بثقة، مع العلم أن المساعدة متاحة عندما تحتاج إليها.
Where to use your Before and After Slider widget
Add the widget anywhere a visual comparison helps visitors trust the result, understand quality, or make a decision faster.
صفحات التجديد والتصميم الداخلي لعرض التحولات التي طرأت على المشاريع المنجزة.
مواقع الجمال والعافية واللياقة البدنية لمقارنة التقدم الملحوظ الذي يحققه العملاء أو الذي تحرزه العلاجات.
صفحات المنتجات لتسليط الضوء على التحديثات أو عمليات الاستعادة أو التعديلات أو تحسينات الميزات.
صفحات المحفظة ودراسات الحالة لجعل النتائج أكثر واقعية من النص وحده.
قوائم العقارات لمقارنة أعمال التجهيز للعرض، والإصلاحات، وتصميم الحدائق، أو أعمال إعادة التصميم.
صفحات الخدمات الإبداعية لعرض عمليات التنقيح، والنماذج الأولية، ومراجعات التصميم، أو عمليات تجديد العلامة التجارية.
حوّل العملاء المحتملين إلى مبيعات حقيقية باستخدام منشئ النماذج من Jotform
حوّل التفاعل إلى نتائج فعلية مع Jotform. أنشئ نماذج قوية لجمع بيانات العملاء المحتملين، واستلام المدفوعات، وأتمتة الردود، كل ذلك في مكان واحد. تصل جميع البيانات المرسلة إلى صندوق الوارد في Jotform الخاص بك، حيث يمكنك المتابعة أو الربط مع تطبيقاتك المفضلة.
ابدأ - إنه مجاني!
أسئلة متكررة ومتداولة
What is a Before and After Slider widget?
تعرض أداة شريط التمرير قبل وبعد صورتين مرتبطتين في إطار تفاعلي واحد. ويمكن للزوار تحريك الفاصل لإظهار المزيد من صورة ما قبل التغيير أو ما بعده ومقارنة التغيير.
Can I choose the slider direction?
How can visitors move the divider?
Can I set the initial divider position?
Can I show more than one comparison?
Can I add labels and captions?
Does the widget support fullscreen viewing?
Does it work on mobile?
هل أحتاج إلى كتابة أكواد؟