كيفية إضافة سلايدر قبل وبعد في Wix

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

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

الخيار 1: تثبيت إضافة من سوق تطبيقات Wix

المسار الأكثر وضوحاً هو سوق تطبيقات Wix. ابحث عن “before and after slider”، وانقر مرة واحدة، وسيصبح لديك سلايدر مقارنة يعمل على الصفحة. لا توجد أكواد تضمين، ولا وضع المطور.

تظهر العقبة بعد التثبيت. تعمل معظم هذه التطبيقات بنموذج فريميوم (Freemium)، وسيتعين عليك تقديم تنازلات في الباقة المجانية. يضع تطبيق PURPLE Before & After Slider، وهو أحد الخيارات الحاصلة على تقييمات عالية تصل إلى 4.7 نجوم، علامة مائية في الخطة المجانية. وتكلف إزالتها، إلى جانب فتح أنماط أسهم مخصصة وأشكال التخطيط، 2.50 دولار شهرياً. قد لا يبدو المبلغ كبيراً في البداية، ولكنه يتراكم مع كل اشتراك تطبيق على موقعك.

الخطر الأكبر يكمن في الصيانة. فهؤلاء مطورون صغار من جهات خارجية، وعندما يتوقف أحدهم عن إصدار التحديثات، قد يتعطل السلايدر الخاص بك. صفحة أعمالك أو منتجك هي آخر مكان ترغب في وجود عنصر معطل فيه.

إذا كنت لا تزال ترغب في تجربة تطبيق من جهة خارجية، فإليك كيفية تثبيته:

1. افتح موقعك في محرر Wix وانقر على التطبيقات (Apps) في الشريط الجانبي الأيسر، ثم انقر على سوق التطبيقات (App Market). ابحث عن “before and after slider”.

2. انقر على التطبيق الذي تريده، ثم انقر على إضافة إلى الموقع (Add to Site). قم بالتأكيد بالنقر على السماح والإضافة (Allow and Add).
3. سيظهر السلايدر على صفحتك. انقر عليه، وافتح الإعدادات (Settings)، وأضف صور قبل وبعد الخاصة بك، واضبط المقبض والتسميات، ثم انقر على نشر (Publish).

توثق Wix عملية التثبيت الكاملة في دليل مركز المساعدة الخاص بها لإضافة تطبيق إلى موقعك.

الخيار 2: استخدام ودجت سلايدر مجاني بدون كود (موصى به)

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

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

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

اتبع هذه الخطوات لإضافة ودجت Jotform إلى موقع Wix الخاص بك:

1. افتح ودجت سلايدر قبل وبعد من Jotform وأضف زوج الصور الخاص بك عن طريق رفع ملفاتك أو لصق روابط الصور. أضف تسميات قبل وبعد بالإضافة إلى تعليق توضيحي لكل مقارنة.

2. حدد اتجاه الكشف، وموضع الفاصل الأولي، ونمط التفاعل (سحب، أو نقر، أو تمرير المؤشر). اضبط العرض، ونسبة الصورة، ونصف قطر الزاوية، وحجم الفاصل، والألوان لتتناسب مع موقعك. قم بتمكين وضع ملء الشاشة إذا احتاج الزوار لفحص التفاصيل.

3. انسخ كود التضمين.

4. في محرر Wix، انقر على + إضافة (+ Add) وحدد تضمين كود (Embed Code). الصق الكود الخاص بك، وأعد تحجيم العنصر، وانقر على نشر (Publish).

يغطي دليل Wix لتضمين موقع أو ودجت قيود العنصر، بما في ذلك متطلب استخدام كود التضمين الخاص بك لبروتوكول HTTPS.

الخيار 3: بناء سلايدر مخصص باستخدام Velo by Wix

