العنصر قبل بعد شريط تمرير الصورة: أداة مقارنة مجانية
مقارنة الصور عبارة عن أداة Master Addons مجانية تقوم بتكديس صورة قبل وبعد في إطار واحد مع وجود مقبض بينهما. يقوم الزائرون بسحب المقبض أو تمريره للكشف عن التغيير. أضف تسمية إلى كل جانب، واختر أفقيًا (يسارًا ويمينًا) أو رأسيًا (أعلى وأسفل)، وقم بتعيين مكان بدء تشغيل المقبض، وقم بتصميم المقبض والتسميات والتراكب. لا يحتوي Elementor أو Elementor Pro الحر على شريط تمرير قبل وبعد، لذا فإن هذه الأداة تملأ هذه الفجوة في Elementor المجاني.
كيفية إضافة شريط تمرير قبل وبعد في العنصر
أنت بحاجة إلى Elementor والمكون الإضافي Master Addons المجاني من WordPress.org.
- تأكد من تشغيل مقارنة الصور أدناه الإضافات الرئيسية والأدوات.
- في محرر Elementor، ابحث عن مقارنة الصور واسحبه إلى الصفحة.
- في علامة التبويب "قبل"، اختر الصورة الأولى والتسمية الأولى، ثم افعل الشيء نفسه في علامة التبويب "بعد".
- في الإعدادات، اضبط النسبة المرئية واختر أفقيًا أو رأسيًا.
- استمر في تحريك المقبض على الماوس، اسحب/امسح للهواتف، أو استخدم خيار Pro على الصفحات التي تركز على سطح المكتب.
- قم بتصميم المقبض والملصقات في علامة التبويب "النمط"، ثم اختبر شريط التمرير على الهاتف.
للحصول على نصائح وأمثلة التصميم، اقرأ قبل وبعد دليل المنزلق. يتم إدراج كل إعداد في إعدادات عناصر واجهة المستخدم لمقارنة الصور.
اسحب واسحب قبل بعد شريط التمرير
تحميل قبل و بعد الصور، ولكل منها ملصق خاص بها ودقة الصورة. في إعدادات, النسبة المرئية (%) يضبط حيث يبدأ المقبض، توجه أفقي (الافتراضي) أو عمودي، و تراكب يظهر أو يخفي التسميات. تحرك المقبض هل يتم سحب/تمرير الماوس في البرنامج الإضافي المجاني. يضيف Master Addons Pro حركة الماوس، حيث يتبع المقبض المؤشر، ثم انقر بالماوس.
- عمل السحب والتمرير على شاشات سطح المكتب وشاشات اللمس.
- ابدأ المقبض خارج المركز لتسليط الضوء على النتيجة.
- استخدم صورًا بنفس أبعاد البكسل بحيث يصطف الجانبان.
تراكب قابل للتخصيص وملصقات واضحة
تشغيل تراكب لإظهار تسميات ما قبل وبعد على الصور. يحتوي قسم نمط التراكب على خلفيات عادية ومحركة. ال ملصق يقوم القسم بتصميم كل جانب على حدة باستخدام اللون والطباعة والحدود ونصف قطر الحدود والهامش والحشوة، حتى تتمكن من تغيير “Before” و“After” إلى “Old” و“New” أو أي كلمات أخرى.
- نص تسمية مخصص بأي لغة.
- أنماط منفصلة للتسميات قبل وبعد.
- خلفية تراكب مختلفة على التحليق.
تصميم احترافي للمقبض والحاويات
ال مقبض يقوم القسم بتعيين لون شريط المقبض وحجمه، وعرض صندوق المقبض وارتفاعه، ولون الأيقونة، والحد ونصف قطر الحد العادي والتحليق. نمط التخطيط يضيف حدودًا وحشوة وهامشًا حول شريط التمرير بأكمله. يعد Border Radius وBox Shadow الموجودان على الحاوية من خيارات Master Addons Pro.
- قم بمطابقة لون المقبض مع علامتك التجارية.
- شريط رفيع مع صندوق مقبض دائري للحصول على مظهر نظيف.
- زوايا مستديرة وظل على الحاوية مع Pro.
مقارنة الصور: مجاني مقابل احترافي
لا يحتوي Elementor على عنصر واجهة مستخدم قبل وبعد في البرنامج الإضافي المجاني أو Pro. إليك ما تتضمنه أداة Master Addons المجانية وما يضيفه Pro.
| ميزة | حر | ماستر أدونز برو |
|---|---|---|
| قبل وبعد الصور مع التسميات | نعم | نعم |
| الاتجاه الأفقي والرأسي | نعم | نعم |
| نقطة بداية النسبة المرئية | نعم | نعم |
| مقبض سحب/تمرير الماوس | نعم | نعم |
| مقبض تحريك الماوس والنقر بالماوس | لا | نعم |
| التعامل مع التصميم والتسمية والتراكب | نعم | نعم |
| نصف قطر حدود الحاوية وظل الصندوق | لا | نعم |
بالنسبة لمعظم أشرطة التمرير قبل وبعد، يكون الإصدار المجاني كافيًا. يكون Pro منطقيًا عندما تريد أن يتبع المقبض المؤشر أو تحتاج إلى زوايا مستديرة وظل بدون CSS مخصص. لتثبيت الملاحظات على صورة واحدة بدلاً من ذلك، راجع نقطة اتصال الصورة (برو).
الأسئلة المتداولة لمقارنة الصور
هل أداة مقارنة الصور مجانية؟
نعم. الأداة مجانية مع السحب والتمرير والتسميات والاتجاهات وتصميم المقبض. يضيف Master Addons Pro مقابض حركة الماوس والنقر بالماوس ونصف قطر حدود الحاوية وظل الصندوق.
هل يعمل على الهواتف؟
نعم، مع مقبض سحب/تمرير الماوس المجاني. يقوم الزائرون بالتمرير لتحريك المقسم. يعتمد خيار Pro Mouse Move على التمرير، لذلك لا يعمل على شاشات اللمس.
هل يحتوي Elementor على شريط تمرير قبل وبعد؟
لا. لا يتضمن Elementor أو Elementor Pro المجاني مقارنة للصور أو قبل وبعد عنصر واجهة المستخدم، لذلك تحتاج إلى إضافة مثل هذه.
متى يجب أن أستخدم الاتجاه العمودي؟
استخدم Vertical للصور الطويلة، مثل الصور الشخصية كاملة الطول أو واجهات المباني أو لقطات الشاشة الطويلة. الصورة السابقة توضع في الأعلى والصورة اللاحقة في الأسفل، بمقبض لأعلى ولأسفل.
هل سيؤدي استخدام صورتين عاليتي الدقة إلى إبطاء صفحتي؟
يمكن ذلك، إذا كانت الصور كبيرة جدًا. استخدم إعداد دقة الصورة بحكمة (على سبيل المثال، “Large” بدلاً من "Full") وقم دائمًا بتحسين صورك للويب قبل التحميل. العنصر نفسه خفيف الوزن، ولكن حجم ملف الصورة هو العامل الرئيسي للأداء.
هل يمكنني مقارنة أكثر من صورتين؟
لا. تقوم كل عنصر واجهة مستخدم بمقارنة صورتين. لمزيد من الأزواج، أضف عنصر واجهة مستخدم واحدًا لكل زوج أو اعرض عدة صور في صورة دائري.
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
![ملحق Master Addons Post/Page Duplicator لـ Elementor: رابط صف MA Duplicator في قائمة صفحات WordPress لإنشاء صفحة مقصودة - مسودة [مكررة #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
ناسخ البريد/الصفحة
