تلميح الأدوات

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

يمر هذا الدليل عبر عنصر واجهة المستخدم من السحب الأول إلى تلميح الأدوات المصمم على الصفحة المباشرة.

ما تفعله أداة تلميح الأدوات #

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

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

قبل أن تبدأ #

• ووردبريس مع العنصر مثبتة ونشطة.
• الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
• تم تمكين عنصر واجهة المستخدم Tooltip في لوحة خيارات Master Addons، ضمن Basic Widgets.

كيفية إضافة عنصر واجهة المستخدم تلميح الأداة #

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

اختر نوع المحتوى: أيقونة أو نص أو صورة #

يفتح إعدادات المحتوى في علامة التبويب المحتوى. ال نوع المحتوى يقدم Switcher في الأعلى ثلاثة أهداف:

• أيقونة: اختر أي رمز من مكتبة Elementor. دائرة المعلومات الكلاسيكية هي الافتراضية.
• نص: اكتب كلمة أو عبارة، مثل “Hover Me!”، ويتم إرفاق تلميح الأداة بها.
• صورة: اختر صورة من مكتبة الوسائط، وهي مفيدة للصور الرمزية والصور المصغرة للمنتج.

ينطبق عنصران تحكم على كل نوع. محاذاة يضع الهدف يسارًا أو وسطًا أو يمينًا. علامة HTML يغلف الهدف في العلامات التي تختارها: من H1 إلى H6، أو div، أو span، أو p، أو زر، أو a. التزم بـ p أو span للحصول على تلميحات أدوات عادية؛ استخدم الزر عندما يكون الهدف بمثابة عنصر تحكم لإمكانية الوصول.

مع نص تم تحديد حقل المحتوى ليحل محل منتقي الأيقونات

مع صورة تم تحديده، ويتم فتح مكتبة الوسائط وتصبح الصورة المختارة هي هدف التمرير

اكتب تلميح الأداة وحدد سلوكه #

ال خيارات تلميح الأدوات يتحكم القسم في الفقاعة نفسها.

• نص تلميح الأداة: الرسالة داخل الفقاعة. احتفظ بها في سطر أو سطرين؛ تلميحات الأدوات مخصصة للتلميحات، وليس للفقرات.
• اتبع المؤشر: دع الفقاعة تتعقب الماوس بدلاً من البقاء مثبتًا على الهدف.
• التنسيب: حيث تقع الفقاعة بالنسبة للهدف. الجزء العلوي هو الإعداد الافتراضي، مع توفر Top Start وBottom والحواف الأخرى.
• الرسوم المتحركة: كيف تدخل الفقاعة، Shift-Away بشكل افتراضي.
• تشغيل الزناد: يعرض التمرير الفقاعة على تمرير الماوس؛ انقر فوق "انتظار النقر"، والذي يعمل أيضًا بشكل أفضل على شاشات اللمس.
• المدة والتأخير: سرعة الرسوم المتحركة ومدة بقاء الفقاعة بعد مغادرة المؤشر، كلاهما 300 مللي ثانية بشكل افتراضي. تبدو الإعدادات الافتراضية مناسبة لمعظم الصفحات؛ قم بإبطائها فقط إذا كان تلميح الأداة يحمل شيئًا يحتاج الزائرون إلى إيقاع أطول لقراءته.

ال إزاحة X و إزاحة Y تقوم أشرطة التمرير بدفع الفقاعة بعيدًا عن مكانها الافتراضي. مفيد عندما يحتاج تلميح الأداة إلى مسح الحدود أو الجلوس بجانب هدف غريب الشكل.

نمط الهدف #

في ال أسلوب علامة التبويب، الأنماط العامة يغطي العنصر المستهدف في الصفحة.

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

قم بتصميم فقاعة تلميح الأدوات #

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

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

النتيجة على الصفحة #

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

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

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

نصائح للحصول على تلميحات أفضل للأدوات #

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

فيديو تعليمي #

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

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

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

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