الوجبات السريعة الرئيسية
- توجد تأثيرات تحويم Elementor للصور في علامة التبويب نمط عنصر واجهة المستخدم للصورة، ضمن علامة تبويب تحوم مع أربعة عناصر تحكم: العتامة، ومرشحات CSS، ومدة الانتقال، والرسوم المتحركة للتحليق.
- لا يحتاج تأثير التدرج الرمادي لتلوين التمرير في Elementor إلى رمز: اضبط التشبع على 0 ضمن مرشحات CSS في علامة التبويب عادي ثم عد إلى 100 في علامة التبويب Hover.
- تعمل الإعدادات المسبقة للرسوم المتحركة Hover الخاصة بـ Elementor، مثل Grow، على تحريك الصورة بأكملها، ويقوم الإعداد المسبق Grow بقياس الصورة إلى 110 بالمائة من حجمها عند التمرير.
- لا يمكن لعنصر واجهة مستخدم صورة Elementor إظهار عنوان أو وصف فوق الصورة عند التمرير، لذلك تحتاج تراكبات النص إلى حل بديل للحاوية أو CSS مخصص أو عنصر واجهة مستخدم إضافي.
- تحتوي أداة Master Addons Image Hover Effects على 30 تأثير تحويم مسمى تعمل على تحريك العنوان والوصف فوق الصورة، ويتم اختيارها من قائمة منسدلة واحدة لـ Hover Effect.
يمكنك إضافة تأثيرات تحوم Elementor إلى الصورة بثلاث طرق. تحتوي أداة الصورة على إعدادات التعتيم ومرشح CSS لحالة التحويم. كما أن لديها إعدادات مسبقة للرسوم المتحركة الحوامة التي تحرك الصورة. للحصول على عنوان ووصف يظهران فوق الصورة، تحتاج إلى أداة مصممة لها، مثل تأثيرات تحوم الصورة.
يغطي هذا الدليل كل مسار بالإعدادات الدقيقة التي تم اختبارها على Elementor 4.3. ابدأ بالمسارين الأولين إذا كنت تريد فقط أن تتفاعل الصورة، وانتقل إلى المسار الثالث إذا كنت تريد نصًا على الصورة.
جدول المحتويات
حيث توجد إعدادات التمرير في Elementor
حدد عنصر واجهة مستخدم الصورة، وافتح أسلوب علامة التبويب وانظر أسفل قسم الصورة. يوجد أسفل عناصر التحكم في الحجم علامتا تبويب، عادي وHover. كل شيء في علامة التبويب Hover ينطبق فقط عندما يكون المؤشر فوق الصورة. يشرح العنصر الفكرة في ذلك مقدمة لتأثيرات التحويم.
| يتحكم | ماذا يفعل عند التحليق |
|---|---|
| التعتيم | يتلاشى الصورة للداخل أو للخارج، من 0 إلى 1 |
| مرشحات CSS | يتغير التمويه والسطوع والتباين والتشبع ودرجة اللون |
| مدة الانتقال | يضبط المدة التي يستغرقها التغيير بالثواني |
| تحوم الرسوم المتحركة | يلعب حركة محددة مسبقًا مثل Grow |
الطريقة الأولى: مرشحات العتامة وCSS
استخدم مرشحات العتامة وCSS عندما تتغير الصورة نفسها عند التمرير. المثال الكلاسيكي هو الصورة التي يتم وضعها باللونين الأبيض والأسود وتتحول إلى اللون عند وصول المؤشر.
- حدد عنصر واجهة المستخدم للصورة وافتح أسلوب.
- على ال عادي علامة التبويب، انقر فوق القلم الرصاص المجاور مرشحات CSS واسحب التشبع إلى 0. تتحول الصورة إلى اللون الرمادي.
- التبديل إلى تحوم علامة التبويب، فتح مرشحات CSS مرة أخرى وضبط التشبع على 100.
- تعيين مدة الانتقال إلى حوالي 0.4 لذلك يتلاشى اللون.
- اختياري: اضبط العتامة على 0.85 على الوضع العادي و1 على Hover للحصول على سطوع طفيف.
تمنحك نفس علامتي التبويب ضبابية واضحة، أو صورة خافتة تضيء، أو إزاحة درجة اللون. حافظ على الانتقال بين 0.3 و0.5 ثانية. أقصر من ذلك يبدو وكأنه وميض، والأطول يبدو بطيئًا.
الطريقة الثانية: التحويم إعدادات الرسوم المتحركة المسبقة
تقوم Hover Animation بتحريك الصورة بأكملها عندما يكون المؤشر فوقها. إنها عبارة عن قطرة واحدة أسفل علامة التبويب Hover، ولا تحتاج إلى إعداد آخر.
- حدد عنصر واجهة المستخدم للصورة وافتح أسلوبثم تحوم علامة تبويب.
- يفتح تحوم الرسوم المتحركة واختيار الإعداد المسبق. ينمو هو الذي يريده معظم الناس.
- قم بمعاينة الصفحة وحرك المؤشر فوق الصورة.
يعمل النمو على تكبير الصورة إلى ما بعد حوافها الأصلية، بحيث يمكن أن تتداخل مع جيرانها في شبكة ضيقة. إذا كنت تريد تكبير الصورة داخل إطار ثابت، فهذا يستغرق بضعة أسطر من CSS.
الطريقة الثالثة: أداة للنص فوق الصورة
استخدم عنصر واجهة مستخدم مخصصًا عندما يجب أن يظهر العنوان والوصف فوق الصورة عند التمرير. تعرض أداة صورة Elementor التسمية التوضيحية الخاصة بها أسفل الصورة ولا تحتوي على إعداد لوضع النص في الأعلى.
تستخدم هذه الخطوات عنصر واجهة المستخدم Image Hover Effects من Master Addons.
- قم بتحرير الصفحة باستخدام Elementor، وابحث في لوحة عناصر واجهة المستخدم تأثيرات تحوم الصورة واسحبه إلى الصفحة.
- تحت التأثيرات والصورة، تحميل الصورة.
- افتح ال تأثير التحويم قم بالتنزيل واختر أحد التأثيرات الثلاثين. تم إدراجها بالاسم، بدءًا من Lily وSadie وRoxy وBubba.
- اكتب عنوان و ال وصف في أقسامهم الخاصة.
- تعيين روابط أم منبثقة؟ إذا كان يجب أن تذهب النقرة إلى مكان ما.
- في علامة التبويب "النمط"، قم بتعيين لون التراكب، وعتامة الصورة للطبيعية والتحليق، والطباعة لكل طبقة نصية.
جرب التأثيرات قبل تثبيت أي شيء. ال صفحة القطعة تأثيرات تحوم الصورة يحتوي على ثماني بطاقات حية يمكنك التمرير بها، بالإضافة إلى القائمة الكاملة المكونة من 30 تأثيرًا.
تعمل ثمانية من التأثيرات بدون ترخيص Pro و22 تحتاج إلى Master Addons Pro. تحتوي كل عنصر واجهة مستخدم على صورة واحدة، لذا فإن شبكة البطاقات الحوامة عبارة عن عدة عناصر واجهة مستخدم جنبًا إلى جنب.
فيديو تعليمي
يقوم هذا الفيديو الذي تبلغ مدته أربع دقائق بإعداد عنصر واجهة مستخدم Image Hover Effects من صفحة فارغة.
ما هي الطريقة التي يجب أن تستخدمها؟
اختر ما يجب تغييره عند التمرير: الصورة أو موضعها أو النص الموجود فوقها.
| تريد | يستخدم | الاحتياجات |
|---|---|---|
| تدرج رمادي إلى اللون، ضبابي إلى حاد، خافت إلى مشرق | مرشحات CSS والعتامة في علامة التبويب تحوم | العنصر |
| الصورة لتنمو أو تنبض | تحوم الرسوم المتحركة | العنصر |
| التكبير الذي يبقى داخل إطاره | فئة CSS وبضعة أسطر من CSS | العنصر ومكان لإضافة CSS |
| عنوان ووصف على الصورة | أداة تأثيرات تحوم الصورة | الإضافات الرئيسية |
| صورة ثانية تحل محل الأولى | عنصر واجهة مستخدم الصورة المتقدم، أو خلفية الحاوية | الإضافات الرئيسية، أو العنصر وحده |
للحصول على النصوص والصور مجتمعة بطرق أخرى، راجع نص العنصر فوق الصورة.
هل تعمل تأثيرات التمرير على الهواتف؟
ليس مثل التمرير، لأن شاشة اللمس لا تحتوي على مؤشر للتحريك معه. لا يتم تشغيل تأثيرات علامة التبويب "نمط" الخاصة بـ Elementor على الهاتف، مما لا يسبب أي ضرر لتغيير اللون.
باستخدام أداة Image Hover Effects، عادةً ما تعرض النقرة الأولى النص وتتبع النقرة الثانية الرابط. إذا كان النص ضروريًا، مثل السعر أو الاسم، فضعه في مكان مرئي على الشاشات الصغيرة أيضًا.
الأسئلة المتداولة
كيف يمكنني إضافة تأثير التمرير إلى الصورة في Elementor؟
حدد عنصر واجهة مستخدم الصورة، وافتح علامة التبويب "النمط" وانتقل إلى علامة التبويب "تحريك". قم بتعيين عوامل تصفية التعتيم أو CSS لحالة التمرير، أو اختر الرسوم المتحركة للتحريك مثل Grow. أضف مدة انتقالية تتراوح من 0.3 إلى 0.5 ثانية حتى يكون التغيير سلسًا.
هل يحتوي Elementor على تأثيرات تحويم الصورة بدون مكون إضافي؟
نعم. تحتوي أداة الصورة في Elementor على عناصر تحكم في التمرير للعتامة ومرشحات CSS وإعداد مسبق للرسوم المتحركة للتحريك. يقومون بتغيير الصورة أو نقلها. يحتاج النص الموجود فوق الصورة إلى عنصر واجهة مستخدم إضافي أو CSS مخصص.
كيف أجعل الصورة تنتقل من الأسود والأبيض إلى اللون عند التحليق في Elementor؟
في علامة التبويب "نمط" الخاصة بأداة الصورة، افتح مرشحات CSS في علامة التبويب "عادي" واضبط التشبع على 0. ثم افتح مرشحات CSS في علامة التبويب "تحريك" واضبط التشبع على 100. اضبط مدة الانتقال على حوالي 0.4 ثانية.
كيف أعرض النص عند التمرير فوق صورة في Elementor؟
استخدم أداة مصممة لذلك. باستخدام الإضافات الرئيسية، أضف عنصر واجهة مستخدم Image Hover Effects، وقم بتحميل الصورة، واكتب عنوانًا ووصفًا، واختر تأثير Hover. يبقى النص مخفيًا حتى يصبح المؤشر فوق الصورة.
لماذا لا يعمل تأثير التحويم Elementor الخاص بي؟
تأكد من أن الإعداد موجود في علامة التبويب "تحريك" وليس علامة التبويب "عادي"، وأن مدة الانتقال أعلى من 0. لا يوجد تحوم على الهاتف أو الجهاز اللوحي، لذا اختبر باستخدام الماوس. إذا كنت تستخدم CSS مخصصًا، فتأكد من أن اسم الفئة الموجود على الأداة يطابق الاسم الموجود في الكود.
الأفكار النهائية
تأتي تأثيرات Elementor hover للصور في ثلاثة أنواع. تغير علامة التبويب "النمط" شكل الصورة، وتحركها الرسوم المتحركة، ويحتاج تراكب النص إلى عنصر واجهة مستخدم. ابدأ بعناصر التحكم المضمنة، نظرًا لأن تجربتها لا تكلف شيئًا.
عندما تريد عنوانًا ووصفًا على الصورة، فإن أداة تأثيرات تحوم الصورة لديه 30 تأثيرًا جاهزًا للاختيار من بينها، و صفحة التسعير يوضح الخطة التي تتضمن كل منهم.
القراءة ذات الصلة
