كيفية إظهار Before and After للصور في موقعك على ووردبرس مع تأثير Slide

الصور لموقعك على ووردبرس

شريط تمرير الصور هو وسيلة تفاعلية لإظهار نسختين مختلفتين من صورة مماثلة بالحجم

يمكنك تحريك مؤشر التمرير لمقارنة الصورتين جنبًا إلى جنب.

عرض الصور قبل وبعد في ووردبرس

أول شيء عليك القيام به هو تثبيت وتفعيل الإضافة Twenty20 Image Before-After 

عند التنشيط ، تحتاج إلى إنشاء أو تحرير صفحة / منشور في admin area WordPress الخاص بك حيث تريد إظهار الصورة قبل وبعد. 

الآن ، انقر فوق الزرAdd Twenty20 أعلى محرر النصوص.

سوف تفتح مكتبة الوسائط WordPress في نافذة منبثقة. 

من هنا ، تحتاج إلى تحديد صورتين قبل التمرير وبعده.

بمجرد تحديد الصور ، انقر فوق الزر ” إدراج” .

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

بعد ذلك ، انقر فوق الزر  Insert Shortcode  لإضافة الصورة قبل وبعد الصورة في صفحة WordPress الخاصة بك.

يمكنك أيضًا استخدام عنصر واجهة المستخدم Twenty20 image لعرض الصورة قبل وبعد في الشريط الجانبي لـ WordPress. ما عليك سوى الانتقال إلى قسم Appearance »Widgets  في مسؤول WordPress الخاص بك ، ثم قم بسحب أداة Twenty20 Slider في مساحة عنصر واجهة الشريط الجانبي.

يحتوي عنصر واجهة المستخدم Twenty20 Slider على إعدادات مماثلة للصورة قبل وبعد التي شاركناها أعلاه في هذا الدليل. 

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

عندما يقوم المستخدمون بتحريك المؤشر نحو كل صورة ، ستصبح الصورة الأخرى مرئية. يمكن للمستخدمين نقل شريط التمرير إلى اليمين أو اليسار لرؤية الصورة كاملة قبل وبعد. 

يعمل هذا البرنامج المساعد بشكل رائع مع منشئي صفحات WordPress المشهورين مثلBeaver Builder و Elementor لعرضهم بسرعة قبل وبعد في صفحات موقع الويب

نهاية مقال الصور لموقعك على ووردبرس.

مقالات ذات صلة:

كيف تنقل مدونتك بشكل صحيح من WordPress.com إلى WordPress.org