لقد رأيت تلميحات الأدوات في كل مكان. قم بالتمرير فوق أيقونة شريط الأدوات في محرر مستندات Google وسيخبرك ملصق صغير بما يفعله هذا الزر. هذا تلميح أداة. في WordPress، تتيح لك تلميحات الأدوات إضافة تلميحات قصيرة تظهر عندما يقوم شخص ما بالتمرير فوق (أو النقر) على عنصر ما في صفحتك. لا توجد عقارات إضافية للصفحة، ولا يوجد تخطيط مزدحم.
تمنحك Master Addons for Elementor طريقتين لإضافة تلميحات الأدوات: عنصر تلميح الأداةأداة مستقلة تسقطها على الصفحة، و ملحق تلميح الأداة، الذي يقوم بإرفاق تلميح أداة بأي عنصر واجهة مستخدم أو قسم أو حاوية Elementor موجودة بالفعل. يغطي هذا الدليل كلا الطريقتين، ومتى يتم استخدام كل منهما، وكيفية تصميمهما.
جدول المحتويات
ما هي تلميحات الأدوات ولماذا تهم؟
تلميح الأداة عبارة عن رسالة قصيرة تظهر عندما يقوم الزائر بتمرير مؤشره فوق عنصر معين في صفحتك. في مواقع WordPress، تخدم تلميحات الأدوات بعض الأغراض العملية
- اشرح المصطلحات دون كسر التدفق. إذا كان المحتوى الخاص بك يستخدم المصطلحات، فإن تلميح الأداة يتيح للقراء الحصول على تعريف سريع عند التمرير دون مقاطعة الفقرة.
- إضافة سياق للصور والأيقونات. عندما تعرض أيقونات المنتج أو صور أعضاء الفريق أو أيقونات الميزات، يوفر تلميح الأداة تفاصيل إضافية دون شغل مساحة مرئية.
- حافظ على نظافة الصفحات. بدلاً من حشر كل جزء من المعلومات في التخطيط المرئي، تقوم تلميحات الأدوات بإخفاء التفاصيل الثانوية حتى يريدها القارئ بالفعل.
- تحسين المشاركة. تشجع العناصر التفاعلية مثل تلميحات الأدوات الزائرين على استكشاف المحتوى الخاص بك. تميل الصفحات التي تدعو إلى التفاعل إلى جذب الانتباه لفترة أطول.
ما سوف تحتاج
- WordPress مثبت على موقعك
- الإضافات الرئيسية للعنصر تم التثبيت والتنشيط. يغطي الإصدار المجاني عنصر تلميح الأداة؛ يحتاج ملحق تلميح الأداة ماستر أدونز برو.
- منشئ صفحات Elementor (مجاني أو احترافي)
Master Addons هو مكون إضافي لـ WordPress 80+ الحاجيات والإضافات بالنسبة إلى Elementor، بما في ذلك ميزات تلميح الأدوات المغطاة هنا.
عنصر تلميح الأداة مقابل ملحق تلميح الأداة: أيهما يجب عليك استخدامه؟
إنهم يحلون مشاكل مختلفة. اختيار الحق يوفر الوقت.
| ميزة | عنصر تلميح الأداة | ملحق تلميح الأداة |
|---|---|---|
| ما هو عليه | عنصر واجهة مستخدم مستقل | ملحق يعمل على أي عنصر واجهة مستخدم |
| يعمل على | النص والصور والأيقونات (داخل عنصر واجهة المستخدم تلميح الأداة) | أي حاوية أو قسم أو عنصر عنصر |
| الأفضل ل | إنشاء كتل محتوى تلميحات الأدوات المخصصة | إضافة تلميحات الأدوات إلى عناصر الصفحة الموجودة |
| كيفية الوصول | اسحب وأسقط من لوحة عناصر واجهة المستخدم Elementor | تمكين من علامة التبويب "متقدم" لأي عنصر واجهة مستخدم |
| أنواع المحتوى | تلميح أداة النص، تلميح أداة الصورة، تلميح أداة الأيقونة | تلميح أداة قائم على النص على أي عنصر |
| حالة الاستخدام | تريد إنشاء قسم مصمم خصيصًا حول تلميحات الأدوات | تريد إضافة تلميح أداة سريع إلى زر أو عنوان أو صورة أو أي عنصر واجهة مستخدم موجود بالفعل في صفحتك |
النسخة القصيرة:
- هل تحتاج إلى إضافة تلميح أداة إلى عنوان أو زر أو أي عنصر واجهة مستخدم موجود بالفعل على صفحتك؟ استخدم ملحق تلميح الأداة.
- هل تحتاج إلى كتلة محتوى مخصصة حيث يقوم المستخدمون بالتمرير فوق نصوص أو صور أو أيقونات محددة لرؤية محتوى تلميح الأداة؟ استخدم عنصر تلميح الأداة.
يمكنك استخدام كليهما في نفس الصفحة. لا تتعارض مع بعضها البعض.
الطريقة الأولى: كيفية إضافة تلميح الأداة في Elementor باستخدام عنصر تلميح الأداة
ال عنصر تلميح الأداة هي أداة مستقلة. تقوم بسحبه إلى صفحتك ويقوم المستخدمون بالتمرير فوق نص أو صورة أو رمز للكشف عن رسالة تلميح الأداة.
استخدم هذا عندما تريد إنشاء تلميحات أدوات الصور أو تلميحات الأدوات النصية أو تلميحات أدوات الأيقونات كقسم مخصص في صفحتك.
الخطوة 1: افتح صفحتك في Elementor
من لوحة تحكم WordPress، انتقل إلى الصفحة التي تريد تحريرها وانقر عليها تحرير باستخدام العنصر.
الخطوة 2: البحث عن عنصر واجهة المستخدم Tooltip
في لوحة عناصر واجهة المستخدم Elementor على الجانب الأيسر، اكتب “Tooltip” في شريط البحث. ال نصيحة أدوات ماجستير تظهر الأداة ضمن قسم الإضافات الرئيسية. اسحبه إلى صفحتك حيث تريد ظهور تلميح الأداة.
الخطوة 3: اختر نوع المحتوى الخاص بك
انقر فوق الأداة لفتح إعداداتها. تحت محتوى علامة التبويب، نوع المحتوى الخيار يمنحك ثلاثة خيارات:
- نص. يقوم الزوار بالتمرير فوق النص الخاص بك لرؤية رسالة تلميح الأداة.
- صورة. يقوم الزوار بالتمرير فوق الصورة لرؤية تلميح الأداة.
- أيقونة. يحوم الزوار فوق أيقونة للكشف عن معلومات إضافية.
اختر نوع المحتوى الذي يناسب حالة الاستخدام الخاصة بك.
الخطوة 4: قم بإعداد محتوى تلميح الأداة
بعد اختيار نوع المحتوى الخاص بك، قم بتكوين كلا الجزأين
محتوى الزناد (ما يراه الزوار على الصفحة):
- بالنسبة للنص: أدخل الكلمة أو العبارة التي سيحوم عليها الزائرون
- للصورة: قم بتحميل صورة من مكتبة وسائط WordPress الخاصة بك
- للأيقونة: اختر أيقونة من مكتبة الأيقونات
محتوى تلميح الأداة (ما يظهر على التحويم):
- اذهب إلى إعدادات تلميحات الأدوات قسم
- أدخل نص تلميح الأداة الخاص بك في المحرر المدمج
- يمكنك تنسيق النص بالخط العريض والمائل والروابط والمزيد
الخطوة 5: تكوين اتجاه تلميح الأداة وسرعته
في إعدادات تلميح الأداة، قم بتعيين كيفية ظهور تلميح الأداة:
- اتجاه تلميح الأداة. اختر المكان الذي يظهر فيه تلميح الأداة بالنسبة للمشغل: أعلى أو أسفل أو يسار أو يمين.
- سرعة تلميح الأداة. اضبط سرعة الرسوم المتحركة بالمللي ثانية. القيم المنخفضة تجعلها تبدو أسرع.
نصيحة: حافظ على سرعة تلميح الأداة بين 300-500 مللي ثانية. سريع جدًا، يبدو مفاجئًا، بطيء جدًا، يشعر بعدم الاستجابة.
الخطوة 6: قم بتصميم تلميح الأداة الخاص بك
التبديل إلى أسلوب علامة التبويب لتخصيص مظهر أداة تلميح أداة Elementor الخاصة بك:
- المحتوى أقصى عرض. يتحكم في مدى اتساع صندوق تلميحات الأدوات.
- لون الخلفية. اضبط خلفية تلميح الأداة.
- لون النص. قم بتغيير لون خط تلميح الأداة.
- الطباعة. اضبط عائلة الخطوط وحجمها ووزنها وتباعدها.
- صندوق الظل. أضف عمقًا بتأثير الظل.
- حدود. أضف حدودًا وقم بتعيين نصف قطر الحدود للزوايا المستديرة.
- الحشو. تحكم في المسافة بين حواف النص وتلميح الأداة.
يمكنك تعيين أنماط مختلفة ل عادي و تحوم الدول لإضافة ردود الفعل البصرية.
تحت الأنماط العامة، أنماط تلميحات الأدوات يمنحك القسم التحكم في الفقاعة نفسها. اضبط عرض تلميح الأداة بالبكسل، واختر ألوان الخلفية والنص، واضبط الطباعة، وقم بتكوين الحشو على الجوانب الأربعة، واختر نوع الحد، وقم بتعيين نصف قطر الحد للزوايا المستديرة، وتحكم في المسافة بين المشغل والفقاعة، وقم بمحاذاة النص داخل تلميح الأداة، وأضف ظل مربع للعمق.
للحصول على إرشادات كاملة لكل إعداد، تحقق من وثائق عنصر تلميح الأدوات أو شاهد فيديو تعليمي.
الطريقة الثانية: كيفية إضافة تلميح أداة إلى أي عنصر واجهة مستخدم Elementor باستخدام ملحق تلميح الأداة
ال ملحق تلميح الأداة يعمل بشكل مختلف عن العنصر. بدلاً من أن تكون أداة مستقلة، فإنها تضيف أ تلميح الأدوات قسم إلى علامة التبويب "متقدم" لكل عنصر Elementor. حدد أي عنصر واجهة مستخدم أو حاوية أو عمود أو قسم موجود بالفعل في صفحتك، واقلب المفتاح، واكتب النص الخاص بك، ويرى الزائرون فقاعة صغيرة عندما يحومون فوق هذا العنصر. يحمل كل عنصر تلميح الأداة الخاص به، بحيث يمكن لثلاث بطاقات متتالية أن تشرح كل منها نفسها بنص مختلف.
ينقسم الامتداد إلى علامتي تبويب فرعيتين: إعدادات للسلوك (النص، الموضع، الرسوم المتحركة، الزناد، التوقيت) و أسلوب للمظهر (الألوان، العرض، الحشو، الطباعة).
الخطوة 1: تمكين ملحق تلميح الأداة
من لوحة تحكم WordPress الخاصة بك، انتقل إلى الإضافات الرئيسية وافتح ملحقات علامة التبويب. تلميحات الأدوات موجودة في الحاجيات الديناميكية مجموعة. انقر فوق التبديل الخاص به حتى يتحول إلى اللون الأرجواني، ثم اضغط حفظ التغييرات في الأعلى وانتظر إعدادات “ الخضراء المحفوظة بنجاح إشعار”.
الخطوة 2: افتح صفحتك في Elementor
انتقل إلى الصفحة التي تريد تحريرها وانقر عليها تحرير باستخدام العنصر.
الخطوة 3: حدد أي عنصر
انقر على أي عنصر موجود تريد إضافة تلميح أداة فيه. يعمل هذا مع العناوين والأزرار والصور والأيقونات وجداول التسعير والحاويات والأعمدة والأقسام وأي عنصر واجهة مستخدم Elementor أو عنصر Master Addons. يظهر قسم تلميح الأداة في علامة التبويب "متقدم" لكل عنصر.
الخطوة 4: انتقل إلى علامة التبويب "متقدم" وقم بتمكين تلميح الأداة
مع تحديد العنصر الخاص بك، انقر فوق متقدم علامة التبويب في لوحة الإعدادات. قم بالتمرير لأسفل حتى تجد تلميح الأدوات القسم الذي يحمل شارة MA الأرجوانية. قم بتوسيعها وقلبها تلميح الأدوات التبديل إلى نعم. يتم فتح علامة التبويب الفرعية للإعدادات أولاً.
الخطوة 5: تكوين إعدادات تلميح الأداة
تمنحك علامة التبويب الفرعية للإعدادات التحكم في كيفية تصرف تلميح الأداة
- محتوى: نص تلميح الأداة. اكتبه أو اسحبه من علامة ديناميكية. إذا كان موقعك يحتوي على Elementor AI قيد التشغيل، فسيظهر هنا أيضًا رابط الكتابة باستخدام AI الخاص بـ Elementor.
- التنسيب: أي جانب من العنصر تفضله الفقاعة: العلوي (الافتراضي)، السفلي، الأيسر، أو الأيمن.
- اتبع المؤشر: يجعل تلميح الأداة يتتبع الماوس بدلاً من الجلوس ساكنًا. مفيد للخرائط والرسوم البيانية والرسوم البيانية حيث تحتاج كل منطقة أسفل المؤشر إلى تسمية خاصة بها.
- الرسوم المتحركة: كيف تدخل الفقاعة. سبعة خيارات: لا شيء، التلاشي، التحول في الاتجاه، التحول نحو، الحجم، المنظور، وتأثير التعبئة.
- الزناد: ما الذي يفتح تلميح الأداة. قم بالتمرير افتراضيًا، أو انقر للحصول على تلميحات مستمرة صديقة للشاشة التي تعمل باللمس.
- المدة والتأخير: سرعة الرسوم المتحركة بالمللي ثانية ومدة بقاء الفقاعة قبل إغلاقها.
- إزاحة X وY: ادفع الفقاعة بعيدًا عن مكانها الافتراضي بعدد محدد من وحدات البكسل.
- نوع السهم والسهم: أضف فقاعة توصيل المؤشر الصغير إلى العنصر، مع خيارات نمط حادة أو مستديرة.
الخطوة 6: قم بتصميم تلميح الأداة
التبديل إلى أسلوب علامة تبويب فرعية لجعل الفقاعة تتطابق مع تصميمك بدلاً من أن تبدو وكأنها متصفح افتراضي.
- العرض الأقصى: يحدد مدى اتساع الفقاعة بحيث يلتف النص لفترة طويلة بدلاً من التمدد عبر الشاشة.
- النص والخلفية ولون السهم: التحكم الكامل في الألوان، بما في ذلك المؤشر.
- الحشو ونوع الحدود ونصف قطر الحدود: شكل الفقاعة.
- محاذاة النص وظل الصندوق والطباعة: أنهي المظهر بالخط والعمق الخاصين بك.
الخطوة 7: التحقق من النتيجة
حفظ وعرض الصفحة. قم بالتمرير فوق العنصر ويتلاشى تلميح الأداة مع النص الذي كتبته، باستخدام الرسوم المتحركة والألوان والعرض الذي قمت بتعيينه. حرك المؤشر بعيدًا وأغلق بعد التأخير. كرر العناصر الأخرى في الصفحة.
للحصول على تفاصيل التكوين الكاملة، راجع وثائق ملحق تلميح الأدوات أو شاهد فيديو تعليمي.
حالات الاستخدام العملي لكل طريقة
متى يتم استخدام عنصر تلميح الأدوات
عنصر تلميح الأدوات عبارة عن كتلة محتوى مخصصة. استخدمه عندما تكون تلميحات الأدوات هي النقطة الرئيسية في القسم
- صفحات عرض الميزات. عرض ميزات المنتج كأيقونات أو صور مع أوصاف تلميحات الأدوات.
- أقسام المسرد. قم بإنشاء مسرد مضمن حيث يقوم القراء بالتمرير فوق المصطلحات لرؤية التعريفات.
- عناصر المحفظة. أضف تلميحات أدوات الصور إلى الصور المصغرة للمحفظة التي تعرض تفاصيل المشروع.
- صفحات الفريق. ضع أيقونات أو صورًا تحتوي على تفاصيل تلميحات الأدوات حول أدوار الفريق.
- المحتوى التعليمي. اسمح للطلاب بالتمرير فوق الكلمات الرئيسية لرؤية التوضيحات دون مغادرة الصفحة.
متى يتم استخدام ملحق تلميح الأدوات
يضيف ملحق تلميح الأدوات سياقًا إلى العناصر الموجودة بالفعل على صفحتك
- بطاقات الميزة. جملة من التفاصيل الإضافية دون إطالة البطاقة.
- جداول التسعير. اشرح ما يغطيه دعم أولوية “” فعليًا، حيث يتساءل الناس. انظر لدينا القطعة جدول التسعير للمزيد.
- الأزرار والأيقونات. عناصر تحكم في أيقونة التسمية فقط حتى لا يخمن أحد.
- أعضاء الفريق. حقيقة ممتعة أو ملاحظة دور عند التمرير فوق كل صورة.
- المصطلحات الفنية. تعريفات قصيرة للمصطلحات، أرخص من صفحة المسرد.
الجمع بين الطريقتين
يمكنك استخدام كليهما في نفس الصفحة. على سبيل المثال، استخدم عنصر تلميح الأداة لإنشاء قسم مقارنة الميزات حيث يقوم الزوار بالتمرير فوق الرموز للتعرف على كل ميزة، ثم استخدم ملحق تلميح الأداة الموجود على زر CTA الخاص بك في الأسفل لإضافة نسخة تجريبية مجانية مدتها 14 يومًا من “Free، ولا يلزم وجود بطاقة ائتمان تلميح أداة”.
لا يوجد تعارض بين الاثنين. إنها تخدم أغراضًا مختلفة ويمكن أن تتعايش في أي صفحة.
أفضل ممارسات تلميح الأدوات لـ WordPress
- احتفظ بنص تلميح الأداة قصيرًا. تهدف لجملتين. إذا كنت بحاجة إلى أكثر من ذلك، فمن المحتمل أن تنتمي المعلومات إلى الصفحة نفسها، وليست مخفية في تلميح الأدوات.
- استخدم تحديد المواقع بشكل متسق. اختر اتجاهًا واحدًا (الأعلى أو الأسفل يعمل بشكل أفضل في معظم الحالات) والتزم به عبر موقعك. يبدو خلط المواضع عشوائيًا.
- لا تبالغ في استخدام تلميحات الأدوات. إذا كان كل عنصر في صفحتك يحتوي على تلميح أداة، فلن يكلف الزائرون أنفسهم عناء التمرير فوق أي منها. استخدمها حيث تضيف قيمة حقيقية.
- تأكد من أن تلميحات الأدوات تعمل على الهاتف المحمول. التمرير غير موجود على شاشات اللمس. يدعم كل من عنصر تلميح الأدوات وملحق تلميح الأدوات مشغل النقر، والذي يعمل بشكل أفضل لمستخدمي الهاتف المحمول. اختبر تلميحات الأدوات الخاصة بك على الهاتف قبل النشر.
- مطابقة تصميم موقعك. قم بتخصيص ألوان تلميحات الأدوات والخطوط والحدود لتتناسب مع السمة الحالية لديك. يمكن أن يبدو تصميم تلميحات الأدوات الافتراضي في غير مكانه على موقع مصقول.
عنصر تلميح الأداة مقابل ملحق تلميح الأداة: مقارنة سريعة
| ميزة | عنصر تلميح الأداة | ملحق تلميح الأداة |
|---|---|---|
| يثبت | اسحب وأسقط عنصر واجهة مستخدم جديدًا | تمكين في علامة التبويب "خيارات متقدمة" لأي عنصر واجهة مستخدم موجود |
| محتوى الزناد | النص والصور والأيقونات (مدمجة في الأداة) | أي عنصر عنصر: العناوين والأزرار والصور والأقسام والحاويات |
| الأفضل ل | كتل محتوى تلميحات الأدوات المخصصة | إضافة تلميحات الأدوات إلى التصاميم الموجودة |
| يخطط | حر | برو |
| الرسوم المتحركة | 7 خيارات: لا شيء، التلاشي، التحول في الاتجاه، التحول نحو، الحجم، المنظور، تأثير التعبئة | نفس 7 خيارات |
| اتبع المؤشر | نعم | نعم |
| تخصيص | التحكم الكامل في التصميم | التحكم الكامل في التصميم (علامة التبويب الفرعية للنمط) |
| تلميحات أدوات متعددة لكل صفحة | نعم | نعم (كل عنصر يحمل عنصره الخاص) |
| منحنى التعلم | الحد الأدنى | الحد الأدنى |
يأتي عنصر تلميح الأدوات مع الإصدار المجاني الإضافات الرئيسية للعنصر البرنامج المساعد. يعد ملحق تلميح الأدوات جزءًا من ماستر أدونز برو.
الأسئلة المتداولة
كيف يمكنني إضافة تلميح أداة في WordPress بدون مكون إضافي؟
يمكنك إضافة تلميحات الأدوات الأساسية باستخدام HTML عن طريق إضافة أ title تنسب إلى أي عنصر (على سبيل المثال، <span title="Your tooltip text">Hover here</span>). لكن هذه الطريقة لا توفر أي تحكم في التصميم وتبدو مختلفة عبر المتصفحات. بالنسبة لتلميحات الأدوات المخصصة والمصممة في WordPress، يمنحك مكون إضافي مثل Master Addons التحكم الكامل في التصميم والرسوم المتحركة وتحديد المواقع.
هل يمكنني إضافة تلميح أداة إلى صورة في Elementor؟
نعم. تقدم الإضافات الرئيسية طريقتين. استخدم عنصر Tooltip وحدد “Image” كنوع المحتوى لإنشاء تلميح أداة صورة مخصص. أو استخدم ملحق Tooltip على أي عنصر واجهة مستخدم Elementor Image لإضافة تلميح أداة إلى صورة موجودة على صفحتك.
هل تعمل تلميحات الأدوات على الأجهزة المحمولة؟
لا تعمل تلميحات الأدوات القياسية المستندة إلى التمرير على شاشات اللمس نظرًا لعدم وجود مؤشر للتحريك. يحتوي كل من عنصر تلميح الأدوات في Master Addons وملحق تلميح الأدوات على مشغل نقرة، لذلك يتم فتح تلميح الأدوات عندما ينقر شخص ما على العنصر على الهاتف.
ما الفرق بين تلميح الأداة والنوافذ المنبثقة؟
تلميح الأداة عبارة عن تلميح صغير يعتمد على النص ويظهر عند التمرير ويختفي عند تحريك المؤشر بعيدًا. عادةً ما يكون المنبثق أكبر حجمًا، ويمكن أن يحتوي على محتوى غني مثل الصور أو الأزرار أو النماذج، وغالبًا ما يتطلب نقرة لفتحه وإغلاقه. يمكن أن يتضمن عنصر تلميحات الأدوات الرئيسية نصًا منسقًا، مما يجعله مرنًا لكل من تلميحات الأدوات البسيطة ومحتوى التمرير الأكثر ثراءً.
هل تلميحات الأدوات جيدة لتحسين محركات البحث؟
يتم عرض محتوى تلميح الأدوات بتنسيق HTML، بحيث يمكن لمحركات البحث الزحف إلى النص الموجود بداخلها. ومع ذلك، نظرًا لأن محتوى تلميح الأدوات مخفي افتراضيًا ولا يمكن رؤيته إلا عند التمرير، فقد تمنحه محركات البحث وزنًا أقل. لا تقم بإخفاء المحتوى المهم في تلميحات الأدوات. استخدامها للحصول على معلومات تكميلية تضيف قيمة إلى تجربة المستخدم.
هل يمكنني استخدام كل من Tooltip Element وTooltip Extension في نفس الصفحة؟
نعم. أنها تعمل بشكل مستقل ولا تتعارض مع بعضها البعض. استخدم عنصر تلميح الأدوات لكتل محتوى تلميح الأدوات المخصصة وامتداد تلميح الأدوات لإضافة تلميحات أدوات سريعة إلى أي عنصر واجهة مستخدم Elementor موجود في نفس الصفحة.
ابدأ بإضافة تلميحات الأدوات إلى موقع WordPress الخاص بك
مع الإضافات الرئيسية، يمكنك الحصول على خيارين: عنصر تلميح الأداة لإنشاء محتوى تلميح أداة مخصص باستخدام مشغلات النص والصورة والأيقونات، و ملحق تلميح الأداة لإضافة تلميحات الأدوات إلى أي عنصر Elementor موجود في صفحتك.
يعمل عنصر Tooltip مع البرنامج الإضافي المجاني، ويحتاج ملحق Tooltip إلى Pro. إذا كنت تريد تثبيت تلميحات الأدوات على نقاط محددة في الصورة، فانظر إلى أداة نقطة اتصال الصورة (برو).
