جدول المحتويات
ال أداة مقارنة الصور للإضافات الرئيسية يتيح لك إسقاط شريط تمرير مجاني قبل وبعد في أي صفحة Elementor، بدون Elementor Pro ولا اشتراك إضافي في البرنامج المساعد. تقوم بتثبيت Master Addons، وسحب عنصر واجهة المستخدم إلى صفحتك، وتحميل صورتين، ويحصل الزوار على مقبض قابل للسحب يمسح بينهما.
يمر هذا الدليل عبر كل إعداد: تمكين عنصر واجهة المستخدم، وإضافته إلى الصفحة، وقاعدة الأبعاد التي تتعثر على الجميع تقريبًا في محاولتهم الأولى، والتوجيه، والنسبة المرئية، ونوع المقبض، والتصميم، وما يجب فعله عندما يسيء شريط التمرير التصرف على الهاتف المحمول. لمزيد من أفكار التصميم قبل وبعد بمجرد نقر الميكانيكيين، راجع دليل العرض الكامل قبل وبعد.
ما ستحتاجه قبل أن تبدأ
- WordPress مع تثبيت Elementor ونشطه. الإصدار المجاني من Elementor يكفي.
- الإضافات الرئيسية لـ Elementor مثبتة ونشطة. الخطة المجانية تغطي هذه القطعة. انظر دليل التثبيت إذا كان البرنامج المساعد جديدًا بالنسبة لك.
- تم اقتصاص صورتين بنفس أبعاد البكسل بالضبط. المزيد عن السبب في لحظة ما، فهو مهم أكثر مما يتوقعه الناس.
الخطوة 1: تمكين أداة مقارنة الصور
تأتي Master Addons مع العشرات من عناصر واجهة المستخدم، ولا يتم تحميلها جميعًا افتراضيًا في كل عملية تثبيت. انتقل إلى الإضافات الرئيسية → الحاجيات في لوحة تحكم WordPress الخاصة بك وتأكيد مقارنة الصور تم تشغيله. إذا لم يظهر في لوحة عناصر Elementor بعد لحظة، فهذا هو السبب دائمًا تقريبًا.
الخطوة 2: أضف الأداة إلى صفحتك
افتح صفحة باستخدام Elementor، وابحث عن مقارنة الصور في لوحة Elements (ابحث عن شارة MA الأرجوانية)، واسحبها إلى صفحتك. يتم تحميله بصورتين نائبتين وشريط تمرير عامل، حتى تتمكن من رؤية التخطيط قبل لمس إعداد واحد.
الخطوة 3: قم بتحميل صورك قبل وبعد
افتح ال محتوى علامة التبويب، ثم الصور قسم. لديها قبل علامة التبويب و بعد علامة التبويب، ولكل واحدة منها إعداد خاص بها لاختيار حقل الصورة وحقل التسمية وإعداد دقة الصورة. اضبط الصورة السابقة على علامة التبويب "قبل"، ثم قم بالتبديل إلى "بعد"، ثم اضبط الصورة الثانية. من السهل تحميل كلتا الصورتين إلى نفس علامة التبويب عن طريق الخطأ، لذا تحقق من علامة التبويب النشطة قبل اختيار الصورة.
اكتب تسمية قصيرة في كل علامة تبويب إذا كنت تريد تسمية توضيحية متراكبة، مثل “Before” و“After أو” أو“Old Design” و“Redesign.”
القاعدة التي تعثر الجميع: مطابقة أبعاد الصورة
يجب أن تكون كلتا الصورتين بنفس أبعاد البكسل ونفس العرض ونفس الارتفاع. إذا كانت إحدى الصورتين 1600×1000 والأخرى 1200×800، فإن شريط التمرير يمد أو يحصد إحداهما لتناسبها، وتبدو المقارنة مشوهة أو غير محاذية في اللحظة التي يسحب فيها شخص ما المقبض.
قم بإصلاح ذلك عن طريق اقتصاص الصورتين إلى أبعاد متطابقة قبل التحميل، في أي محرر تستخدمه عادةً، أو باستخدام محرر WordPress الخاص محرر الصور المدمج بعد التحميل. يساعد تعيين دقة صورة ثابتة على علامتي التبويب في الأداة، ولكنه لن يصلح نسبة عرض إلى ارتفاع مختلفة تمامًا بين الصورتين المصدرتين.
الخطوة 4: ضبط الاتجاه
في قسم الإعدادات، يقوم تبديل الاتجاه بالتبديل بين الانقسام الرأسي (المسح من اليسار إلى اليمين، الافتراضي) والانقسام الأفقي (المسح من أعلى إلى أسفل). عمودي يناسب لقطات المناظر الطبيعية الواسعة. عادةً ما يُقرأ الأفقي بشكل أفضل للصور الطويلة أو الشخصية، نظرًا لأن القطعة الضيقة من اليسار إلى اليمين لا تظهر ما يكفي من الصورة الطويلة في وقت واحد.
الخطوة 5: اضبط النسبة المرئية ونوع المقبض
تحدد النسبة المرئية مكان وضع المقبض عند تحميل الصفحة، كنسبة مئوية. افتحه بنسبة 50% تقريبًا للحصول على انطباع أول محايد، أو ابدأ تشغيله بالقرب من جانب واحد إذا كنت تريد أن تهيمن الصورة قبل أو بعد التحميل.
يقرر مقبض النقل ما الذي يؤدي إلى تشغيل الشريحة: السحب أو التمرير أو النقر أو التمرير. يعمل السحب بشكل جيد على سطح المكتب، حيث يتوقع الزائرون الإمساك به وسحبه. يبدو التمرير سلسًا على الماوس ولكن يمكن أن يفشل في الوصول إلى المستخدمين الذين لا يقومون بالتمرير مطلقًا، لذا فإن السحب/التمرير أو النقر هو الإعداد الافتراضي الأكثر أمانًا إذا كانت حركة المرور الخاصة بك متنقلة.
الخطوة 6: قم بتصميم شريط التمرير
تغطي علامة التبويب "النمط" نمط التخطيط (الحدود، ونصف القطر، وظل المربع حول عنصر واجهة المستخدم بأكمله)، والمقبض (اللون، والحجم، والأيقونة)، والتسمية (اللون لكل جانب، والطباعة، والخلفية، والتباعد لتراكب التسمية التوضيحية). لا يغير أي من هذا كيفية عمل شريط التمرير، بل يغير مظهره فقط، لذلك من الآمن تخطي التمريرة الأولى والعودة بمجرد أن تصبح الآليات صحيحة.
سلوك الهاتف المحمول واللمس
يستجيب Elementor افتراضيًا، لذلك يتم تغيير حجم الأداة باستخدام إطار العرض دون إعداد إضافي. ما يحتاج فعليًا إلى الاختبار على الهاتف هو إعداد مقبض الحركة. يعمل السحب والتمرير بشكل طبيعي باستخدام الإصبع، ويعمل النقر أيضًا. لا يوجد التمرير على شاشة تعمل باللمس، لذا فإن شريط التمرير الذي تم ضبطه على التمرير يظل ثابتًا لزوار الهاتف المحمول، ويظهر فقط نسبة البداية المرئية دون أي طريقة لتحريكه.
دليل Elementor الخاص على تصميم سريع الاستجابة يغطي أساسيات نقطة التوقف إذا كنت بحاجة أيضًا إلى تغيير حجم الأداة نفسها للكمبيوتر اللوحي أو الهاتف المحمول، بشكل منفصل عن سلوك المقبض.
الإضافات الرئيسية مقابل خيارات مقارنة العناصر الأخرى
| خيار | تكلفة | التحكم في الاتجاه | التعامل مع مشغلات |
|---|---|---|---|
| الإضافات الرئيسية مقارنة الصور | حر | أفقي وعمودي | اسحب/امسح، انقر، قم بالتمرير |
| الإضافات الأساسية مقارنة الصور | الطبقة المجانية متاحة | نعم | يجر |
| قبل بعد شريط تمرير مقارنة الصور (WordPress.org) | مكون إضافي مجاني ومستقل | محدود | يجر |
| إليمنتور برو (أصلي) | لا توجد القطعة المضمنة | لا ينطبق | لا ينطبق |
لا يحتوي Elementor core، المجاني أو Pro، على عنصر واجهة مستخدم أصلي لمقارنة الصور خاص به. أيًا كان المسار الذي تسلكه، فإنك تقوم بتثبيت عنصر واجهة مستخدم تابع لجهة خارجية في كلتا الحالتين، وبالتالي فإن المقارنة الصادقة تكون بين عناصر واجهة المستخدم هذه، وليس بين مكون إضافي و“ المدمج في Elementor.”
استكشاف المشكلات الشائعة وإصلاحها
- القطعة مفقودة من لوحة العناصر: أعد فحص الإضافات الرئيسية → الأدوات وتأكيد تمكين مقارنة الصور.
- يبدو المنزلق ممتدًا أو منحرفًا: الصورتان ليسا بنفس أبعاد البكسل؛ اقتصاصها لتتناسب.
- لن يتحرك المقبض على الهاتف: تم ضبط مقبض النقل على Hover؛ قم بتبديله إلى السحب/التمرير أو النقر.
- التسميات لا تظهر: تأكد من تشغيل تبديل التراكب في الإعدادات وأن التسمية مكتوبة بالفعل على علامتي التبويب.
إذا كنت تحب هذا التفاعل بين السحب والكشف، فإن أداة نقطة اتصال الصورة و ال أداة تأثيرات تحوم الصورة استخدم نمط تحليق ونقر مماثل للتعليق على الصور أو تحريكها.
الأسئلة المتداولة
كيفية إنشاء شريط تمرير الصورة في Elementor؟
قم بتثبيت عنصر واجهة مستخدم يدعمه، نظرًا لعدم قيام Free أو Pro Elementor بشحن عنصر واجهة مستخدم محليًا. يضيف المكون الإضافي Master Addons المجاني عنصر واجهة مستخدم لمقارنة الصور الذي تقوم بسحبه إلى الصفحة، ثم تقوم بتحميل صورتين وتعيين الاتجاه والنسبة والتعامل من أقسام المحتوى والإعدادات.
كيف يمكنني إضافة شريط تمرير الصورة في ووردبريس؟
قم بتثبيت Elementor بالإضافة إلى مكون إضافي لعنصر واجهة المستخدم مثل Master Addons، ثم اسحب عنصر واجهة مستخدم مقارنة الصور إلى أي صفحة. وهو يعمل داخل محرر Elementor وليس من خلال شاشة إعدادات WordPress منفصلة، لذلك لا يوجد رمز قصير يجب تذكره.
كيفية عمل شريط تمرير الصورة قبل وبعد؟
قم بتحميل صورة قبل وصورة لاحقة بأبعاد بكسل متطابقة في علامات التبويب قبل وبعد الأداة، ثم اختر الاتجاه الرأسي أو الأفقي. تقوم الأداة بإنشاء المقسم القابل للسحب تلقائيًا، ولا تقوم بتصميم هذا الجزء بنفسك.
كيفية إظهار ما قبل وبعد في الشريحة؟
يقوم شريط التمرير قبل وبعد بتكديس الصورتين في نفس الإطار مع وجود فاصل بينهما، بحيث تحل شريحة واحدة محل صورتين ثابتتين. يقوم الزائرون بسحب المقبض أو النقر عليه لتحريك المقسم والكشف عن المزيد من صورة أو أخرى.
كيف يمكنني تحرير شريط التمرير في Elementor؟
حدد أداة مقارنة الصور على اللوحة القماشية وفتح إعداداتها في اللوحة اليسرى. تحتوي علامة التبويب "المحتوى" على الصور والتسميات، وتتحكم أقسام الإعدادات والنمط الموجودة أسفلها في النسبة وسلوك المقبض والتصميم المرئي. معاينة التغييرات مباشرة على اللوحة القماشية.
كيفية المقارنة إذا كانت صورتان متماثلتان؟
تم تصميم أداة مقارنة الصور للكشف المرئي جنبًا إلى جنب بدلاً من الاختلاف على مستوى البكسل. إذا كنت بحاجة إلى أن تصطف الصورتان بشكل نظيف، وهو ما تتطلبه الأداة للحصول على نتيجة نظيفة، فقم بقصهما بنفس العرض والارتفاع قبل التحميل بدلاً من الاعتماد على الأداة لاكتشاف عدم التطابق.
كيفية عمل صورة قبل وبعد؟
قم بتصوير أو تصدير كل من الإصدارين السابق واللاحق بنفس الدقة والتأطير، واقطعهما لمطابقتهما إذا لم يصطفا، ثم قم بتحميلهما في أداة مقارنة مثل Master Addons Image Comparison. إن مطابقة الإطارات مهمة أكثر من مطابقة إعدادات الكاميرا للحصول على نتيجة مقنعة.
القراءة ذات الصلة
