تأثيرات تحويم صورة العنصر: 30 حركة متحركة للصور
توجد صورة ثابتة هناك. أضف تأثيرات تحوم الصورة وتبدأ نفس الصورة في القيام ببعض الأعمال: ينزلق العنوان، ويتلاشى الوصف، وترسل النقرة الأشخاص إلى رابط أو تفتح نافذة منبثقة كاملة. تأتي أداة Image Hover Effects لـ Elementor مع 30 رسمًا متحركًا للتحليق (8 في البرنامج الإضافي المجاني و22 أخرى مع Pro) وتقوم بإعدادها دون كتابة سطر من CSS. إنه يناسب الأماكن التي يجب أن تحمل فيها صورة واحدة عنوانًا وتعليقًا توضيحيًا وإجراءً: المحافظ وشبكات الفريق وبطاقات الخدمة وعروض المنتجات.
اختر تأثيرًا، واختر ما تفعله النقرة، وقم بتصميم كل طبقة لتتناسب مع تصميمك. ما ينتهي بك الأمر هو بطاقة صور يتوقف الأشخاص عليها فعليًا بدلاً من التمرير عبرها. يمر الفيديو أدناه عبر كل شيء، ويعرض كل رسوم متحركة، ويستغرق الإعداد بضع دقائق.
ما هي تأثيرات تحويم الصورة؟
تأثير تحويم الصورة هو رسم متحرك يتم تشغيله عندما يقوم شخص ما بتحريك الماوس فوق الصورة. بدلاً من البقاء مسطحًا، تتفاعل الصورة. يمكنه تكبير لوحة النص أو طمسها أو تغيير لونها أو تحريكها للعرض. سوف تراهم أيضا يسمى تأثيرات تمرير الصورة أو تأثيرات تحوم الصور، وكلها تفعل الشيء نفسه: التقط صورة عادية واجعلها تقرأ كـ “هناك المزيد هنا، انقر فوق me.”
يمكنك بناء كل هذا يدويًا باستخدام CSS المخصص. وهذا يعني كتابة التحولات، وجعلها تتصرف على الهاتف المحمول، والعودة إلى التعليمات البرمجية في كل مرة يتغير فيها التصميم. تتعامل أداة Master Addons معها بشكل مرئي داخل Elementor، حتى تتمكن من الحصول عليها تأثيرات تحوم الصورة البسيطة دون فتح محرر التعليمات البرمجية. إذا كنت تريد رؤية بقية مجموعة الأدوات، فتصفح عناصر واجهة المستخدم والإضافات الرئيسية أو ال ميزات الرسوم المتحركة العنصر.
30 صورة متحركة، 8 منها مجانية
الانطباعات الأولى تحدث عند التمرير. تحصل على مكتبة من الرسوم المتحركة لـ CSS التي تعرض عنوانك ووصفك بسلاسة، بحيث يصل النص بدلاً من مجرد الظهور على الشاشة. قم بتطبيق أي تأثير بنقرة واحدة، ثم قم بالتنقل عبرها في المحرر حتى يناسب المرء الصورة. عادةً ما أحاول تجربة ثلاثة أو أربعة قبل الاستقرار، نظرًا لأن التأثير الذي يبدو رائعًا في لقطة ذات مناظر طبيعية واسعة يمكن أن يبدو وكأنه محصول صورة ضيق.
- التلاشي والتكبير/التصغير: تتلاشى الصورة أو تتوسع بينما يتلاشى النص.
- الشريحة (لأعلى، لأسفل، لليسار، لليمين): تنزلق لوحة التسميات التوضيحية من أي حافة.
- الدفع والكشف: تنتقل الصورة لإفساح المجال للعنوان والوصف.
- تعويم وتألق: مصعد صغير ومسح ضوئي عبر الصورة.
- ثمانية تأثيرات مجانية: ليلي، سادي، روكسي، بوبا، روميو، ليلى، هوني وأوسكار. يضيف Pro 22 آخرين، من Marley إلى Duke.
- يعمل على CSS: تظل الحركة سلسة لأنها لا تعتمد على نصوص ثقيلة.
- سريع الاختبار: قم بتبديل التأثيرات في المحرر وشاهد التغيير على الفور.
الارتباط الذكي والمحتوى المنبثق عند النقر
عليك أن تقرر ما يحدث عندما ينقر شخص ما على البطاقة. قم بتوجيهه إلى أي عنوان URL باستخدام رابط قياسي، أو باستخدام Pro، قم بتبديل الإجراء إلى Popup وأبقي الأشخاص على الصفحة. لا تقتصر النافذة المنبثقة على النص أيضًا: قم بتعيين نوع المحتوى على القسم المحفوظ ويقوم بسحب أي قالب Elementor قمت بإنشائه بالفعل. يؤدي ذلك إلى تحويل بطاقة صورة واحدة إلى مدخل إلى سيرة ذاتية كاملة، أو ورقة مواصفات المنتج، أو نموذج اتصال، ولا يغادر الزائر الصفحة أبدًا.
- إجراءان للنقر: أرسل حركة المرور عبر رابط، أو أبقِ الأشخاص في الموقع باستخدام نافذة منبثقة (Pro).
- القوالب الحقيقية في النافذة المنبثقة (Pro): إظهار صورة أو نص أو تخطيط كامل من مكتبتك.
- ندف، ثم قل: الصورة هي الخطاف والنافذة تحمل التفاصيل.
المحتوى الكامل والتحكم في الأسلوب
يمكنك التحكم في كيفية نظر البطاقة إلى التفاصيل. قم بتحميل صورتك وقم بتعيين العتامة والتصفية بشكل منفصل للحالات العادية وحالات التمرير. أضف عنوانًا (اختر علامة HTML الصحيحة حتى تساعد في بنية صفحتك) ووصفًا، ثم قم بتصميم كل قطعة بمفردها بألوانها ونوعها وظلالها وتباعدها.
- عنوان ووصف منفصلان: قم بتصميم كل واحد بحيث يقرأ التسلسل الهرمي بوضوح.
- مرشحات الصور: لا تزال خدعة التدرج الرمادي إلى اللون عند التحويم تبدو جيدة وهي عبارة عن تغيير في إعداد واحد هنا.
- إطار البطاقة: الخلفية والحدود وظل الصندوق، بالإضافة إلى الزوايا الدائرية والحشوة مع Pro، لذا فهي تتناسب تمامًا مع تخطيطك.
كيفية إضافة تأثيرات تحويم الصورة في Elementor؟
يمكنك الحصول على بطاقة تحوم عاملة في أقل من دقيقتين. لا يوجد CSS، ولا رموز مختصرة.
- قم بتثبيت الإضافات الرئيسية وتنشيطها، ثم قم بتحرير أي صفحة باستخدام Elementor.
- ابحث في لوحة الأدوات عن تأثيرات تحوم الصورة واسحبه إلى التخطيط الخاص بك.
- قم بتحميل صورتك وأضف عنوانًا ووصفًا.
- افتح القائمة المنسدلة لـ Hover Effect واختر الرسوم المتحركة. ثمانية منها مجانية و22 أخرى تأتي مع Pro.
- اضبط إجراء النقر على رابط، أو على نافذة منبثقة تحتوي على قالب محفوظ إذا كان لديك Pro.
- قم بتصميم العنوان والوصف والحاوية، ثم قم بالنشر.
شيء واحد يستحق القيام به قبل النشر: قم بمعاينة البطاقة على الهاتف. لا يوجد التمرير عند اللمس، لذا تأكد من أن سلوك النقر منطقي (المزيد حول ذلك في الأسئلة الشائعة). لكل إعداد تم وضعه بالترتيب، اتبع توثيق تأثيرات تحوم الصور.
أين يمكن استخدام تأثيرات التمرير على الصور؟
- شبكات الفريق: الاسم والدور عند التمرير، ثم السيرة الذاتية الكاملة في نافذة منبثقة عند النقر. هنا كيفية بناء قسم أعضاء الفريق.
- المحافظ والمعارض: عنوان المشروع ورابط دراسة حالة “View” فوق كل صورة.
- بطاقات الخدمة: وصف مختصر ورابط إلى صفحة الخدمة.
- يعرض المنتج: قم بإثارة صورة المنتج، ثم افتح المواصفات في نافذة منبثقة.
- مربعات المدونة والفئة: تعليق التمرير على التنقل الذي تقوده الصورة.
لمزيد من الطرق لتجميع النصوص والصور معًا، اقرأ 25 تقنية عنصر النص فوق الصورة. تتضمن عناصر واجهة المستخدم للصور ذات الصلة صورة دائري، ال معرض الصور القابلة للتصفية، ال نقطة اتصال الصورة القطعة و صورة متقدمة القطعة.
الأسئلة المتداولة لتأثيرات تحويم الصور
هل ستعمل تأثيرات التمرير هذه على الأجهزة المحمولة؟
وهي مصممة لسطح المكتب، حيث يوجد ماوس للتحليق. على شاشة اللمس، عادةً ما يتم تشغيل التأثير على النقرة الأولى لإظهار المحتوى، وتتبع النقرة الثانية الرابط أو تفتح النافذة المنبثقة. لذا خطط لنقرتين على الهاتف المحمول، وتأكد من بقاء النص قابلاً للقراءة بمجرد ظهوره.
كيف يمكنني إنشاء تأثيرات بسيطة لتحريك الصور دون كتابة CSS؟
قم بإسقاط عنصر واجهة مستخدم Image Hover Effects على صفحتك، وقم بتحميل صورة، وأضف عنوانًا ووصفًا، واختر رسمًا متحركًا من القائمة المنسدلة. هذا كل شيء، لا يوجد CSS. تكتب الأداة CSS لك خلف الكواليس، لذلك حتى بطاقة التمرير المتضمنة إلى حد ما تظل سهلة التجميع.
هل يمكنني فتح السيرة الذاتية للفريق أو تفاصيل المنتج في نافذة منبثقة عند النقر؟
نعم مع برو. ضع الاسم في العنوان والدور في الوصف، وقم بتعيين إجراء النقر على النافذة المنبثقة، واختر نوع المحتوى: القسم المحفوظ. قم ببناء السيرة الذاتية كقالب في Elementor وحددها هنا. انقر فوق الصورة وسيفتح هذا التخطيط الكامل في النافذة المنبثقة.
هل جميع تأثيرات تحويم الصور الثلاثين مجانية؟
رقم ثمانية تأثيرات مجانية: Lily، Sadie، Roxy، Bubba، Romeo، Layla، Honey وOscar. أما الـ 22 الأخرى فتأتي مع Master Addons Pro، إلى جانب المحتوى المنبثق والزوايا المستديرة وعناصر التحكم في الحشو. تعمل جميع مرشحات العنوان والوصف والرابط والصورة في الإصدار المجاني.
هل ستؤدي العديد من بطاقات الصور المتحركة إلى إبطاء موقعي؟
تعمل التأثيرات على CSS، لذا لا توجد مشكلة في وجود عدد قليل من الصور على الصفحة. ما يبطئ الأمور فعليًا هو وزن الصورة، لذا اضغط على صورك أولاً. بمجرد تجاوز 20 بطاقة أو نحو ذلك في صفحة واحدة، قم بتشغيل التحميل البطيء وسيظل الطلاء الأول سريعًا.
هل يمكنني استخدام تأثيرات تحويم مختلفة على صور مختلفة؟
تغطي الإعدادات بطاقة واحدة في كل مرة. لمزج التأثيرات، أضف عنصر واجهة مستخدم Image Hover Effects منفصلاً لكل صورة وقم بإعدادها بشكل مستقل. هذه هي الطريقة التي تحصل بها على معرض حيث لا يتم تحريك جميع البطاقات بنفس الطريقة.
ما فائدة "القسم المحفوظ" في النافذة المنبثقة فوق النص العادي؟
يعد القسم المحفوظ خيارًا احترافيًا، ويمنحك محرر Elementor الكامل داخل النافذة المنبثقة. بدلاً من النص العادي، يمكنك إضافة صور أو أزرار أو أعمدة أو مقاطع فيديو أو نماذج، بحيث تبدو النافذة المنبثقة مثل بقية موقعك بدلاً من مربع نص مجرد.
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
ناسخ البريد/الصفحة
