الصور الثابتة جنبًا إلى جنب لا تحقق العدالة في عملك. تعديل الصورة، وتجديد المنزل، وتحويل المنتج، كلها تستحق أفضل من صورتين تجلسان بجانب بعضهما البعض. ان منزلق مقارنة الصور Elementor يصلح ذلك. يقوم الزائرون بسحب المقبض عبر الصورة للكشف عن الإصدارات السابقة واللاحقة بأنفسهم، وهذا الجزء من التفاعل يبقيهم على صفحتك لفترة أطول.
لقد كنت أستخدم أداة مقارنة الصور Master Addons على الصفحات المقصودة للعميل، وهي تحظى باستمرار بمشاركة أكبر من لقطات الشاشة الثابتة. يغطي هذا البرنامج التعليمي الإعداد والتخصيص وبعض الأشياء التي تستحق المعرفة قبل النشر. الأداة مجانية، وهي موجودة داخل لوحة Elementor مثل أي أداة أخرى، ويمكنك تشغيلها في حوالي دقيقتين.
ما يغطيه هذا الدليل:
- ما هو شريط تمرير مقارنة الصور
- من يحتاج إلى شريط تمرير قبل/بعد
- ما تحصل عليه مع القطعة المجانية
- كيفية إنشاء واحدة (خطوة بخطوة)
- نصائح لمقارنة أفضل
- استكشاف المشكلات الشائعة وإصلاحها
- الإضافات الرئيسية مقابل البدائل
- لماذا الإضافات الرئيسية
- ابدأ
- الأسئلة المتداولة
ما هو شريط تمرير مقارنة الصور؟
يقوم شريط تمرير مقارنة الصور بوضع صورتين فوق بعضهما البعض مع وجود مقسم قابل للسحب بينهما. يقوم المستخدمون بتحريكها يسارًا ويمينًا (أو لأعلى ولأسفل) للكشف عن صورة واحدة فوق الأخرى. قمت بتعيين صورة “before” وصورة “after” في المحرر، وتتعامل الأداة مع الباقي.
من المحتمل أنك شاهدتها على ملفات التصوير الفوتوغرافي أو مواقع طب الأسنان أو الصفحات العقارية التي تعرض مشاريع التجديد. بدلاً من النظر بشكل سلبي إلى صورتين منفصلتين، يتفاعل الزوار فعليًا مع المقارنة. هذا التفاعل يزيد من الوقت على الصفحة، مما يساعدك تحسين محركات البحث ويسحب معدلات الارتداد إلى الأسفل.
من يحتاج إلى شريط تمرير قبل وبعد في Elementor؟
أي شخص يريد إظهار التحول. هذه هي حالات الاستخدام التي أواجهها في أغلب الأحيان
مصممي ووكالات الويب
تبدو عمليات إعادة تصميم موقع الويب رائعة في شريط تمرير المقارنة. إن السماح للعميل المحتمل بالسحب بين التصميم القديم والجديد يبني ثقة أكبر مما ستفعله لقطة الشاشة المسطحة على الإطلاق. يمكنك إقران هذا مع أداة تأثيرات تحوم الصورة إذا كنت تريد تنوعًا مرئيًا إضافيًا على صفحات المحفظة.
المصورين ومحرري الصور
ربما هو الأكثر ملاءمة طبيعية. إذا قمت بأعمال التنقيح أو تصنيف الألوان أو الترميم، فإن شريط تمرير مقارنة الصور يتيح للعملاء المحتملين رؤية ما يمكنك فعله بالضبط. ملف خام على اليسار، نسخة معدلة على اليمين. يقول أكثر من أي تسمية توضيحية.
متاجر التجارة الإلكترونية
بيع منتجات العناية بالبشرة أو التنظيف أو أي شيء له نتائج واضحة؟ أ قبل بعد مقارنة الصور صفحة المنتج الخاصة بك أكثر إقناعا من فقرة النسخة. لقد رأيت هذا العمل جيدًا بشكل خاص بالنسبة لمنتجات التجميل وتحسين المنزل حيث يكون الاختلاف البصري كبيرًا.
العقارات والهندسة المعمارية
مشاريع التجديد متطابقة بشكل طبيعي. التقط صورة قبل بدء العمل، والتقط صورة أخرى عند الانتهاء منها، ثم قم بإسقاطهما في أداة المقارنة. تصبح محفظتك أكثر تفاعلية، ويميل الزوار إلى قضاء المزيد من الوقت في تصفح مشاريعك.
المسوقين الرقميين
لوحات معلومات التحليلات، وأداء الإعلانات، ومخططات حركة المرور على موقع الويب. أظهر نتائج “ قبل العمل معنا، و“، وبعد العمل معنا، نتائج “ باستخدام شريط تمرير السحب للمقارنة. يعمل بشكل أفضل من لصق لقطتين من الشاشة في دراسة حالة.
أداة مقارنة الصور للإضافات الرئيسية: ما تحصل عليه
هناك عدة طرق لإضافة أ قبل بعد شريط التمرير في Elementor. يتطلب بعضها مكونات إضافية مستقلة، والبعض الآخر يحتاج إلى تعليمات برمجية مخصصة، وبعضها مقفل خلف اشتراكات الإضافات المميزة. تتضمن الإضافات الرئيسية القطعة مقارنة الصور في النسخة المجانية. تجدر الإشارة إلى أن معظم الإضافات المنافسة (Ultimate Addons وPowerPack وThe Plus Addons) تضع هذه الميزة خلف نظام حظر الاشتراك غير المدفوع.
تتضمن القطعة ما يلي:
- تكامل العنصر الأصلي: اسحب وأسقط من لوحة Elementor. لا توجد رموز قصيرة، ولا صفحة إعدادات منفصلة. التثبيت من ووردبريس البرنامج المساعد الريبو ويظهر في قائمة عناصر واجهة المستخدم الخاصة بك على الفور.
- الاستخدام مجاني: تعد أداة مقارنة الصور جزءًا من الإصدار المجاني. لا يلزم الحصول على ترخيص Pro.
- أنماط التحكم المتعددة: مقبض منزلق (سحب)، أو حركة الماوس (تحريك)، أو النقر. يتم دعم كل من اتجاهات المقارنة الأفقية والرأسية.
- تسميات مخصصة: قم بتغيير نص “Before” و“After” إلى أي شيء تريده، بأي لغة. ألوان الملصقات والطباعة وتحديد المواقع كلها قابلة للتعديل.
- مستجيب: يعمل على سطح المكتب، والكمبيوتر اللوحي، والهاتف المحمول. تعمل إيماءات اللمس والتمرير على الأجهزة المحمولة.
الإضافات الرئيسية لديها 80+ الحاجيات والإضافات المجموع. أداة مقارنة الصور هي الأداة التي تظهر كثيرًا في مشاريع الصفحة المقصودة والمحفظة.
كيفية إنشاء شريط تمرير قبل وبعد في Elementor (خطوة بخطوة)
قبل أن تبدأ، تحتاج إلى كليهما العنصر وتم تثبيت وتفعيل الإضافات الرئيسية. كلاهما مجاني. اذهب الى المكونات الإضافية > إضافة جديدابحث عن كل اسم مكون إضافي وقم بتثبيته وتنشيطه.
الخطوة 1: تمكين أداة مقارنة الصور
يتم تمكين عنصر واجهة المستخدم لمقارنة الصور بشكل افتراضي. إذا قمت بإيقاف تشغيل بعض عناصر واجهة المستخدم للحفاظ على ميل اللوحة الخاصة بك، فتأكد من أنها لا تزال قيد التشغيل. انتقل إلى الإضافات الرئيسية > الإضافات والإضافات في لوحة تحكم WordPress الخاصة بك وتأكيد مقارنة الصور، يتم تشغيلها. ال وثائق مقارنة الصور لديه تفاصيل الإعداد الكاملة. أثناء وجودك في لوحة المعلومات هذه، قد تلاحظ عناصر واجهة مستخدم أخرى تستحق التشغيل، مثل عنوان متحرك أو معرض المنزلق.
الخطوة 2: افتح صفحة في العنصر
قم بإنشاء صفحة جديدة أو افتح صفحة موجودة باستخدام Elementor. لقد قمت بإنشاء صفحة مقصودة جديدة لهذا البرنامج التعليمي، ولكن شريط تمرير المقارنة يسقط في أي صفحة موجودة بنفس الطريقة.
الخطوة 3: إضافة أداة مقارنة الصور
في لوحة Elementor الموجودة على اليسار، ابحث عن “Image Comparison” (سترى رمز Master Addons بجواره). اسحب عنصر واجهة المستخدم إلى صفحتك أينما تريد ظهور شريط التمرير.
الخطوة 4: قم بتحميل صورك قبل وبعد
انقر فوق الأداة وسترى حقلين لتحميل الصورة: أحدهما للصورة السابقة والآخر للصورة اللاحقة. قم بتحميل كليهما، ويتم تحديث المعاينة فورًا باستخدام مقبض المقسم الموجود في المنتصف.
تنبيه سريع: يجب أن تكون كلتا الصورتين بنفس الأبعاد. إذا كان أحدهما 1200×800 والآخر 900×600، فسيبدو التصميم بعيدًا. قم بقصها بنفس الحجم قبل التحميل. يؤدي هذا إلى رفع الأشخاص أكثر من أي شيء آخر.
الخطوة 5: تخصيص نص التسمية
التسميات الافتراضية تقول “Before” و“After،” ولكن يمكنك تغييرها إلى أي شيء. بيع منتج؟ استخدام “بدون”مع عرض التجديد؟ جرب “Day 1”inhed.” تقبل حقول التسمية أي نص، بما في ذلك الأحرف غير الإنجليزية، لذا فإن الترجمة ليست مشكلة.
الخطوة 6: تكوين إعدادات شريط التمرير
ضمن علامة التبويب "المحتوى"، هناك عدد قليل من الإعدادات التي تستحق التعديل
- التوجه: التبديل بين المقارنة الأفقية (يسار/يمين) والرأسية (أعلى/أسفل). الأفقي هو الافتراضي ويعمل في معظم الحالات.
- نسبة الرؤية: يتحكم في مكان بدء تشغيل المقسم. اضبطه على 50% للتقسيم المركزي، أو قم بتحويله لإظهار المزيد من صورة واحدة في البداية.
- تراكب: تمكين أو تعطيل تراكب الألوان على الصور.
- نوع المقبض: اختر بين سحب الماوس أو تمرير الماوس للمقارنة. يتطلب السحب من الزائر النقر والسحب. يكشف التمرير عن حركة الماوس، والتي تبدو أكثر مرونة ولكنها قد تكون مربكة في بعض التخطيطات.
الخطوة 7: قم بتصميم شريط التمرير
قم بالتبديل إلى علامة التبويب "النمط" للتخصيص المرئي. يمكنك تغيير لون المقسم، وإضافة حد حول حاوية المقارنة، وضبط طباعة الملصق (عائلة الخط، والحجم، والوزن)، وإضافة ظلال المربع، والتحكم في التباعد. اقضِ بضع دقائق هنا لتتناسب مع تصميم موقعك. هناك تحكم كافٍ بحيث لا ينتهي بك الأمر إلى الحصول على شريط تمرير ذو مظهر عام.
اضغط على نشر و الخاص بك قبل بعد المنزلق مباشر. حوالي دقيقتين من البداية إلى النهاية، على افتراض أن صورك جاهزة.
نصائح لمقارنة أفضل للصور
تتعامل الأداة مع الجانب الفني، لكن المقارنة نفسها جيدة بقدر جودة الإعداد الخاص بك. بعض الأشياء التي التقطتها من بناءها على مواقع العملاء:
مطابقة أبعاد صورتك
لقد ذكرت هذا بالفعل، ولكن هذا هو الخطأ الذي أراه في أغلب الأحيان. إذا كانت صورتك السابقة هي 1920×1080 وكانت صورتك اللاحقة هي 800×600، فسيجبرهما شريط التمرير على المحاذاة وستبدو النتيجة مشوهة. قم بقص الصورتين بنفس أبعاد البكسل بالضبط قبل التحميل. في كل مرة.
حافظ على التركيبة متشابهة
التقط كلتا الصورتين من نفس الزاوية، ونفس المسافة، ونفس الإطار. إذا كانت صورتك السابقة عبارة عن لقطة واسعة والأخرى لقطة قريبة، فلن يهبط التباين بالطريقة التي تريدها. يبدو شريط التمرير أفضل عندما يكون الاختلاف الوحيد بين الصورتين هو التغيير الفعلي.
مركز التحول
ضع التغيير الأكثر وضوحًا بالقرب من مركز الصورة. هذا هو المكان الذي يبدأ فيه المقسم، لذا فهو أول شيء يلاحظه الأشخاص عندما يتفاعلون مع شريط التمرير. إذا تم إيقاف التغيير إلى جانب واحد، فاضبط نسبة الرؤية للفت الانتباه إليه.
لا تبالغ في ذلك
تكفي مقارنة قوية واحدة لكل قسم من الصفحات. لقد رأيت صفحات تحتوي على خمسة أو ستة أشرطة تمرير مكدسة فوق بعضها البعض، وهذا يخفف من التأثير. اختر أفضل زوج قبل وبعد وقم بتمييز هذا الزوج. إذا كان لديك مقارنات متعددة، قم بتنظيمها في ملف معرض الصور القابلة للتصفية أو صورة دائري بدلاً من.
أضف CTA في مكان قريب
إذا كانت المقارنة موجودة على صفحة المبيعات أو المحفظة، فأسقط زر الاتصال لاتخاذ إجراء أسفلها مباشرةً. الشخص الذي قام للتو بإجراء تحويل مثير للإعجاب منخرط بالفعل. يميل زر “Get a Free Quote” أو “Shop Now” الموجود هناك إلى التحويل بشكل جيد.
استكشاف الأخطاء وإصلاحها: عندما لا يتصرف شريط التمرير
تعمل معظم الإعدادات فقط، ولكن بعض الأشياء تتعثر بالناس. إليك كيفية إصلاح تلك التي يتم سؤالي عنها.
- شريط التمرير لا يظهر. تم تعطيل الأداة تسع مرات من أصل عشر. اذهب الى الإضافات الرئيسية، ثم الإضافات والملحقاتوتأكيد تبديل مقارنة الصور. إذا كان قيد التشغيل ولا يزال مفقودًا، فقم بمسح ذاكرة التخزين المؤقت الخاصة بك (LiteSpeed أو WP Rocket أو Cloudflare) بحيث تتوقف النسخة القديمة من الصفحة عن الخدمة.
- المقبض لن يسحب. يكون هذا دائمًا تقريبًا تعارضًا مع JavaScript أو مكونًا إضافيًا للتخزين المؤقت يقوم بدمج البرنامج النصي لعنصر واجهة المستخدم أو تأجيله. استبعاد البرامج النصية لـ Master Addons من JS، وقم بدمجها وتأجيلها، ومسح ذاكرة التخزين المؤقت، واختبارها مرة أخرى.
- تبدو الصورتان ممتدتين أو غير محاذيتين. إنها أبعاد مختلفة. قم بالقص إلى أبعاد بكسل متطابقة وإعادة التحميل، وهذا هو السبب الوحيد الأكثر شيوعًا.
- يعمل على سطح المكتب ولكن ليس على الهاتف المحمول. تأكد من عدم وجود حاوية أصلية تحتوي على نمط مخفي الفائض لقص منطقة اللمس، وأنه لا يوجد شيء فوق شريط التمرير لالتقاط التمرير. يعمل اللمس خارج الصندوق، لذا فإن فشل التمرير يكون دائمًا مشكلة تخطيط أو فهرس z.
- يتم قطع الملصقات قبل وبعد. قم بتقصير نص الملصق أو تقليل حجم خط الملصق أسفل علامة التبويب "النمط"؛ يمكن أن تنتشر الملصقات الطويلة جدًا خارج الصورة على الشاشات الصغيرة.
إذا لم يقم أي من هؤلاء بإصلاحه، قم بنشر التفاصيل في منتدى دعم الإضافات الرئيسية مع السمة والمكونات الإضافية النشطة، عادةً ما يكون هناك تعارض يتم تحديده بسرعة.
أداة مقارنة الصور مقابل البدائل
نظرة سريعة على كيفية مقارنة Master Addons بالآخرين شريط تمرير مقارنة الصور WordPress خيارات العنصر:
| ميزة | الإضافات الرئيسية | الإضافات النهائية (الإمارات العربية المتحدة) | مجموعة العناصر | حزمة الطاقة |
|---|---|---|---|---|
| أداة مقارنة الصور المجانية | نعم | لا (المحترف فقط) | نعم | لا (المحترف فقط) |
| أفقي + عمودي | نعم | نعم | نعم | نعم |
| نص التسمية المخصص | نعم | نعم | نعم | نعم |
| وضع تمرير الماوس | نعم | نعم | لا | نعم |
| التحكم في نسبة الرؤية | نعم | نعم | لا | نعم |
| اللمس/التمرير عبر الهاتف المحمول | نعم | نعم | نعم | نعم |
| إجمالي الحاجيات في الإضافة | 80+ | 40+ | 90+ | 60+ |
الفرق الكبير هو التوفر المجاني. إذا كنت لا ترغب في الدفع مقابل ملحق Pro فقط للحصول على شريط تمرير قبل وبعد، فإن Master Addons وElementsKit هما خيارك. تتضمن الإضافات الرئيسية أيضًا تقنيات تراكب النص و تأثيرات تحوم الصورة في الطبقة المجانية، يمكنك الحصول على مجموعة أوسع من أدوات الصور دون الترقية.
لماذا الإضافات الرئيسية لمقارنة الصور الخاصة بك؟
تعد أداة مقارنة الصور واحدة من 80+ عنصرًا وملحقات في الإضافات الرئيسية للعنصر. يقوم الكثير من المستخدمين بتثبيته لعنصر واجهة مستخدم واحد وينتهي بهم الأمر باستخدام عدة عناصر أخرى في نفس المشروع. هكذا بدأت به أيضًا.
أبعد من الأدوات الفردية، يمكنك الحصول على منشئ الموضوع للعناوين والتذييلات وصفحات الأرشيف المخصصة. هناك منشئ النوافذ المنبثقة مع نية الخروج ومشغلات التمرير. و أ مكتبة القوالب مع الأقسام المعدة مسبقًا، يمكنك الاستيراد بنقرة واحدة.
يعد الإصدار 3.0.0 أسرع بشكل ملحوظ من الإصدارات الأقدم، وتتم صيانة البرنامج الإضافي بشكل نشط، ويعمل على 40.000+ موقع WordPress. ماستر أدونز برو يضيف Widget Builder ووضع White Label والدعم المتميز إذا كنت بحاجة إلى تلك الموجودة في السطر.
ابدأ
إعداد أ قبل بعد شريط تمرير مقارنة الصور يستغرق Elementor بضع دقائق مع Master Addons. لا يوجد رمز، ولا شراء إضافي متميز، ولا يوجد مكون إضافي منفصل للمقارنة لتثبيته. الأداة مجانية، وتعمل مع أي إعداد Elementor، ويغطي التخصيص كل شيء بدءًا من نص التسمية وحتى لون المقسم.
تحميل الإضافات الرئيسية مجانا وجرب أداة مقارنة الصور في مشروعك التالي. إذا كنت بحاجة إلى المزيد عبر إصدارات Elementor الخاصة بك، فاطلع على ذلك خطط المحترفين.
القراءة ذات الصلة: Elementor Image Carousel البرنامج التعليمي | المكونات الإضافية لمعرض Elementor القابل للتصفية | 25 تقنية نص العنصر فوق الصورة
تفضل المشاهدة؟ إليك إرشادات سريعة في Elementor:
الأسئلة المتداولة
كيف يمكنني إضافة شريط تمرير قبل وبعد في Elementor؟
قم بتثبيت الإضافات الرئيسية (مجانية)، وافتح صفحتك في Elementor، وابحث عن أداة مقارنة الصور في اللوحة، واسحبها إلى صفحتك. قم بتحميل صورك قبل وبعد، واضبط التسميات إذا أردت، وانشر. يستغرق حوالي دقيقتين.
هل هناك أداة مجانية لمقارنة الصور لـ Elementor؟
نعم. تتضمن الإضافات الرئيسية أداة مجانية لمقارنة الصور مع الأوضاع الأفقية/العمودية، والتسميات المخصصة، وعناصر التحكم في السحب والتحليق، وخيارات النمط الكامل. لا حاجة إلى ترقية احترافية.
ما هو الأفضل قبل وبعد البرنامج المساعد لشريط التمرير لـ WordPress؟
بالنسبة لمستخدمي Elementor، تعد Master Addons خيارًا مجانيًا قويًا مع التكامل الأصلي وأنماط التحكم المتعددة. إذا لم تكن موجودًا على Elementor، فإن المكونات الإضافية المستقلة مثل BEAF (قبل المعرض) تعمل مع Gutenberg والبناة الآخرين.
كيفية إنشاء الصور قبل وبعد دون ترميز؟
استخدم Elementor مع أداة مقارنة الصور Master Addons. اسحبه إلى صفحتك، وقم بتحميل صورتين، وقم بتكوين الإعدادات من اللوحة المرئية. لا حاجة إلى رمز في أي وقت.
هل يمكنني استخدام شريط تمرير مقارنة الصور على الهاتف المحمول؟
نعم. الأداة سريعة الاستجابة وتدعم إيماءات اللمس. يقوم الزائرون بتمرير المقسم بأصابعهم لمقارنة الصور، مثل السحب على سطح المكتب.
ما الحجم الذي يجب أن يكون قبل وبعد الصور؟
يجب أن تكون كلتا الصورتين بنفس الأبعاد تمامًا. 1200×800 أو 1920×1080 هي خيارات شائعة. تتسبب الأحجام غير المتطابقة في قيام شريط التمرير بمحاذاتها بالقوة، مما يشوه المقارنة.
كيف أقوم بإجراء مقارنة الصور الأفقية والرأسية؟
في إعدادات عنصر واجهة المستخدم، ابحث عن خيار الاتجاه ضمن علامة التبويب المحتوى. التبديل بين الأفقي (المقسم الأيسر/الأيمن) والعمودي (المقسم العلوي/السفلي). الأفقي هو الافتراضي.
هل يعمل شريط تمرير مقارنة الصور على إبطاء صفحتي؟
ليس بشكل مفيد، طالما تم تحسين صورك. البرنامج النصي لعنصر واجهة المستخدم خفيف الوزن؛ الوزن الحقيقي هو الصورتين نفسيهما. قم بتقديمها على شكل WebP مضغوط بالحجم الذي تعرضه بالفعل واحتفظ بكل منها بحوالي 150 كيلو بايت أو أقل، ويضيف شريط التمرير وقت تحميل ضئيل.
لماذا لا يعمل شريط تمرير مقارنة الصور الخاص بي بعد النشر؟
دائمًا ما يتم التخزين المؤقت أو تعارض البرنامج النصي. قم بتنقية ذاكرة التخزين المؤقت لصفحتك (LiteSpeed أو Cloudflare أو WP Rocket) وإعادة التحميل الثابت. إذا كان المقبض لا يزال غير قابل للسحب، فاستبعد Master Addons JavaScript من أي إعداد دمج أو تأجيل، وقم بمسح ذاكرة التخزين المؤقت، وأعد الاختبار. تعد أداة مقارنة الصور التي تم تعطيلها مؤخرًا في لوحة Master Addons Addons and Extensions هي السبب الشائع الآخر.
