بعض الأشياء أسهل في العرض من معرفة: صورة منقحة، وغرفة بعد إعادة التصميم، وتصميم قبل وبعد التنظيف. مجاني القطعة مقارنة الصور في الإضافات الرئيسية للعنصر قم بتكديس صورتين وأسقط مقبضًا قابلاً للسحب بينهما، بحيث ينزلق الزوار ليكشفوا عن الفرق بأنفسهم.
يمكنك تحميل صورة قبل وصورة لاحقة، وإضافة تسميات، واختيار تقسيم رأسي أو أفقي، ثم تصميم المقبض والملصقات لتتناسب مع موقعك. يغطي هذا الدليل كل إعداد في الأداة.
ما تفعله أداة مقارنة الصور #
تعرض الأداة صورتين في نفس الإطار، واحدة فوق الأخرى، مع مقبض منزلق أسفل المنتصف. اسحب المقبض وسيمسح بين الصورة قبل وبعد. يمكنك تسمية كل جانب، وقلب الانقسام من اليسار إلى اليمين إلى الأعلى إلى الأسفل، وتحديد ما إذا كان المقبض يتبع السحب (مجانيًا) أو، باستخدام Master Addons Pro، حركة النقر أو الماوس.
هناك علامتا تبويب للعمل معهما. محتوى يحمل الصورتين والتسميات وسلوك شريط التمرير. أسلوب يتحكم في التخطيط وتسميات التراكب والمقبض. توجد خيارات Elementor Advanced المعتادة بجانبها.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
- صورتان تصطفان، بنفس الحجم والإطار، لذلك تُقرأ الشريحة كمشهد واحد.
كيفية إضافة عنصر واجهة المستخدم لمقارنة الصور #
في محرر Elementor، افتح عناصر لوحة والبحث عن مقارنة الصور، أو قم بالتمرير إلى قسم الإضافات الرئيسية (تحمل الأدوات شارة MA أرجوانية). اسحبه إلى صفحتك وسيتم تحميله بنموذجين من الصور وشريط تمرير يمكنك البدء في التحرير على الفور.
تحميل الصورتين #
افتح ال محتوى علامة التبويب. ال الصور القسم لديه قبل و بعد علامة التبويب، ويقوم كل واحد بتعيين الصورة والتسمية والدقة الخاصة به.
- قبل/بعد علامات التبويب: التبديل بين الجانبين لتعيين كل صورة.
- اختر صورة: اختر الصورة لهذا الجانب من مكتبة الوسائط.
- ملصق: تعليق قصير للجانب، مثل قبل العمل أو النتائج النهائية.
- دقة الصورة: الحجم المقدم، مثل كامل أو كبير.
اختر كل صورة من المكتبة #
انقر اختر صورة وتفتح مكتبة الوسائط WordPress. اضبط الصورة السابقة على علامة التبويب "قبل"، ثم قم بالتبديل إلى علامة التبويب "بعد" واختر العلامة الثانية. من السهل أن تنسى: علامة التبويب الموجودة في وضع تحديد الجانب الذي تقوم بتغييره، لذا تحقق منها قبل الضغط على "تحديد".
تعيين التسميات #
اكتب أ ملصق في كل علامة تبويب وتقوم الأداة بطباعتها كتراكب على هذا الجانب من الصورة. يوجد الملصق السابق على جانب واحد، والملصق التالي على الجانب الآخر، حتى يعرف الزائرون أيهما دون تهجئته.
اضبط إعدادات شريط التمرير #
افتح ال إعدادات قسم لكيفية تصرف شريط التمرير. هذا هو المكان الذي تقوم فيه بتعيين موضع البداية واتجاه الانقسام وما الذي يحرك المقبض.
- النسبة المرئية (%): حيث يبدأ المقبض، حتى تتمكن من فتحه على الجانب السابق أو التالي.
- تراكب: إظهار أو إخفاء التسميات قبل وبعد.
- تحرك المقبض: سحب/تمرير الماوس مجاني. تحتاج حركة الماوس والنقر بالماوس إلى Master Addons Pro.
تبديل الاتجاه #
ال توجه تبديل المفاتيح بين الأفقي والرأسي. الأفقي، الافتراضي، يعطي مسحًا من اليسار إلى اليمين. يقوم Vertical بتكديس الصورة السابقة في الأعلى والصورة التالية في الأسفل، بمقبض لأعلى ولأسفل، والذي عادةً ما يُقرأ بشكل أفضل للصور الطويلة.
قم بتصميم التخطيط والمقبض والتسميات #
افتح ال أسلوب علامة التبويب. هناك أقسام ل نمط التخطيط, تراكب, مقبض، و ملصق، لذا فإن شريط التمرير يطابق تصميمك بدلاً من المظهر الافتراضي.
- نمط التخطيط: الحدود والحشو والهامش حول شريط التمرير بأكمله. يعد Border Radius وBox Shadow من الخيارات الاحترافية.
- مقبض: لون وحجم ونمط التحكم في السحب.
- ملصق: اللون لكل جانب، والطباعة، والخلفية، والحدود، والتباعد للتسميات التوضيحية.
حالات الاستخدام الشائعة #
- تحرير الصور عرض لقطة أولية بجوار النسخة المنقحة.
- المنزل والتجديد قبل وبعد إعادة التصميم أو التنظيف.
- التصميم والتطوير التخطيط القديم مقابل إعادة التصميم.
- الصحة واللياقة البدنية لقطات التقدم جنبا إلى جنب.
- منتجات عنصر عادي بجوار النتيجة النهائية أو المصممة.
نصائح للعمل مع أداة مقارنة الصور #
- تطابق الصورتين. نفس الحجم والزاوية والمحصول بحيث تُقرأ الشريحة كمشهد واحد، وليس صورتين محشورتين معًا.
- ضبط نسبة البداية. افتح جزئيًا باستخدام Visible Ratio حتى يتمكن الزائرون من معرفة أن هناك شيئًا ما يجب سحبه.
- إبقاء التسميات قصيرة. قبل وبعد، أو كلمتين، اجلس أكثر نظافة على الصورة من الجملة الكاملة.
- اختر الزناد الصحيح. يعمل السحب على شاشات سطح المكتب وشاشات اللمس. يبدو خيار Pro Mouse Move سريعًا ولكنه لا يفعل شيئًا على الهواتف التي لا تحتوي على تحليق.
- استخدم عموديًا للقطات الطويلة. يعمل الانقسام من أعلى إلى أسفل بشكل أفضل مع الصور الشخصية من المسح الضيق من اليسار إلى اليمين.
شاهد الفيديو التعليمي #
تفضل المتابعة على الشاشة؟ يمر برنامج الفيديو التعليمي أدناه عبر عنصر مقارنة الصور من البداية إلى النهاية، موضحًا كيفية عمل الصور والتسميات وإعدادات شريط التمرير والتصميم في محرر Elementor.
الأسئلة المتداولة #
ما هي أداة مقارنة الصور في الإضافات الرئيسية؟
إنها أداة Elementor تقوم بتكديس صورة قبل وبعد بمقبض قابل للسحب بينهما. يقوم الزائرون بتحريك المقبض للمسح من صورة إلى أخرى، مع تسميات اختيارية على كل جانب، وكلها مضبوطة من لوحة Elementor بدون رمز.
كيف أضيف قبل وبعد التسميات؟
افتح قسم الصور واكتب علامة التبويب "قبل" وعلامة التبويب "بعد". تتم طباعة كل ملصق كتراكب على جانبه من الصورة. يمكنك إظهارها أو إخفائها باستخدام تبديل التراكب في الإعدادات وتصميمها في قسم التسمية في علامة تبويب النمط.
هل يمكنني جعل شريط التمرير عموديًا أو أفقيًا؟
نعم. يحتوي قسم الإعدادات على مفتاح تبديل الاتجاه. الافتراضي هو أفقي، وهو تقسيم من اليسار إلى اليمين؛ قم بالتبديل إلى الوضع الرأسي وسيتم تكديس الصور من الأعلى والأسفل بمقبض من أعلى إلى أسفل. يعمل الوضع الرأسي بشكل جيد مع الصور الشخصية أو لقطات الشاشة الطويلة.
كيف يقوم الزوار بتحريك شريط تمرير المقارنة؟
يؤدي القائمة المنسدلة "مقبض النقل" في الإعدادات إلى تعيين المشغل. يعد سحب/تمرير الماوس مجانيًا ويعمل على شاشات سطح المكتب وشاشات اللمس. يعد Mouse Move وMouse Click من خيارات Master Addons Pro.
هل أحتاج إلى صور بنفس الحجم؟
للحصول على أفضل نتيجة، نعم. توجد الصورتان في نفس الإطار، لذا فإن مطابقة الحجم والزاوية والمحصول تجعل الشريحة تُقرأ كمشهد واحد. إذا اختلفت الصور، فقم بتعيين دقة صورة ثابتة بحيث يتم تقديمهما بنفس الأبعاد.
إلتحاق بالركب #
تقوم أداة مقارنة الصور بتحويل صورتين إلى صورة تفاعلية قبل وبعد: تحميل الصورتين، وإضافة تسميات، وضبط الاتجاه والمقبض، ثم قم بتصميم شريط التمرير ليتناسب. بالنسبة للعناصر ذات الصلة، راجع أداة نقطة اتصال الصورة و ال أداة تأثيرات تحوم الصورة، تصفح بالكامل عناصر واجهة المستخدم والإضافات الرئيسية، وانظر صفحة القطعة لمقارنة الصور أو ال قبل وبعد دليل المنزلق على سبيل المثال.
