كيفية إضافة تلميح في موقع Elementor

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

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

عندما تفتح الإنترنت ، قد ترى أي صورة أو رمز أو عنوان ؛ إذا قمت بتمرير مؤشر الماوس فوق هذه الحقول ، فسترى تسمية نصية تمثل تلميح أداة.

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

في هذه المقالة ، سنوجهك من خلال إضافة تلميح أداة وتخصيص مظهره باستخدام Elementor و PowerPack Addons.

لذلك دون مزيد من اللغط ، دعنا نمضي قدمًا.

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

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

دعونا نحاول فهم التلميح من خلال اسمه نفسه.

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

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

كما ترى ، يعرض التطبيق الموجود في " قائمة ابدأ في Windows " مربع نص صغير يشير إلى معلومات حول هذا التطبيق. الآن ، هذا هو شكل التلميح الذي يمكنك أن تجده في أي مكان على نظامك أو موقع ويب.

لذلك إذا كنت تريد عرض تلميحات الأدوات هذه في جميع أنحاء موقع الويب الخاص بك ، فأنت بحاجة إلى إضافتها.

كيف تعمل تلميحات الأدوات على تحسين تجربة المستخدم على مواقع الويب الخاصة بك

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

يمكن إضافة تلميحات الأدوات إلى مثل هذه المناطق على موقع الويب الخاص بك مثل:

• العناصر القابلة للنقر مثل الصور والرموز وما إلى ذلك.
• تحوم العناوين على النصوص أو الروابط القابلة للنقر.
• نقطة ساخنة للصورة.
• منتجات التجارة الإلكترونية (إذا كنت تدير موقع ويب WooCommerce.)

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

نعم ، سيجد المستهلكون ذلك مناسبًا ، وذلك لأن تلميحات الأدوات هذه تساعد المستخدمين من خلال تقديم مؤشرات للنصوص ذات الصلة أينما وُضعت على موقع الويب الخاص بك ، وسيؤدي ذلك إلى تحسين تجربة المستخدم الخاصة بهم.

كيفية إضافة تلميحات الأدوات في Elementor باستخدام PowerPack؟

بمساعدة تلميح الأداة ، يمكنك عرض رسالة مهمة عبر النص لمستخدميك لتجربة مستخدم أفضل.

لإضافة تلميح إلى موقع الويب الخاص بك ، تحتاج إلى تثبيت وتفعيل إضافات Elementor و PowerPack.

يحتوي PowerPack Addons for Elementor على أكثر من 80 أداة سهلة الاستخدام ومبتكرة ، وأكثر من 300 قالب مصمم مسبقًا ، وإضافات مفيدة لتحسين المظهر العام لموقع الويب الخاص بك. أحد هذه الإضافات هو تلميح الأدوات الذي يمكنك استخدامه لعرض نصوص تلميحات الأدوات على موقع الويب الخاص بك.

لذلك دعونا نرى كيف يمكنك إضافة تلميح أداة إلى موقع الويب الخاص بك باستخدام Elementor و PowerPack.

قم بتمكين ملحق Tooltip

لإضافة تلميح أداة إلى موقع الويب الخاص بك ، قم أولاً بتمكين ملحق تلميح الأداة.

بعد ذلك ، انتقل إلى لوحة معلومات WordPress الخاصة بك ، وانتقل إلى Elementor ، وانقر فوق PowerPack.

بعد ذلك ، انتقل إلى قسم الإضافات وقم بتمكين ميزة تلميحات الأدوات .

بمجرد الانتهاء ، اضغط على زر حفظ التغييرات .

قم بتمكين ميزة تلميح الأدوات في Elementor

لإضافة تلميح أداة إلى أي عنصر واجهة مستخدم / قسم محدد على موقع Elementor على الويب ، افتح صفحتك في محرر Elementor. حدد العنصر الذي تريد عرض تلميح الأداة فيه ، ثم انتقل إلى علامة التبويب خيارات متقدمة> PowerPack ؛ الآن قم بتمكين ميزة " تلميح الأدوات " .

أخيرًا ، تم تمكين ميزة تلميح الأداة بنجاح ليتم عرضها على صفحة موقع الويب الخاص بك.

تخصيص ميزة تلميح الأدوات

الآن بعد أن قمت بتمكين ميزة تلميح الأدوات ، فلنلقِ نظرة على ميزاتها التي يمكنك تخصيصها لعرض نص تلميح أداة جذاب.

بمجرد تمكين ميزة تلميح الأدوات ، ستظهر جميع خيارات التخصيص التي يمكنك استخدامها لتحسين مظهرها العام.

دعونا نرى ما هي جميع إعدادات تلميح الأدوات التي ستحصل عليها من خلال هذه الميزة:

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

الآن بعد أن قمت بتخصيص جميع إعدادات تلميح الأدوات ، دعنا ننتقل إلى الخطوة التالية.

دعنا نرى جميع خيارات التصميم المتاحة لميزة تلميح الأداة:

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

بعد تخصيص كل هذه الميزات ، سيبدو التلميح الذي أنشأناه للتو على هذا النحو.

تغليف!

لذلك كما ناقشنا ، العملية برمتها لإضافة تلميح أداة في موقع ويب Elementor باستخدام PowerPack Addons. ومع ذلك ، يمكن القيام بذلك أيضًا عن طريق الترميز ؛ إذا كنت مبرمجًا محترفًا.

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

إذا كنت تقوم بتصميم صفحة Elementor وتبحث عن طرق لإضافة خطوط مخصصة ، فسوف ترشدك مقالة How To Add Custom Fonts To Elementor Websites.

إذا واجهت أي مشاكل ، فلا تتردد في ترك استفساراتك في قسم التعليقات.

انضم إلينا على Twitter و Facebook و YouTube.