نص العنصر فوق الصورة: 25+ تأثيرات التمرير (برنامج تعليمي مجاني لعنصر واجهة المستخدم)

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

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

ما يغطيه هذا الدليل:

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

لماذا يحتاج النص فوق الصورة إلى عنصر واجهة مستخدم (وليس اختراق CSS)

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

أداة مخصصة تحل كل ذلك في مكان واحد

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

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

لمحة سريعة عن أداة تأثيرات تحوم الصورة

تأثيرات تحوم الصورة يتم الشحن في الإصدار المجاني من Master Addons، أ مكتبة تضم 80+ من الأدوات والإضافات يعمل على 30،000+ موقع WordPress نشط. إليك ما تحصل عليه في هذه الأداة الواحدة

• 30 تأثيرًا للتحليق، كل منها عبارة عن رسوم متحركة مختلفة للكشف. ثمانية منها مجانية (ليلي، سادي، روكسي، بوبا، روميو، ليلى، هوني وأوسكار)، بينما يحتاج شيكو ومارلي وروبي والـ 19 الآخرون إلى Pro
• حقل عنوان به علامة HTML قابلة للتحديد (H1 إلى H6)، بحيث يظل نص التراكب الخاص بك صحيحًا لتحسين محركات البحث
• حقل وصف لخط دعم قصير
• تراكب لون الخلفية، وعتامة الصورة، وعناصر التحكم في عتامة التمرير
• نصف قطر الحدود، والحشو (Pro)، وظل الصندوق، والطباعة المنفصلة للعنوان والوصف
• ثلاثة سلوكيات نقر: لا شيء، أو اتبع رابطًا، أو افتح نافذة منبثقة (يحتاج المحتوى المنبثق إلى Pro)

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

كيفية إضافة نص فوق صورة في Elementor (خطوة بخطوة)

الخطوة 1: تثبيت الإضافات الرئيسية

في لوحة تحكم WordPress الخاصة بك، انتقل إلى المكونات الإضافية > إضافة جديد وابحث عن إضافات “Master”. تثبيت وتنشيط مكون إضافي مجاني من WordPress.org. إذا كان هناك أي شيء يعرقلك، فإن دليل التثبيت يمشي من خلاله. أنت بحاجة إلى Elementor نشط أيضًا، لكن الإصدار المجاني كافٍ.

الخطوة 2: اسحب أداة تأثيرات تحويم الصورة إلى صفحتك

افتح أي صفحة باستخدام Elementor وابحث عن “Image Hover Effects” في لوحة عناصر واجهة المستخدم. سوف تكتشفه من بين عناصر واجهة المستخدم الأخرى التي تحمل شارة MA مثل Advanced Image وImage Hotspot وImage Comparison. اسحبه إلى القسم الخاص بك.

الخطوة 3: قم بتحميل صورتك

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

• حجم الصورة يتحكم في الأبعاد المعروضة. يعمل الافتراضي لمعظم التخطيطات.
• دقة الصورة يختار الحجم الذي يتم تحميله بواسطة WordPress. يعطي “Full” النتيجة الأكثر حدة. في الصفحة التي تحتوي على ثمانية أو عشرة من هذه المربعات، قم بالهبوط إلى “Large” بدلاً من ذلك؛ لا أحد يرى الفرق في حجم الشبكة ويتم تحميل الصفحة بشكل أسرع بشكل ملحوظ.

الخطوة 4: اختر تأثير التحويم

هنا هو الجزء الممتع. افتح تأثير التحويم dropdown وستحصل على القائمة الكاملة للتأثيرات المسماة: Lily، Sadie، Roxy، Bubba، Romeo، Layla، Honey، Oscar، Marley، Ruby، Milo، Dexter، Sarah، Zoe، Chico، Julia، Goliath، Hera، Winston، سيلينا، تيري، فيبي، أبولو، كيرا، ستيف، موسى، جاز، مينغ، ليكسي، وديوك. الثمانية الأولى مجانية، والباقي يحمل علامة Pro في البرنامج الإضافي المجاني.

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

تجميع سريع لحفظك من خلال النقر عليها جميعًا

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

الخطوة 5: أضف عنوانك

افتح ال عنوان قسم. اكتب عنوانك واختر علامة HTML. هذا مهم أكثر مما يبدو: إذا كانت الصورة موجودة في شبكة من الخدمات، فإن H3 عادةً ما يناسب التسلسل الهرمي لصفحتك بشكل أفضل من H2 الافتراضي. تقرأ محركات البحث هذه العلامة مثل أي عنوان آخر على الصفحة.

الخطوة 6: اكتب الوصف

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

تصميم التراكب: اللون والعتامة والشكل

التبديل إلى أسلوب علامة التبويب. ال صورة تتحكم اللوحة في شكل التراكب:

• لون الخلفية صبغ التراكب الذي يظهر عند التمرير. اختر لونًا من لوحة علامتك التجارية؛ قيمة HEXA مثل #DD5555 مع ألفا مخفض تحافظ على الصورة مرئية تحتها.
• عتامة الصورة يضبط حالة الراحة، و تحوم العتامة يضبط مقدار تعتيم الصورة عند ظهور التراكب. الفجوة بين الاثنين (على سبيل المثال 0.5 راحة، 0.7 عند التحليق) تجعل الكشف يبدو متعمدًا.
• مرشح الصورة و تمرير تصفية الصور أضف مرشحات CSS مثل التدرج الرمادي أو التمويه للحالات المزاجية قبل/بعد.

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

الطباعة للعنوان والوصف

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

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

انقر فوق الإجراءات: افتح نافذة منبثقة أو اربط الصورة بأكملها

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

يظهر فجأة (Pro) يفتح نافذة تراكب بأي محتوى تختاره. اختر نوع المحتوى واكتب المحتوى مباشرة في محرر WYSIWYG أو قم بتحميل قالب Elementor المحفوظ. تستخدم شبكات المحفظة هذا باستمرار: يفتح كل مربع دراسة حالة دون مغادرة الصفحة.

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

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

النتيجة النهائية

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

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

نصائح التصميم التي تجعل النص فوق الصورة قابلاً للقراءة

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

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

أدوات الإضافات الرئيسية الأخرى لتأثيرات الصورة

تعد Image Hover Effects الأداة المناسبة للكشف عن النص، ولكن بعض عناصر واجهة المستخدم الشقيقة تغطي حالات الاستخدام المجاورة

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

مجاني مقابل محترف: ما الذي تحتاجه بالفعل؟

للحصول على نص أساسي فوق قسم الصورة، يكفي البرنامج الإضافي المجاني. يتضمن الأداة وثمانية تأثيرات تحوم (Lily وSadie وRoxy وBubba وRomeo وLayla وHoney وOscar) وحقول العنوان والوصف ومرشحات الصور ونقرات الارتباط. يفتح Pro التأثيرات الـ 22 الأخرى والمحتوى المنبثق وعناصر التحكم في الحشو والزاوية المستديرة. ماستر أدونز برو يضيف مجموعة عناصر واجهة المستخدم المتميزة الأوسع، ومجموعات القوالب، والإضافات مثل Widget Builder، لذلك يستحق الأمر إلقاء نظرة بمجرد إنشاء مواقع كاملة بدلاً من قسم واحد. هناك ضمان استرداد الأموال لمدة 14 يومًا إذا جربته وغيرت رأيك.

تفضل المشاهدة؟ إليك إرشادات سريعة في Elementor:

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

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

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

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

القراءة ذات الصلة: تأثيرات الرسوم المتحركة العنصر, القطعة Elementor Flipbox، و إضافة النوافذ المنبثقة في Elementor مجانا.