كيفية إظهار الصور قبل وبعد مع تأثير شريط التمرير في WordPress

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

انتظر! ما هو شريط تمرير الصورة قبل وبعد؟

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

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

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

لذلك دون مزيد من اللغط ، فلنبدأ.

اشترك في قناتنا على اليوتيوب

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

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

ومع ذلك ، سنستخدم المكون الإضافي Twenty20 Image Before After في هذه المقالة. لاحقًا ، سأذكر أيضًا بعض البدائل المجانية والمتميزة الشائعة.

قم بتثبيت Twenty20 Image قبل البرنامج المساعد بعد

يعد Twenty20 مكونًا إضافيًا مجانيًا ومتاحًا في مستودع مكونات WordPress الإضافية. يتيح لك إضافة منزلقات الصور قبل وبعد في مشاركاتك وصفحاتك وشريطك الجانبي. كما أنه يدعم منشئي الصفحات المشهورين مثل Elementor و WPBakery.

لتثبيت هذا البرنامج المساعد ، انتقل إلى الإضافات -> إضافة جديد وابحث عن Twenty20 Image Before-After. بمجرد العثور على المكون الإضافي ، ما عليك سوى تثبيته وتنشيطه:

أضف صورة قبل وبعد في منشورك أو صفحتك

لا يأتي المكون الإضافي Twenty20 بأي صفحة إعدادات. حتى تتمكن من البدء في القيام بالعمل القذر بعد تثبيت المكون الإضافي.

الآن ، بعد تحديث WordPress 5.0 ، ربما تستخدم محرر Classic أو Gutenberg. لذا اسمحوا لي أن أوضح لكم كيف يعمل هذا البرنامج المساعد على كلا المحررين.

محرر جوتنبرج

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

دعنا نلقي نظرة على مثال للرمز القصير:

[2020 img1 = "3442 ″ img2 =" 3442 ″ direction = "أفقي" offset = "0.4 ″ align =" none "width =" 100٪ "before =" Before "after =" بعد "hover =" false "]

اسمحوا لي أن أشرح كل من المعلمات:

• img1 - هنا يجب عليك إضافة معرف الصورة (وليس عنوان URL للصورة) للصورة الأولى.
• img2 - أضف المعرف (وليس عنوان URL للصورة) للصورة الثانية.
• الاتجاه - يسمح لك هذا بتحديد ما إذا كنت تريد شريط التمرير في الاتجاه الأفقي أو الرأسي. لذلك ، ستكون القيمة إما أفقية أو رأسية.
• تعويض - يجب أن تكون قيمة الإزاحة بين 0.1 إلى 1.
• محاذاة - يحدد هذا محاذاة الصورة قبل وبعد. يمكن أن تكون القيمة لا شيء أو يسارًا أو يمينًا.
• العرض - يمكن أن يكون عرض الصورة بالنسبة المئوية أو بالبكسل.
• قبل - يمكنك إضافة تسمية توضيحية للصورة السابقة هنا.
• بعد - أضف التسمية التوضيحية للصورة التالية.
• hover - تحدد هذه المعلمة ما إذا كنت تريد تحريك شريط التمرير عند حركة الماوس. يقبل قيمة صحيحة أو خاطئة.

لا أعرف كيفية العثور على معرف صورة؟ انتقل إلى Media -> Library من الشريط الجانبي الأيسر من لوحة معلومات WordPress الخاصة بك وانقر على الصورة. تحقق الآن من شريط عنوان متصفح الويب الخاص بك:

في المثال أعلاه ، يمكنك رؤية العنصر = 50 في عنوان URL. إذن ، 50 هو معرف تلك الصورة بالذات.

تمام! الآن بعد أن عرفت كيفية استخدام الرمز المختصر لـ Twenty20 ، قم بإنشاء (أو تحرير) منشور أو صفحة حيث تريد إضافة شريط تمرير الصورة قبل وبعد. وبعد ذلك ، أضف كتلة جديدة وابحث عن أداة الرموز القصيرة:

انسخ الكود الذي استخدمته في المثال أعلاه ، والصقه في مربع الرمز القصير وقم بتعديله وفقًا لمتطلباتك:

هذا كل شيء. يمكنك الآن معاينة المنشور (أو الصفحة) والتحقق مما إذا كان يعمل بشكل صحيح أم لا.

محرر كلاسيكي

إذا كنت تستخدم Classic Editor ، فسترى زرًا جديدًا Add Twenty 20 بعد تثبيت المكون الإضافي. انقر فوق هذا الزر وستفتح نافذة منبثقة تطلب منك تحديد صورتين:

بمجرد تحديد صورتين والنقر فوق إدراج ، ستفتح نافذة جديدة تطلب منك بعض التفاصيل لإنشاء الرمز القصير:

بمجرد الانتهاء من الإعدادات ، يمكنك النقر فوق الزر "إدراج رمز قصير".

يمكنك أيضًا إجراء تغييرات على هذا الرمز القصير لاحقًا - ما عليك سوى اتباع المثال في قسم Gutenberg Editor.

أضف صورة قبل وبعد في الشريط الجانبي الخاص بك

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

توجه إلى المظهر -> الحاجيات. ابحث الآن عن أداة Twenty20 واسحبها إلى منطقة الشريط الجانبي. إعدادات هذه الأداة مشابهة للقسم السابق - فقط لديك زرين إضافيين لاختيار (أو تحميل) الصور قبل وبعد.

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

بعض الإضافات البديلة

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

1. قبل + بعد الصور لديفي

إذا كنت من مستخدمي Divi ، فإن برنامج Before + After Images الخاص بـ Divi هو الأفضل لاحتياجاتك. إنه خفيف الوزن وسريع الاستجابة ويدعم التحميل البطيء. يقوم بإنشاء وحدة جديدة تساعدك على إضافة الصور قبل وبعد إلى موقع الويب الخاص بك. سيعمل هذا المكون الإضافي المجاني مع المكون الإضافي Divi Builder وموضوع Divi وموضوعات أخرى بواسطة Elegant Themes.

السعر - مجاني | معلومات اكثر

2. متعدد الأغراض قبل بعد المنزلق

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

السعر - 18 دولار | معلومات اكثر

3. عارض ذكي قبل وبعد

Smart Before After Viewer عبارة عن مكون إضافي متميز سريع الاستجابة وسهل اللمس. يسمح لك بإضافة نصوص تسمية مخصصة على الصور قبل وبعد. ويمكنك تغيير موضع الملصقات ولونها دون أي متاعب. يتيح لك هذا المكون الإضافي أيضًا إضافة صور متعددة على صفحة واحدة.

السعر - 18 دولار | معلومات اكثر

تعليق ختامي

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

إذن ، هل سبق لك استخدام أي من المكونات الإضافية المذكورة في هذه المقالة؟ أو ، هل ترغب في اقتراح مكون إضافي معين مناسب لتحقيق نفس الشيء؟ إعلامنا في قسم التعليق.

صورة مميزة عبر __ / shutterstock.com