30 تأثير تحويم الصورة للعنصر (مع أمثلة)

الوجبات السريعة الرئيسية

• تحتوي أداة Master Addons Image Hover Effects لـ Elementor على 30 تأثير تحويم للصور، يتم اختيار كل منها بالاسم من القائمة المنسدلة Hover Effect في علامة التبويب المحتوى.
• تعمل ثمانية تأثيرات لتحويم الصور بدون Master Addons Pro: Lily وSadie وRoxy وBubba وRomeo وLayla وHoney وOscar. التأثيرات الـ 22 الأخرى تحتاج إلى Pro.
• تُظهر معظم تأثيرات تحويم الصور الثلاثين عنوانًا ووصفًا، وستة تظهر أيضًا أيقونات اجتماعية، ويستخدم Honey عنوانًا فرعيًا وتعرض Julia ثلاثة أسطر منفصلة من النص.
• يتم إنشاء كل تأثير تحويم صورة في عنصر واجهة المستخدم باستخدام CSS، وكل عنصر واجهة مستخدم يحمل صورة واحدة، لذلك يتم إنشاء شبكة من بطاقات التحويم من عدة عناصر واجهة مستخدم.
• على شاشات اللمس، تظهر تأثيرات تحويم الصورة عادةً عند النقر الأول، ويتبع النقر الثاني الرابط.

تأثيرات تحويم الصورة هي رسوم متحركة يتم تشغيلها عندما يتحرك المؤشر فوق الصورة، في أغلب الأحيان للكشف عن العنوان والوصف. وفيما يلي 30 منهم، كلهم من أداة تأثيرات تحوم الصورة بالنسبة لـ Elementor، يتم التقاط كل منها في حالة التمرير الخاصة بها على صفحة حقيقية. استخدم القائمة لاختيار التأثير حسب ما يظهره والمكان المناسب له.

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

كيفية قراءة هذه الأمثلة

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

النص والألوان والخطوط كلها ملكك لتغييرها. ما يصلحه التأثير هو تخطيط التراكب وكيفية وصوله.

التأثيرات الثمانية التي تعمل بدون Pro

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

1. زنبق

يقع العنوان والوصف في الزاوية اليسرى السفلية فوق صورة خافتة قليلاً. إنها تناسب الصور المصغرة للمحفظة حيث يجب أن تظل الصورة موضع التركيز.

2. سادي

يتم توسيط العنوان ويظهر الوصف في الأسفل حيث يغطي اللون الصورة. إنه يناسب مربعات الوجهة وبطاقات الفئات بشعار قصير.

3. روكسي

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

4. بوبا

يتم رسم إطار حول المركز ويوجد العنوان والوصف بداخله. إنها تناسب القوائم التي تحمل فيها كل بطاقة اسمًا وسطرًا واحدًا من التفاصيل.

5. روميو

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

6. ليلى

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

7. العسل

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

8. أوسكار

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

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

تأثيرات 22 برو

تحتاج التأثيرات الـ 22 المتبقية إلى Master Addons Pro. ستة منهم يضيفون أيقونات اجتماعية، وواحدة، جوليا، تعرض ثلاثة أسطر من النص.

9. مارلي

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

10. روبي

يبقى العنوان فوق مربع محاط يحمل الوصف. إنه يناسب البلاط المميز حيث يكون الوصف عبارة عن استدعاء للعمل.

11. ميلو

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

12. دكستر

العنوان في الأعلى والإطار السميك في الأسفل يحمل الوصف. إنه يناسب البلاط الترويجي الجريء.

13. سارة

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

14. زوي

يرتفع شريط ملون من الأسفل يحمل العنوان والأيقونات الاجتماعية، ويوضع الوصف فوقه. يناسب أعضاء الفريق وبطاقات المؤلف.

15. شيكو

تصبح الصورة داكنة داخل الإطار، مع وضع العنوان والوصف في المنتصف. يناسب المعارض السينمائية المظلمة.

16. جوليا

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

17. جالوت

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

18. هيرا

يظهر مخطط ماسي في المنتصف مع العنوان وأربعة أيقونات اجتماعية. يناسب صور الملف الشخصي وبطاقات الارتباط الاجتماعي.

19. ونستون

العنوان في الأعلى ويظهر صف من الرموز الاجتماعية في الأسفل. إنه يناسب شبكات الفريق حيث يكون لكل شخص ملفات تعريف اجتماعية.

20. سيلينا

تتقلص الصورة داخل الإطار بينما يقع العنوان والوصف بالقرب من الجزء العلوي. يناسب دفاتر البحث والتصوير الفوتوغرافي للمنتج.

21. تيري

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

22. فيبي

يتم توسيط العنوان بصف من الرموز الاجتماعية أسفله مباشرة. يناسب بطاقات الملف الشخصي البسيطة.

23. أبولو

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

24. كيرا

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

25. ستيف

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

26. موسى

العنوان موجود في مربع في أعلى اليسار والوصف في مربع ثانٍ في أسفل اليمين. إنه يناسب الملصقات المكونة من جزأين مثل الاسم والسعر.

27. موسيقى الجاز

يتم توسيط العنوان والوصف، ويتم قطع الخطوط القطرية عبر الزوايا. يناسب الحدث والأعمال الفنية الموسيقية.

28. مينغ

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

29. ليكسي

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

30. دوق

العنوان في الأعلى والوصف موجود في مربع في أسفل اليسار. إنها تناسب البطاقات ذات الملصق القصير الذي يجب أن يُقرأ مثل العلامة.

جميع تأثيرات تحويم الصور الثلاثين في جدول واحد

يسرد هذا الجدول كل تأثير مع طبقات النص التي يعرضها وما إذا كان يحتاج إلى Pro.

كيفية إضافة أحد هذه التأثيرات في Elementor

تتطلب إضافة تأثير عنصر واجهة مستخدم واحدًا ومنسدلة واحدة.

1. قم بتحرير صفحتك باستخدام Elementor واسحب تأثيرات تحوم الصورة القطعة عليه.
2. تحميل الصورة تحت التأثيرات والصورة.
3. اختر التأثير بالاسم من تأثير التحويم.
4. ملء في عنوان و وصف. تظهر التأثيرات مع الرموز قسم الروابط الاجتماعية أيضًا.
5. تعيين روابط أم منبثقة؟ إذا كان يجب أن تؤدي النقرة إلى مكان ما.

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

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

الأفكار النهائية

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

ال صفحة القطعة تأثيرات تحوم الصورة لديه بطاقات حية لتجربتها، و صفحة التسعير يسرد الخطط التي تشمل جميع 30.

القراءة ذات الصلة

• نص العنصر فوق الصورة
• كيفية إنشاء قسم لأعضاء الفريق في Elementor
• المكونات الإضافية لمعرض Elementor القابلة للتصفية
• مقارنة أفضل المكونات الإضافية لتأثيرات تحوم الصور Elementor