إذا كنت تفضل عدم الاعتماد على تطبيق من جهة خارجية أو تضمين خارجي، يمكنك برمجة السلايدر بنفسك باستخدام Velo by Wix. يعتمد هذا النهج على تكديس الصورتين في المحرر، وإضافة عنصر خط أو مربع كمقبض سحب، وتشغيل وضع المطور (Dev Mode)، وكتابة كود JavaScript يكشف عن جزء أكبر أو أقل من الصورة العلوية أثناء سحب الزائر للمقبض.

لكن هنا تكمن المشكلة. لا يمكن لكود صفحة Velo تتبع المؤشر أثناء تحركه عبر العنصر. تغطي معالجات الأحداث المتاحة في عناصر Wix القياسية النقرات، والتركيز، ودخول العنصر ومغادرته، ورؤية إطار العرض. لا يوجد معالج لحركة الماوس ولا يوجد دعم لأحداث اللمس. بينما يحتاج سلايدر السحب إلى كليهما.

المسار المثالي هو كتابة كود DOM JavaScript عادي داخل عنصر HTML iFrame واستخدام Velo فقط لتمرير البيانات. في هذه المرحلة، أنت تستخدم نفس آلية التضمين المذكورة في الخيار 2، باستثناء أنك تمتلك الكود، وسلوك الاستجابة، وكل خطأ برمجي (Bug).

إذا كنت ترغب في تجربة ذلك، اتبع هذه الخطوات:

1. في محرر Wix، انقر على وضع المطور (Dev Mode) في الشريط العلوي وقم بتشغيل وضع المطور. في Wix Studio، انقر على بدء البرمجة (Start Coding) في الشريط الجانبي الأيسر.

2. أضف عنصر تضمين HTML (Embed HTML) في المكان الذي تريد وضع السلايدر فيه، واضبط حجمه ليتناسب مع أبعاد صورتك.

3. اكتب كود (markup) سلايدر المقارنة الخاص بك، والتنسيق، ومعالجة أحداث المؤشر (pointer-event) داخل هذا العنصر، مع اختبار كل من سحب الماوس والتمرير باللمس عند كل نقطة توقف (breakpoint).

حسّن موقع Wix الخاص بك باستخدام ودجات ذكية بدون كود

يعد ودجت سلايدر قبل وبعد من Jotform أسرع طريقة لعرض تحولاتك دون إضافة تكاليف إلى فاتورة برامجك الشهرية أو تصحيح أخطاء أحداث اللمس في Velo. قم بتكوينه مرة واحدة، والصق الكود، وانطلق.

كما أنه واحد من أكثر من 150 ودجت مجاني لمواقع الويب تقدمها Jotform. من بين الودجات الأخرى التي تتناسب جيداً مع موقع معرض الأعمال أو موقع الخدمات:

• مراجعات جوجل (Google Reviews): ضع تقييمات العملاء بجوار العمل نفسه، بحيث يكون الدليل والثناء في نفس الصفحة.
• الأسئلة الشائعة (FAQ): أجب عن أسئلة مثل “كم يستغرق هذا من الوقت؟” و”ما هي التكلفة؟” قبل أن يغادر الزائر لمراسلتك عبر البريد الإلكتروني.
• النافذة المنبثقة (Popup): احصل على البريد الإلكتروني من شخص تصفح معرضك بالكامل ولكنه لم يكن مستعداً للحجز بعد.
• العودة للأعلى (Back to Top): يستحق هذا الودجت الإضافة عندما تصبح صفحة معرض أعمالك طويلة بحيث يصبح التمرير لأعلى أمراً مزعجاً.

يتم تثبيت كل منها من خلال نفس عنصر تضمين HTML (Embed HTML) الذي استخدمته للسلايدر، لذا فإن إضافة ودجت ثانٍ أو ثالث سيستغرق دقائق معدودة.

إذا كنت لا تزال في مرحلة بناء موقعك، فإن دليلنا لإنشاء موقع Wix يغطي المنصة من البداية إلى النهاية، وتوضح صفحة تكامل Jotform مع Wix كيفية إضافة نماذج الاتصال والحجز. تصفح دليل الودجات الكامل واكتشف ما ينقص موقعك.