أداة نقطة اتصال صورة العنصر مع تلميحات الأدوات (Pro)
Image Hotspot عبارة عن أداة Master Addons Pro تقوم بتثبيت العلامات أعلى الصورة. يمكن أن تكون العلامة نقطة عادية، أو تسمية نصية قصيرة، أو أيقونة Font Awesome أو صورة صغيرة، وتفتح كل واحدة تلميح أداة عندما يقوم الزائر بتمريرها، أو تنقر عليها بمجرد تشغيل Trigger on Click. إنها تناسب صور التسوق، ووسائل شرح المنتج، ومخططات الطوابق، وخرائط الحرم الجامعي، والرسوم البيانية ذات العلامات. إذا كان ما تريده هو تلميح التمرير على زر أو عنوان، فالمجاني القطعة تلميح الأداة أو ال ملحق تلميحات الأدوات (Pro) هو أقرب ملاءمة.
كيفية إضافة نقطة اتصال الصورة في Elementor
لإضافة نقطة اتصال للصورة في Elementor، قم بتنشيط Master Addons Pro، وقم بتحرير الصفحة باستخدام Elementor وابحث في لوحة عناصر واجهة المستخدم عن Image Hotspot. اسحبه للداخل، واختر صورتك ضمن الصورة، ثم افتح نقاط الاتصال وانقر فوق إضافة عنصر لكل علامة. قم بتعيين نوع كل علامة ومحتوى تلميح الأداة وموضعها، ثم انشر.
ابحث في اللوحة عن “hotspot” وستعود نتيجتان. MA ذو الشارة الواحدة هو عنصر واجهة المستخدم هذا. النقطة المقفلة بجانبها هي نقطة الاتصال الخاصة بـ Elementor، والتي تحتاج إلى ترخيص Elementor Pro، لذا يجدر التحقق من النقطة التي تمتلكها بالفعل قبل الإنشاء.
قم بإسقاط الأداة، واختر صورتك وقم بتعيينها دقة الصورة إلى كامل إذا كانت الصورة تحمل تفاصيل دقيقة. توجد علامات على الصورة المعروضة، لذا فإن المصدر المصغر يجعل كل دبوس يبدو تقريبيًا. يفتح النقاط الساخنةاضغط على إضافة عنصر، وكرر مرة واحدة لكل علامة. يحمل كل عنصر علامات التبويب الخاصة بالمحتوى والنمط والموضع.
شيئان يعثران الناس على البناء الأول. تهبط العلامات في الزاوية العلوية اليسرى حتى تلمس أشرطة تمرير الموضع، لذلك يتم تكديس ثلاثة عناصر جديدة في ما يشبه واحدًا. ومربع محتوى تلميح الأدوات عبارة عن محرر كامل، مما يجعل من المغري لصق فقرة فيه. هناك سبب لمقاومة ذلك، مغطى بالأسفل.
توجد أمثلة عملية تحتوي على صور المنتج والخرائط والرسوم البيانية كيفية إضافة نقاط اتصال الصورة في Elementor. يتم إدراج كل عنصر تحكم في دليل إعدادات عناصر واجهة المستخدم لنقطة اتصال الصورة.
أربعة أنواع من العلامات على صورة واحدة
ال يكتب يمنحك التحكم في علامة التبويب "المحتوى" الخاصة بالعلامة أربعة أشكال، ويمكنك مزج الأربعة داخل صورة واحدة.
لا أحد يترك نقطة ملونة عارية. إنه الخيار الأنظف للمخططات الكثيفة حيث تتصادم الملصقات مع بعضها البعض.
نص طباعة سلسلة قصيرة داخل العلامة. تعمل الأرقام بشكل جيد هنا، لأن الأرقام 01 و02 و03 عبر لقطة المنتج تُقرأ كجولة إرشادية بدون وسيلة إيضاح للكتابة. السلاسل الأطول تحول النقطة إلى حبة دواء، وهو المظهر الذي تريده لشيء مثل “Cologne No.5”.
أيقونة يأخذ أي رمز Font Awesome من المكتبة، حتى تتمكن الورقة من استبدال المكونات والنجمة للحصول على التقييم.
صورة يستبدل العلامة بصورة من مكتبة الوسائط الخاصة بك. الصور المصغرة للمنتج والصور الرمزية هي الأفضل للقراءة؛ أي شيء مشغول يتحول إلى هريسة بحجم العلامة.
تقبل كل علامة أيضًا أ وصلة. يتم تشغيل هذا الرابط عند فتح تلميحات الأدوات عند التمرير، أو عند نقاط التوقف حيث قمت بإيقاف تشغيل تلميحات الأدوات. لا يتم تشغيله أثناء تشغيل Trigger on Click، لأن النقرة قد تم التقاطها بالفعل.
ضع كل علامة حسب النسبة المئوية
ال موضع تحتوي علامة التبويب على شريطي تمرير، الموضع الأفقي والموضع الرأسي، وكلاهما يتم قياسهما بالنسبة المئوية للصورة. يؤدي الإعداد 50 و24 إلى وضع علامة على مسافة ربع الطريق في المنتصف. لا يوجد موضع للسحب على القماش، لذا عليك دفع الأرقام ومشاهدة المعاينة.
النسبة المئوية هي ما يبقي العلامات صادقة على الهاتف. تتدرج الصورة الأساسية مع الحاوية الخاصة بها وتحتفظ كل علامة بمكانتها النسبية، لذا فإن الملصق المثبت على غطاء الزجاجة لا يزال موجودًا على غطاء الزجاجة بعرض 390 بكسل، حيث كان من الممكن أن ينجرف إزاحة البكسل.
تحمل نفس علامة التبويب علامة لكل علامة أظهر ل، الذي يتجاوز جانب تلميح الأداة العام لتلك العلامة الواحدة. يساعد ذلك عندما توضع علامة بالقرب من الحافة اليمنى وسيخرج تلميح الأداة الخاص بها من الصورة: اضبط تلك على اليسار واترك الباقي في الأعلى.
علامات النبض بشكل افتراضي. ال تعطيل تأثير النبض يقوم المفتاح الموجود أسفل قسم النقاط الساخنة بإيقاف تشغيل الرسوم المتحركة لكل علامة مرة واحدة، وهو ما يحتاجه مخطط الأرضية الذي يحتوي على خمسة عشر دبوسًا عادةً.
موضع تلميح الأداة والرسوم المتحركة وسلوك الهاتف المحمول
ال تلميحات الأدوات يقوم القسم بتشغيل كل تلميح أداة في الأداة معًا: إظهار الموضع (أعلى أو أسفل أو يسار أو يمين)، الرسوم المتحركة (Shift-Away، Shift-Toward، Fade، Scale أو Perspective)، تبديل السهم، بالإضافة إلى الإزاحة والمسافة للدفع الدقيق.
تلميحات الأدوات مفتوحة عند التمرير. لا تحتوي الهواتف على تحوم، مما يترك خيارين صادقين. تشغيل الزناد عند النقر والنقرة تفتح تلميح الأداة. أو تعيين تعطيل إلى Mobile، أو Tablet & Mobile، الذي يخفي تلميحات الأدوات على تلك الشاشات ويسلم المهمة إلى رابط كل علامة.
أحد القيود للتخطيط حولها. محتوى تلميح الأداة عبارة عن مربع WYSIWYG، لكن الأداة تقوم بتجريد العلامات قبل أن تعرض، لذا بالخط العريض، تختفي الروابط والصور والرموز القصيرة ويظهر تلميح الأداة نصًا عاديًا. احتفظ بكل واحد في سطر قصير واحد. عندما تحتاج إلى محتوى تلميح أداة منسق، تتعامل أداة Hotspot الخاصة بـ Elementor Pro مع النص المنسق ولا تتعامل هذه الأداة.
تصميم تلميح الأداة نفسه هو المجموعة الكاملة: المحاذاة، والحشو، ونصف القطر، والخلفية، ولون النص، والحد، ولون السهم، والطباعة، وظل الصندوق. تحصل الصورة الأساسية على مرشحات العتامة والحدود ونصف القطر وظل الصندوق ومرشحات CSS.
علامات النمط للافتراضي والتحويم
يتم وضع تصميم العلامة في مكانين، وهو أبسط مما يبدو بمجرد معرفة الانقسام.
القطعة أسلوب تغطي علامة التبويب كل علامة في وقت واحد: حشو النص، ونصف قطر الحدود، والطباعة، ومجموعة انتقالية، ثم علامات التبويب الافتراضية والتحويم التي تحتوي على العتامة والحجم واللون ولون الخلفية ونوع الحدود وظل الصندوق. الحجم هو مضاعف مقياس من 0.5 إلى 2، لذا فإن ضبط التمرير إلى 1.15 يمنح العلامات رفعًا خفيفًا أسفل المؤشر دون تغيير أي شيء آخر في الصفحة.
تتجاوز علامة التبويب "النمط" الموجودة داخل علامة واحدة لون تلك العلامة وخلفيتها وعتامةها بشكل افتراضي وتحوم. هذه هي الطريقة التي تجعل علامة واحدة حمراء على جدار أرجواني، لوضع علامة على عنصر مباع بالكامل أو وضع علامة على نقطة الاتصال التي تريد ملاحظتها أولاً.
نصف قطر الحدود عند 100 يمنحك دوائر وحبوب. قم بإسقاطه إلى 6 وتصبح علامات النص علامات مربعة، والتي تُقرأ بشكل أفضل على الرسم المعماري من صف من الفقاعات.
نقطة اتصال Elementor Pro مقابل نقطة اتصال الصور للإضافات الرئيسية
يقوم Elementor Pro بشحن عنصر واجهة مستخدم Hotspot الخاص به. إذا كنت تدفع بالفعل مقابل Elementor Pro، فتحقق من ذلك أولاً، لأنك قد لا تحتاج إلى هذا على الإطلاق.
| ميزة | نقطة اتصال إليمينتر برو | نقطة اتصال صورة الإضافات الرئيسية |
|---|---|---|
| سعر | يحتاج العنصر برو | يحتاج إلى إضافات رئيسية برو |
| أنواع العلامات | نص التسمية وأيقونة بحجم مخصص | لا شيء، نص، أيقونة أو صورة |
| الرسوم المتحركة علامة | فوز ناعم، أو توسيع أو تراكب، مع رسوم متحركة متسلسلة | تشغيل أو إيقاف النبض |
| محتوى تلميح الأداة | نص غني بالتنسيق | نص عادي فقط |
| مشغل تلميحات الأدوات | تحوم أو انقر أو لا شيء | قم بالتمرير، أو انقر باستخدام المشغل عند النقر |
| الرسوم المتحركة تلميح الأدوات | أنماط التلاشي والانزلاق مع إعداد المدة | التحول على الطريق، التحول نحو، التلاشي، المقياس، المنظور، بالإضافة إلى السهم، الإزاحة والمسافة |
| متنقل | لكل مواضع الجهاز | تعطيل تلميحات الأدوات على الجهاز اللوحي والمحمول أو الهاتف المحمول |
يفوز Elementor Pro بنص تلميح الأدوات الغني والرسوم المتحركة للعلامة. Master Addons هو الاختيار إذا كنت تريد علامات الصور أو تستخدم بالفعل Master Addons Pro بدون Elementor Pro. ذات صلة: مجاني القطعة تلميح الأداة، ال ملحق تلميحات الأدوات (Pro), مقارنة الصور و تأثيرات تحوم الصورة.
حيث تكتسب نقطة اتصال الصورة مكانها
التصوير الفوتوغرافي ذو المظهر المتوفر هو التصوير الواضح. لقطة واحدة لأسلوب الحياة، وعلامة صورة لكل منتج، وتلميح أداة لتسمية كل عنصر، ورابط إلى صفحة المنتج الخاصة به. إنه يعمل بشكل أفضل من شبكة الصور المصغرة لأن الزائر يرى القطع مصممة معًا قبل أن يراها مسعرة.
المواصفات التي لا تحتوي على جدول مواصفات هي الاستخدام الأكثر هدوءًا. في أجسام الكاميرا والساعات والآلات، تقوم العلامات المرقمة بتوجيه القارئ حول الكائن بالترتيب الذي تختاره، ولا يتعين على أحد تعيين الصف 4 من الجدول مرة أخرى على الصورة.
ثم هناك مخططات الطوابق وخرائط الحرم الجامعي والرسوم البيانية الموسومة. النقاط ذات تأثير تعطيل النبض، وتلميحات الأدوات التي تم ضبطها على التشغيل عند النقر، ورابط على كل علامة تشير إلى الصفحة الكاملة. خمسة عشر دبوسًا تظل قابلة للقراءة بهذه الطريقة؛ خمسة عشر حبة نابضة لا تفعل ذلك.
الأسئلة المتداولة لنقطة اتصال الصورة
ماذا يحدث على الهواتف المحمولة حيث لا يوجد تحوم؟
قم بتشغيل Trigger on انقر في قسم تلميحات الأدوات حتى ينقر الزائرون على علامة لفتح تلميح الأدوات الخاص بها. يمكنك أيضًا ضبط Disable On to Mobile أو Tablet & Mobile، الذي يخفي تلميحات الأدوات على تلك الشاشات ويتيح لرابط العلامة أن يأخذ الزائرين إلى مزيد من المعلومات.
هل يمكنني استخدام صورة مخصصة بدلاً من رمز علامة نقطة الاتصال؟
نعم. اضبط نقطة الاتصال اكتب إلى صورة واختر صورة من مكتبة الوسائط. الصورة الصغيرة والبسيطة مثل الصورة المصغرة للمنتج أو الصورة الرمزية تُقرأ بشكل أفضل بحجم العلامة.
هل الصورة الأساسية نفسها مستجيبة؟
نعم. يتم ضبط مقاييس الصورة بعمودها ومواضع العلامات بالنسبة المئوية، بحيث تظل كل علامة على نفس الجزء من الصورة عبر أحجام الشاشة. قد تحتاج تلميحات الأدوات إلى تشغيل عند النقر أو التعطيل للشاشات الصغيرة.
هل أداة Image Hotspot مجانية؟
رقم نقطة اتصال الصورة جزء من ماستر أدونز برو. البرنامج المساعد المجاني لديه القطعة تلميح الأداة، والذي يضيف تلميح تحويم إلى عنصر واحد ولكنه لا يثبت العلامات على الصورة. يمكن لمستخدمي Elementor Pro أيضًا استخدام عنصر واجهة مستخدم Hotspot الخاص بـ Elementor.
هل يمكنني إيقاف تشغيل الرسوم المتحركة النبضية؟
نعم. يوجد تعطيل تأثير النبض في الجزء السفلي من قسم النقاط الساخنة ويقوم بإيقاف تشغيل النبض لكل علامة في عنصر واجهة المستخدم هذا. لا يوجد تبديل نبضي لكل علامة، لذا استخدم عنصر واجهة مستخدم Image Hotspot ثانيًا إذا كنت بحاجة إلى المظهرين في صفحة واحدة.
لماذا يختفي التنسيق الموجود في تلميح الأدوات الخاص بي؟
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
![ملحق Master Addons Post/Page Duplicator لـ Elementor: رابط صف MA Duplicator في قائمة صفحات WordPress لإنشاء صفحة مقصودة - مسودة [مكررة #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
ناسخ البريد/الصفحة
