تأثيرات تحوم الصورة

الصورة التي تكشف عن عنوان وتعليق على التحويم تحول المعرض المسطح إلى شيء يريد الناس لمسه. ال تأثيرات تحوم الصورة القطعة في الإضافات الرئيسية للعنصر يقوم بتغليف أي صورة في الرسوم المتحركة لتحريك CSS، بحيث يتم عرض العنوان والوصف وشريحة الارتباط أو التلاشي أو التكبير/التصغير عند هبوط المؤشر عليها.

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

ما تفعله أداة Image Hover Effects #

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

ثلاث علامات تبويب تشغيله. محتوى يحمل التأثير والصورة والنص المتراكب. أسلوب يتعامل مع عتامة الصورة والمرشحات والحدود وألوان العنوان والوصف. متقدم هو التباعد والرؤية المعتادة للعنصر.

قبل أن تبدأ #

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

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

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

اختر التأثير والصورة #

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

• تأثير التحويم: الرسوم المتحركة المسماة المستخدمة في التحويم (المزيد في هذا التالي).
• تحميل الصورة: اختر الصورة من مكتبة الوسائط.
• حجم الصورة ودقة الصورة: خدم المحصول والقرار.
• روابط أم نافذة منبثقة؟: اجعل الصورة بأكملها رابطًا أو افتحها في نافذة منبثقة.

اختر تأثير التحويم #

ال تأثير التحويم يحمل Dropdown قائمة طويلة من تأثيرات CSS المسماة. يقوم كل واحد بتحريك الصورة ونص التراكب بشكل مختلف، بدءًا من التلاشي الناعم وحتى التسمية التوضيحية التي تنزلق إلى الداخل.

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

حدد الصورة #

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

أضف العنوان #

افتح ال عنوان قسم العنوان الذي يظهر عند التمرير. اكتب النص وقم بتعيين علامة HTML بحيث تتم قراءتها بشكل صحيح لتحسين محركات البحث.

• عنوان: نص العنوان، مع خيار الكتابة باستخدام الذكاء الاصطناعي.
• علامة HTML: مستوى العنوان، H1 إلى H6.

أضف الوصف والرابط #

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

• نوع المحتوى: اختر نصًا أو زرًا لمحتوى التراكب.
• محتوى: تم تحرير نص التسمية التوضيحية في مربع WYSIWYG كامل.
• روابط أم نافذة منبثقة؟: قم بتوجيه الصورة إلى عنوان URL أو افتحها في نافذة منبثقة.

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

افتح ال أسلوب علامة التبويب. ال صورة يتحكم القسم في كيفية ظهور الصورة قبل وأثناء التحليق، ومن هنا يأتي الكثير من التأثير فعليًا.

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

تحت قسم الصور، منفصل عنوان و وصف تتعامل الأقسام مع لون وطباعة نص التراكب.

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

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

نصائح للعمل مع أداة Image Hover Effects #

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

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

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

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

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

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