الصورة التي تكشف عن عنوان وتعليق على التحويم تحول المعرض المسطح إلى شيء يريد الناس لمسه. ال تأثيرات تحوم الصورة القطعة في الإضافات الرئيسية للعنصر يقوم بتغليف أي صورة في الرسوم المتحركة لتحريك CSS، بحيث يتم عرض العنوان والوصف وشريحة الارتباط أو التلاشي أو التكبير/التصغير عند هبوط المؤشر عليها.
هذه الصفحة هي مرجع الإعدادات. للحصول على عروض توضيحية مباشرة للتأثيرات وما هو مجاني أو احترافي، راجع عنصر واجهة مستخدم تأثيرات تحويم الصورة صفحة.
يمكنك اختيار أحد التأثيرات المسماة، وإسقاط صورة، وإضافة نص التراكب، ثم تصميم الألوان والمرشحات. لا حاجة إلى CSS مخصص. يغطي هذا الدليل كل إعداد في الأداة.
ما تفعله أداة Image Hover Effects #
تلتقط الأداة صورة واحدة وتسقط تراكبًا متحركًا في الأعلى. قم بالتمرير فوقه ويمكنه الكشف عن عنوان ووصف وزر أو رابط، مع الحركة القادمة من تأثير محدد مسبقًا. هناك 30 تأثيرًا مسمىًا. ثمانية منها مجانية (ليلي، سادي، روكسي، بوبا، روميو، ليلى، هوني وأوسكار) و22 أخرى تأتي مع Master Addons Pro.
ثلاث علامات تبويب تشغيله. محتوى يحمل التأثير والصورة والنص المتراكب. أسلوب يتعامل مع عتامة الصورة والمرشحات والحدود وألوان العنوان والوصف. متقدم هو التباعد والرؤية المعتادة للعنصر.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
- صورة، بالإضافة إلى نص العنوان والتعليق الذي تريد إظهاره عند التمرير.
كيفية إضافة عنصر واجهة مستخدم Image Hover Effects #
في محرر Elementor، افتح عناصر لوحة والبحث عن تأثيرات تحوم الصورة، أو قم بالتمرير إلى قسم الإضافات الرئيسية (تحمل الأدوات شارة MA أرجوانية). اسحبه إلى الصفحة وسيتم تحميله بنموذج صورة وتراكب يمكنك تحريره.
اختر التأثير والصورة #
افتح ال محتوى علامة التبويب. ال التأثيرات والصورة القسم هو المكان الذي تقوم فيه بتعيين الرسوم المتحركة للتحليق وتحميل الصورة.
- تأثير التحويم: الرسوم المتحركة المسماة المستخدمة في التحويم (المزيد في هذا التالي).
- تحميل الصورة: اختر الصورة من مكتبة الوسائط.
- حجم الصورة ودقة الصورة: خدم المحصول والقرار.
- روابط أم نافذة منبثقة؟: اجعل الصورة بأكملها رابطًا، أو افتح نافذة منبثقة (يحتاج المحتوى المنبثق إلى Pro).
اختر تأثير التحويم #
ال تأثير التحويم يسرد Dropdown 30 تأثيرًا مسمىًا لـ CSS. الثمانية الأولى مجانية والباقي تم وضع علامة Pro عليها. يقوم كل واحد بتحريك الصورة ونص التراكب بشكل مختلف، من التلاشي الناعم إلى التسمية التوضيحية التي تنزلق.
- سادي، ليلي، ليلى: قم بتلاشي العنوان والتعليق فوق صورة داكنة.
- روكسي، بوبا، روميو: قم بتمرير حد أو لوحة مع النص.
- هوني، أوسكار، مارلي (برو): كشف تسطير أو تسمية توضيحية متحركة.
- متغيرات التكبير/التصغير والطمس: قم بقياس أو تخفيف الصورة خلف النص.
حدد الصورة #
انقر تحميل الصورة لفتح مكتبة الوسائط، ثم التقط صورتك أو قم بتحميلها. مهما كان التأثير الذي اخترته، فإنه يعمل أعلى هذه الصورة.
أضف العنوان #
افتح ال عنوان قسم العنوان الذي يظهر عند التمرير. اكتب النص وقم بتعيين علامة HTML بحيث تتم قراءتها بشكل صحيح لتحسين محركات البحث.
- عنوان: نص العنوان. إذا كان موقعك يستخدم Elementor AI، فسيظهر هنا أيضًا رابط الكتابة باستخدام AI الخاص بـ Elementor.
- علامة HTML: مستوى العنوان، H1 إلى H6.
أضف الوصف والرابط #
افتح ال وصف قسم لإضافة التسمية التوضيحية التي تظهر تحت العنوان على التمرير. يعود الى التأثيرات والصورة، إذا قمت بتعيين روابط أم منبثقة؟ إلى المنبثقة، و نوع المحتوى و محتوى تحدد الحقول ما تظهره النافذة المنبثقة. المحتوى المنبثق يحتاج إلى Pro.
- نوع المحتوى: ما تظهره النافذة المنبثقة: صورة أو نص أو قسم محفوظ أو عنصر واجهة مستخدم محفوظ أو قالب صفحة محفوظ (Pro).
- محتوى: النص المنبثق، تم تحريره في مربع WYSIWYG كامل.
- روابط أم نافذة منبثقة؟: قم بتوجيه الصورة إلى عنوان URL أو افتحها في نافذة منبثقة.
نمط الصورة والتراكب #
افتح ال أسلوب علامة التبويب. ال صورة يتحكم القسم في كيفية ظهور الصورة قبل وأثناء التحليق، ومن هنا يأتي الكثير من التأثير فعليًا.
- عتامة الصورة وعتامة التحويم: مدى وضوح الصورة في حالة الراحة وأثناء التحليق.
- مرشح الصور ومرشح الصور المتحركة: التمويه والسطوع والتباين لكل حالة.
- الحدود، نصف قطر الحدود (Pro)، ظل الصندوق: الإطار حول الصورة.
تحت قسم الصور، منفصل عنوان و وصف تتعامل الأقسام مع لون وطباعة نص التراكب.
حالات الاستخدام الشائعة #
- المحافظ الكشف عن اسم المشروع والرابط عند التمرير.
- شبكات الفريق إظهار الاسم والدور على كل صورة.
- بلاط الخدمة مع عنوان وتعليق قصير لكل صورة.
- الصور المصغرة للمدونة هذا السطح عنوان المنشور على التحويم.
- معارض المنتجات إقران الصورة بالاسم والزر.
نصائح للعمل مع أداة Image Hover Effects #
- استخدم صورًا واضحة. يؤدي التراكب إلى تعتيم الصورة، لذا فإن اللقطة المزدحمة يمكن أن تجعل النص صعب القراءة. الصورة الأكثر هدوءًا مع وجود مساحة في المنتصف تعمل بشكل أفضل.
- إبقاء التسمية التوضيحية قصيرة. يُقرأ سطر واحد تحت العنوان بشكل أفضل من فقرة محشورة في التراكب.
- مطابقة التأثير للمحتوى. التلاشي الدقيق يناسب المحفظة؛ الشرائح الجريئة تناسب العرض الترويجي.
- اضبط علامة العنوان الصحيحة. استخدم H2 أو H3 لعناوين المعرض، وليس H1، إلا إذا كان هو العنوان الرئيسي للصفحة.
- اختبار على الهاتف المحمول. لا يوجد تحليق عند اللمس، لذا تحقق من أن التراكب لا يزال منطقيًا عندما ينقر شخص ما بدلاً من ذلك.
شاهد الفيديو التعليمي #
تفضل المتابعة على الشاشة؟ يمر برنامج الفيديو التعليمي أدناه عبر عنصر Image Hover Effects من البداية إلى النهاية، موضحًا كيفية عمل التأثيرات والنص المتراكب والتصميم في محرر Elementor.
الأسئلة المتداولة #
ما هي أداة Image Hover Effects في الإضافات الرئيسية؟
إنها أداة Elementor التي تضيف رسومًا متحركة لتحوم CSS إلى الصورة. عند التحويم، يكشف عن عنوان وتعليق ورابط اختياري، مع الحركة القادمة من تأثير محدد مسبقًا. يتم تعيين كل شيء من لوحة Elementor بدون رمز.
كم عدد تأثيرات التمرير التي تتضمنها الأداة؟
ثمانية وثلاثون مجانية (سادي، ليلي، روكسي، بوبا، روميو، ليلى، هوني وأوسكار) والـ 22 الأخرى تأتي مع Master Addons Pro. كل واحد يحرك الصورة ويتراكب النص بطريقة مختلفة.
هل يمكنني إضافة رابط أو زر للصورة؟
نعم. يمكن لخيار الروابط أو النوافذ المنبثقة أن يجعل الصورة بأكملها رابطًا في الإصدار المجاني. باستخدام Pro، يمكنه فتح نافذة منبثقة بدلاً من ذلك، حيث يعرض صورة أو نصًا أو قالب Elementor محفوظًا.
هل يمكنني إظهار العنوان والتعليق على التمرير؟
نعم. يقوم قسم العنوان بتعيين العنوان وعلامة HTML الخاصة به، ويضيف حقل الوصف تعليقًا أسفله. يظهر كلاهما كجزء من الرسوم المتحركة للتحليق، بحيث تظل الصورة نظيفة حتى يحوم شخص ما فوقها.
هل تعمل تأثيرات تحويم الصورة على الهاتف المحمول؟
التمرير هو تفاعل سطح مكتب، لذا فإن أجهزة اللمس ليس لها تمرير حقيقي. لا تزال العديد من التأثيرات تظهر التراكب عند النقر، ولكن يجب عليك الاختبار على الهاتف والحفاظ على النص الرئيسي مرئيًا أو يمكن الوصول إليه، خاصة إذا كانت الصورة أيضًا رابطًا.
إلتحاق بالركب #
ال أداة تأثيرات تحوم الصورة يحول الصورة الثابتة إلى صورة تفاعلية: اختر تأثيرًا، وقم بتحميل الصورة، وأضف عنوانًا وتعليقًا، ثم قم بتصميم العتامة والمرشحات والنص. بالنسبة للعناصر واجهة المستخدم ذات الصلة، راجع أداة صندوق المعلومات و ال القطعة Flipbox، تصفح بالكامل عناصر واجهة المستخدم والإضافات الرئيسية، والتحقق من صفحة التسعير لما تتضمنه كل خطة.
