مقارنة الصور

بعض الأشياء أسهل في العرض من معرفة: صورة منقحة، وغرفة بعد إعادة التصميم، وتصميم قبل وبعد التنظيف. ال مقارنة الصور القطعة في الإضافات الرئيسية للعنصر قم بتكديس صورتين وأسقط مقبضًا قابلاً للسحب بينهما، بحيث ينزلق الزوار ليكشفوا عن الفرق بأنفسهم.

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

ما تفعله أداة مقارنة الصور #

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

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

قبل أن تبدأ #

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

كيفية إضافة عنصر واجهة المستخدم لمقارنة الصور #

في محرر Elementor، افتح عناصر لوحة والبحث عن مقارنة الصور، أو قم بالتمرير إلى قسم الإضافات الرئيسية (تحمل الأدوات شارة MA أرجوانية). اسحبه إلى صفحتك وسيتم تحميله بنموذجين من الصور وشريط تمرير يمكنك البدء في التحرير على الفور.

تحميل الصورتين #

افتح ال محتوى علامة التبويب. ال الصور القسم لديه قبل و بعد علامة التبويب، ويقوم كل واحد بتعيين الصورة والتسمية والدقة الخاصة به.

• قبل/بعد علامات التبويب: التبديل بين الجانبين لتعيين كل صورة.
• اختر صورة: اختر الصورة لهذا الجانب من مكتبة الوسائط.
• ملصق: تعليق قصير للجانب، مثل قبل العمل أو النتائج النهائية.
• دقة الصورة: الحجم المقدم، مثل كامل أو كبير.

اختر كل صورة من المكتبة #

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

تعيين التسميات #

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

اضبط إعدادات شريط التمرير #

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

• النسبة المرئية (%): حيث يبدأ المقبض، حتى تتمكن من فتحه على الجانب السابق أو التالي.
• تراكب: إظهار أو إخفاء التسميات قبل وبعد.
• تحرك المقبض: اسحب أو اسحب أو انقر أو قم بالتمرير لتحريك شريط التمرير.

تبديل الاتجاه #

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

قم بتصميم التخطيط والمقبض والتسميات #

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

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

حالات الاستخدام الشائعة #

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

نصائح للعمل مع أداة مقارنة الصور #

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

شاهد الفيديو التعليمي #

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

الأسئلة المتداولة #

إلتحاق بالركب #

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