كيفية إضافة شريط تمرير الصور قبل وبعد في ووردبريس

إذا كنت تبيع منتجات أو خدمات احترافية عبر الإنترنت، فقد تبحث عن طريقة مرئية لتُظهر للعملاء قيمة ما تقدمه. 

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

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

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

لماذا يجب عليك استخدام البرنامج المساعد WordPress قبل وبعد

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

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

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

استخدام البرنامج المساعد WordPress

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

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

أهم مكونات WordPress الإضافية قبل وبعد التمرير في عام 2023

الآن، دعونا نلقي نظرة على بعض مكونات WordPress الإضافية قبل وبعد التمرير والتي تساعدك على إضافة هذه الميزة إلى موقعك. 

لقد اخترنا الأدوات التي يمكن إضافتها إلى موقعك عبر الرمز القصير والحظر وأدوات إنشاء الصفحات الشائعة مثل Elementor وDivi.

  • معرض الصور النهائي قبل وبعد (BEAF)
  • قبل وبعد شريط تمرير مقارنة الصور لـ Elementor
  • قبل + بعد الصور لـ Divi
  • قبل وبعد مقارنة الصور

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

بمجرد تثبيت المكوّن الإضافي، يمكنك الانتقال إلى شريط التمرير قبل وبعد > إضافة جديد وإنشاء شريط التمرير الأول:

شريط تمرير ومعرض الصور النهائي

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

🎯 الميزات الرئيسية

  • التخطيطات الأفقية والرأسية
  • علامات البديل على كل صورة
  • خيارات تحريك الماوس
  • عنوان شريط التمرير، والوصف، وزر قراءة المزيد
  • شريط التمرير والتمرير التلقائي
  • العلامات المائية للصورة

💳السعر _

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

2. قبل وبعد شريط تمرير مقارنة الصور لـ Elementor

يعد هذا المكون الإضافي WordPress قبل وبعد التمرير مثاليًا لمستخدمي Elementor . يمكّنك من إضافة شريط التمرير الخاص بك كأداة داخل أداة إنشاء الصفحة:

مقارنة الصور لـ Elementor

إذا كنت تستخدم الإصدار Pro من الأداة، فستتمكن أيضًا من تخصيص شريط التمرير، كما تفعل مع أي عنصر واجهة مستخدم Elementor آخر.

🎯 الميزات الرئيسية

  • أبعاد الصورة المخصصة
  • عدد غير محدود من المتزلجون
  • الاتجاه الأفقي أو العمودي
  • التحرك بتمرير الماوس أو النقر على الصورة

💳السعر _

يمكنك استخدام الإصدار المجاني، أو الترقية إلى Pro. تبدأ الأسعار من 12 دولارًا سنويًا.

3. قبل + بعد الصور لـ Divi

تم تصميم هذا المكون الإضافي لشريط التمرير خصيصًا للعمل مع Divi Builder. لاستخدامها، ما عليك سوى إضافة الوحدة إلى الصفحة وتحميل صورك:

الصور لـ Divi

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

🎯 الميزات الرئيسية

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

💳السعر _

هذا البرنامج المساعد مجاني تماما.

4. قبل وبعد مقارنة الصور

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

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

مقارنة الصور

تأتي كتلة مقارنة الصور مع إعدادات التخصيص للتسميات والتسميات التوضيحية والحدود والمزيد.

🎯 الميزات الرئيسية

  • أضف شريط التمرير ككتلة
  • إظهار التسميات التوضيحية والتسميات
  • قم بتغيير عرض شريط التمرير
  • إضافة حدود الصورة
  • تكوين الألوان والطباعة

💳السعر _

هذا البرنامج المساعد مجاني.

المصدر: themeisle

شاهد المزيد:

طرق الربح من الانترنت

ترجمة من عربى لانجليزى

ترجمة من عربى هولندي

فتح حساب بنك الرياض

فتح حساب بنك أبوظبي الأول

فتح حساب بنك الإمارات للاستثمار

إنشاء حساب بنك الراجحي

إنشاء حساب ويسترن يونيون

أفضل استضافة ووردبريس

أنت تستخدم إضافة Adblock

يعتمد موقع انشاء على الاعلانات كمصدر لدعم الموقع، يجب عليك ايقاف تشغيل حاجب الاعلانات لمشاهدة المحتوي