أداة نقطة اتصال صورة العنصر مع تلميحات الأدوات (Pro)
Image Hotspot عبارة عن أداة Master Addons Pro تقوم بتثبيت العلامات أعلى الصورة. يمكن أن تكون العلامة نقطة عادية، أو تسمية نصية قصيرة، أو أيقونة Font Awesome أو صورة صغيرة، وتفتح كل واحدة تلميح أداة عندما يقوم الزائر بتمريرها، أو تنقر عليها بمجرد تشغيل Trigger on Click. إنها تناسب صور التسوق، ووسائل شرح المنتج، ومخططات الطوابق، وخرائط الحرم الجامعي، والرسوم البيانية ذات العلامات. إذا كان ما تريده هو تلميح التمرير على زر أو عنوان، فإن القطعة تلميح الأداة (لا حاجة إلى Master Addons Pro) أو ملحق تلميحات الأدوات (Pro) هو أقرب ملاءمة.
كيفية إضافة نقطة اتصال الصورة في Elementor
لإضافة نقطة اتصال للصورة في Elementor، قم بتنشيط Master Addons Pro، وقم بتحرير الصفحة باستخدام Elementor وابحث في لوحة عناصر واجهة المستخدم عن Image Hotspot. اسحبه للداخل، واختر صورتك ضمن الصورة، ثم افتح نقاط الاتصال وانقر فوق إضافة عنصر لكل علامة. قم بتعيين نوع كل علامة ومحتوى تلميح الأداة وموضعها، ثم انشر.
ابحث في اللوحة عن “hotspot” وستعود نتيجتان. MA ذو الشارة الواحدة هو عنصر واجهة المستخدم هذا. النقطة المقفلة بجانبها هي نقطة الاتصال الخاصة بـ Elementor، والتي تحتاج إلى ترخيص Elementor Pro، لذا يجدر التحقق من النقطة التي تمتلكها بالفعل قبل الإنشاء.
قم بإسقاط الأداة، واختر صورتك وقم بتعيينها دقة الصورة إلى كامل إذا كانت الصورة تحمل تفاصيل دقيقة. توجد علامات على الصورة المعروضة، لذا فإن المصدر المصغر يجعل كل دبوس يبدو تقريبيًا. يفتح النقاط الساخنةاضغط على إضافة عنصر، وكرر مرة واحدة لكل علامة. يحمل كل عنصر علامات التبويب الخاصة بالمحتوى والنمط والموضع.
شيئان يعثران الناس على البناء الأول. تهبط العلامات في الزاوية العلوية اليسرى حتى تلمس أشرطة تمرير الموضع، لذلك يتم تكديس ثلاثة عناصر جديدة في ما يشبه واحدًا. ومربع محتوى تلميح الأدوات عبارة عن محرر كامل، مما يجعل من المغري لصق فقرة فيه. هناك سبب لمقاومة ذلك، مغطى بالأسفل.
توجد أمثلة عملية تحتوي على صور المنتج والخرائط والرسوم البيانية كيفية إضافة نقاط اتصال الصورة في Elementor. يتم إدراج كل عنصر تحكم في دليل إعدادات عناصر واجهة المستخدم لنقطة اتصال الصورة.
لمحة سريعة عن نقطة اتصال الصورة
ما تفعله الأداة، اقرأ من كود Master Addons Pro.
| عنصر | أداة نقطة اتصال الصورة |
|---|---|
| أنواع العلامات | لا شيء، نص، أيقونة أو صورة |
| علامات لكل صورة | بقدر ما تضيفه إلى قائمة النقاط الساخنة |
| تحديد المواقع | أشرطة التمرير الأفقية والرأسية في المائة من الصورة، موضع واحد لكل حجم شاشة، بدون سحب |
| إعدادات لكل علامة | الرابط، نص تلميح الأداة، جانب تلميح الأداة، الألوان الافتراضية والتمرير، العتامة |
| محتوى تلميح الأداة | نص عادي (تتم إزالة HTML عند العرض) |
| جانب تلميح الأداة | أعلى أو أسفل أو يسار أو يمين |
| الرسوم المتحركة تلميح الأدوات | التحول بعيدا، التحول نحو، التلاشي، النطاق، المنظور |
| الزناد | قم بالتمرير، أو انقر باستخدام المشغل عند النقر |
| السهم والإزاحة والمسافة | نعم |
| تأثير النبض | يتم تشغيله افتراضيًا، ويقوم مفتاح واحد بإيقاف تشغيله لعنصر واجهة المستخدم |
| رابط العلامة | يتبع عند فتح تلميحات الأدوات عند التمرير |
| أسلوب | حجم العلامة، والحشو، ونصف القطر، والألوان الافتراضية والتحويم؛ حشوة تلميح الأدوات، ونصف القطر، والألوان، ولون السهم، والطباعة |
| الاحتياجات | Elementor و Master Adds Pro |
بناء صورة تفاعلية في Elementor
الصورة التفاعلية هي صورة تجيب على الأسئلة عندما يشير إليها الزائر. في Elementor، يمكنك إنشاء واحدة باستخدام Image Hotspot في ثلاث خطوات.
- قم بإسقاط نقطة اتصال الصورة في الحاوية واختر الصورة أسفل الصورة.
- أضف عنصرًا واحدًا لكل نقطة في نقاط الاتصال. اختر نصًا أو رمزًا أو صورة كعلامة، واكتب تلميح أداة من سطر واحد وقم بتعيين الموضع الأفقي والرأسي بالنسبة المئوية.
- افتح تلميحات الأدوات، واختر الجانب والرسوم المتحركة، وقم بتشغيل Trigger on Click إذا كان معظم الزوار يستخدمون الهواتف.
للحصول على إرشادات كاملة مع لقطات الشاشة، اقرأ كيفية إضافة نقاط اتصال الصورة في Elementor.
أربع علامات مرقمة على صورة مكتبية، مع فتح تلميح أداة طاولة الاجتماعات.
استخدم نقطة اتصال الصورة كخريطة صور بسيطة
خريطة الصورة تجعل أجزاء من الصورة قابلة للنقر عليها. تغطي Image Hotspot الحالة الشائعة: علامة في كل نقطة تحتوي على رابط إلى صفحة أخرى، والتي تعمل عند فتح تلميحات الأدوات عند التمرير. لا يرسم أشكالًا أو مناطق قابلة للنقر بالطريقة التي يرسم بها البرنامج الإضافي لخريطة الصور SVG مثل Image Map Pro، لذا فإن مخطط الأرضية حيث يجب أن يكون كل مخطط تفصيلي للغرفة قابلاً للنقر يحتاج إلى مكون إضافي مخصص لخريطة الصور.
بالنسبة للدبابيس الموجودة على خريطة الحرم الجامعي أو تخطيط المتجر أو مخطط المنتج، تكون العلامات كافية وأسرع في الإعداد. ال عرض خريطة منطقة الصالة الرياضية يعمل بهذه الطريقة.
أربعة أنواع من العلامات على صورة واحدة
ال يكتب يمنحك التحكم في علامة التبويب "المحتوى" الخاصة بالعلامة أربعة أشكال، ويمكنك مزج الأربعة داخل صورة واحدة.
لا أحد يترك نقطة ملونة عارية. إنه الخيار الأنظف للمخططات الكثيفة حيث تتصادم الملصقات مع بعضها البعض.
نص طباعة سلسلة قصيرة داخل العلامة. تعمل الأرقام بشكل جيد هنا، لأن الأرقام 01 و02 و03 عبر لقطة المنتج تُقرأ كجولة إرشادية بدون وسيلة إيضاح للكتابة. السلاسل الأطول تحول النقطة إلى حبة دواء، وهو المظهر الذي تريده لشيء مثل “Cologne No.5”.
أيقونة يأخذ أي رمز Font Awesome من المكتبة، حتى تتمكن الورقة من استبدال المكونات والنجمة للحصول على التقييم.
صورة يستبدل العلامة بصورة من مكتبة الوسائط الخاصة بك. الصور المصغرة للمنتج والصور الرمزية هي الأفضل للقراءة؛ أي شيء مشغول يتحول إلى هريسة بحجم العلامة.
تقبل كل علامة أيضًا أ وصلة. يتم تشغيل هذا الرابط عند فتح تلميحات الأدوات عند التمرير، أو عند نقاط التوقف حيث قمت بإيقاف تشغيل تلميحات الأدوات. لا يتم تشغيله أثناء تشغيل Trigger on Click، لأن النقرة قد تم التقاطها بالفعل.
ضع كل علامة حسب النسبة المئوية
ال موضع تحتوي علامة التبويب على شريطي تمرير، الموضع الأفقي والموضع الرأسي، وكلاهما يتم قياسهما بالنسبة المئوية للصورة. يؤدي الإعداد 50 و24 إلى وضع علامة على مسافة ربع الطريق في المنتصف. لا يوجد موضع للسحب على القماش، لذا عليك دفع الأرقام ومشاهدة المعاينة.
النسبة المئوية هي ما يبقي العلامات صادقة على الهاتف. تتدرج الصورة الأساسية مع الحاوية الخاصة بها وتحتفظ كل علامة بمكانتها النسبية، لذا فإن الملصق المثبت على غطاء الزجاجة لا يزال موجودًا على غطاء الزجاجة بعرض 390 بكسل، حيث كان من الممكن أن ينجرف إزاحة البكسل.
تحمل نفس علامة التبويب علامة لكل علامة أظهر ل، الذي يتجاوز جانب تلميح الأداة العام لتلك العلامة الواحدة. يساعد ذلك عندما توضع علامة بالقرب من الحافة اليمنى وسيخرج تلميح الأداة الخاص بها من الصورة: اضبط تلك على اليسار واترك الباقي في الأعلى.
علامات النبض بشكل افتراضي. ال تعطيل تأثير النبض يقوم المفتاح الموجود أسفل قسم النقاط الساخنة بإيقاف تشغيل الرسوم المتحركة لكل علامة مرة واحدة، وهو ما يحتاجه مخطط الأرضية الذي يحتوي على خمسة عشر دبوسًا عادةً.
موضع تلميح الأداة والرسوم المتحركة وسلوك الهاتف المحمول
ال تلميحات الأدوات يقوم القسم بتشغيل كل تلميح أداة في الأداة معًا: إظهار الموضع (أعلى أو أسفل أو يسار أو يمين)، الرسوم المتحركة (Shift-Away، Shift-Toward، Fade، Scale أو Perspective)، تبديل السهم، بالإضافة إلى الإزاحة والمسافة للدفع الدقيق.
تلميحات الأدوات مفتوحة عند التمرير. لا تحتوي الهواتف على تحوم، لذا قم بتشغيلها الزناد عند النقر والنقرة تفتح تلميح الأداة. يتم ضبط مواضع العلامات مرة واحدة بالمائة ويتم تطبيقها على كل حجم شاشة، بدون وضع منفصل للكمبيوتر اللوحي أو الهاتف المحمول. تحافظ العلامات على حجمها على الهاتف، لذا فهي تغطي المزيد من الصورة على شاشة ضيقة. حافظ على العد منخفضًا أو قم بخفض حجم العلامة في النمط، نقاط الاتصال.
أحد القيود للتخطيط حولها. محتوى تلميح الأداة عبارة عن مربع WYSIWYG، لكن الأداة تقوم بتجريد العلامات قبل أن تعرض، لذا بالخط العريض، تختفي الروابط والصور والرموز القصيرة ويظهر تلميح الأداة نصًا عاديًا. احتفظ بكل واحد في سطر قصير واحد. عندما تحتاج إلى محتوى تلميح أداة منسق، تتعامل أداة Hotspot الخاصة بـ Elementor Pro مع النص المنسق ولا تتعامل هذه الأداة.
تصميم تلميح الأداة نفسه هو المجموعة الكاملة: المحاذاة، والحشو، ونصف القطر، والخلفية، ولون النص، والحد، ولون السهم، والطباعة، وظل الصندوق. تحصل الصورة الأساسية على مرشحات العتامة والحدود ونصف القطر وظل الصندوق ومرشحات CSS.
علامات النمط للافتراضي والتحويم
يتم وضع تصميم العلامة في مكانين، وهو أبسط مما يبدو بمجرد معرفة الانقسام.
القطعة أسلوب تغطي علامة التبويب كل علامة في وقت واحد: حشو النص، ونصف قطر الحدود، والطباعة، ومجموعة انتقالية، ثم علامات التبويب الافتراضية والتحويم التي تحتوي على العتامة والحجم واللون ولون الخلفية ونوع الحدود وظل الصندوق. الحجم هو مضاعف مقياس من 0.5 إلى 2، لذا فإن ضبط التمرير إلى 1.15 يمنح العلامات رفعًا خفيفًا أسفل المؤشر دون تغيير أي شيء آخر في الصفحة.
تتجاوز علامة التبويب "النمط" الموجودة داخل علامة واحدة لون تلك العلامة وخلفيتها وعتامةها بشكل افتراضي وتحوم. هذه هي الطريقة التي تجعل علامة واحدة حمراء على جدار أرجواني، لوضع علامة على عنصر مباع بالكامل أو وضع علامة على نقطة الاتصال التي تريد ملاحظتها أولاً.
نصف قطر الحدود عند 100 يمنحك دوائر وحبوب. قم بإسقاطه إلى 6 وتصبح علامات النص علامات مربعة، والتي تُقرأ بشكل أفضل على الرسم المعماري من صف من الفقاعات.
نقطة اتصال Elementor Pro مقابل نقطة اتصال الصور للإضافات الرئيسية
يقوم Elementor Pro بشحن عنصر واجهة مستخدم Hotspot الخاص به. إذا كنت تدفع بالفعل مقابل Elementor Pro، فتحقق من ذلك أولاً، لأنك قد لا تحتاج إلى هذا على الإطلاق.
| ميزة | نقطة اتصال إليمينتر برو | نقطة اتصال صورة الإضافات الرئيسية |
|---|---|---|
| سعر | يحتاج العنصر برو | يحتاج إلى إضافات رئيسية برو |
| أنواع العلامات | نص التسمية وأيقونة بحجم مخصص | لا شيء، نص، أيقونة أو صورة |
| الرسوم المتحركة علامة | فوز ناعم، أو توسيع أو تراكب، مع رسوم متحركة متسلسلة | تشغيل أو إيقاف النبض |
| محتوى تلميح الأداة | نص غني بالتنسيق | نص عادي فقط |
| مشغل تلميحات الأدوات | تحوم أو انقر أو لا شيء | قم بالتمرير، أو انقر باستخدام المشغل عند النقر |
| الرسوم المتحركة تلميح الأدوات | أنماط التلاشي والانزلاق مع إعداد المدة | التحول على الطريق، التحول نحو، التلاشي، المقياس، المنظور، بالإضافة إلى السهم، الإزاحة والمسافة |
| تحديد المواقع | لكل مواضع الجهاز | أشرطة التمرير الأفقية والرأسية، موضع واحد لكل شاشة، بدون سحب على اللوحة القماشية |
| رابط العلامة | رابط لكل نقطة اتصال | رابط لكل علامة، يتم اتباعه عند فتح تلميحات الأدوات عند التمرير |
| يحتاج العنصر برو | نعم | لا |
يفوز Elementor Pro بنص تلميح الأدوات الغني والرسوم المتحركة للعلامة. الإضافات الرئيسية هي الاختيار إذا كنت تريد علامات الصور أو تستخدم بالفعل الإضافات الرئيسية Pro بدون Elementor Pro. ذات صلة: ال القطعة تلميح الأداة، ال ملحق تلميحات الأدوات (Pro), مقارنة الصور و تأثيرات تحوم الصورة.
حيث تكتسب نقطة اتصال الصورة مكانها
التصوير الفوتوغرافي ذو المظهر المتوفر هو التصوير الواضح. لقطة واحدة لأسلوب الحياة، وعلامة صورة لكل منتج، وتلميح أداة لتسمية كل عنصر، ورابط إلى صفحة المنتج الخاصة به. إنه يعمل بشكل أفضل من شبكة الصور المصغرة لأن الزائر يرى القطع مصممة معًا قبل أن يراها مسعرة.
المواصفات التي لا تحتوي على جدول مواصفات هي الاستخدام الأكثر هدوءًا. في أجسام الكاميرا والساعات والآلات، تقوم العلامات المرقمة بتوجيه القارئ حول الكائن بالترتيب الذي تختاره، ولا يتعين على أحد تعيين الصف 4 من الجدول مرة أخرى على الصورة.
ثم هناك مخططات الطوابق وخرائط الحرم الجامعي والرسوم البيانية الموسومة. نقاط مع تأثير تعطيل النبض، وتلميح أداة من سطر واحد على كل منها، ورابط على كل علامة تشير إلى الصفحة الكاملة، مع ترك تلميحات الأدوات عند التمرير حتى يستمر تشغيل الرابط. خمسة عشر دبابيس تبقى قابلة للقراءة بهذه الطريقة؛ خمسة عشر حبة نابضة لا تفعل ذلك.
أزواج جيدة مع: القطعة تلميح الأداة، ال ملحق تلميحات الأدوات (برو)، تأثيرات تحوم الصورة, صورة متقدمة و مقارنة الصور.
أمثلة على نقاط اتصال الصور
أربعة عشر عرضًا تجريبيًا مباشرًا تم إنشاؤها باستخدام الأداة، كل منها يستخدم بشكل مختلف لنقطة اتصال الصورة.
- تسوق المظهر: علامات مرقمة على غرفة المعيشة، كل تلميح أداة يذكر القطعة وسعرها.
- طبق مطعم: علامات أيقونة تسمي المورد لكل جزء من اللوحة.
- قائمة الممتلكات: علامات الملصقات الموجودة على فيلا لتراس السطح والجناح والمسبح.
- قائمة السيارات: علامات الأيقونات على الأضواء والعجلات وكاميرات وقوف السيارات.
- كتاب الموضة: علامات على حقيبة وساعة ومعطف مع الأسعار.
- خريطة منطقة الصالة الرياضية: علامة واحدة لكل منطقة تدريب.
- مشاهدة التشريح: علامات أيقونات صغيرة على القرص والحركة والتاج.
- جولة عمل مشتركة: نقاط عادية على أرضية المكتب.
- أجهزة الهاتف: علامات على الكاميرات وزر الطاقة ومنفذ الشحن.
- مميزات سماعة الرأس: وسائل الشرح على لقطة المنتج.
- سماعة الواقع الافتراضي: وسائل الشرح الميزة والضمان.
- انهيار الزي: سترة ونظارات شمسية وجينز.
- ترويج المنتج: علامات على صورة حقيبة حمل.
- وسائل الشرح الصفحة المقصودة: علامات على لقطة شاشة الصفحة.
الأسئلة المتداولة لنقطة اتصال الصورة
ماذا يحدث على الهواتف المحمولة حيث لا يوجد تحوم؟
قم بتشغيل تشغيل الزناد، انقر في قسم تلميحات الأدوات حتى ينقر الزائرون على علامة لفتح تلميح الأداة الخاص بها. تحتفظ العلامات بنفس موضع النسبة المئوية على كل شاشة، لذا قم بمعاينة الصفحة بعرض الهاتف وخفض حجم العلامة إذا كانت تزاحم الصورة.
هل يمكنني استخدام صورة مخصصة بدلاً من رمز علامة نقطة الاتصال؟
نعم. اضبط نقطة الاتصال اكتب إلى صورة واختر صورة من مكتبة الوسائط. الصورة الصغيرة والبسيطة مثل الصورة المصغرة للمنتج أو الصورة الرمزية تُقرأ بشكل أفضل بحجم العلامة.
هل يمكنني سحب العلامات إلى مكانها في المحرر؟
لا. تحتوي كل علامة على أشرطة تمرير للموضع الأفقي والموضع الرأسي في علامة تبويب الموضع الخاصة بها، ويتم قياسها بالنسبة المئوية للصورة. حرك شريط التمرير وشاهد المعاينة. النسبة المئوية تحافظ على العلامة في نفس المكان عند تغيير حجم الصورة.
هل يمكنني استخدام Image Hotspot كخريطة صور؟
بالنسبة للروابط النقطية، نعم: ضع علامة على كل نقطة وأعطها رابطًا، مع ترك تلميحات الأدوات عند التمرير. لا يرسم أشكالًا أو مناطق قابلة للنقر عليها، لذلك بالنسبة لمخططات الغرفة على مخطط الأرضية، استخدم مكونًا إضافيًا لخريطة الصور مثل Image Map Pro.
هل هناك عنصر واجهة مستخدم لنقطة الاتصال في Elementor المجاني؟
تعد أداة نقطة اتصال No. Elementor جزءًا من Elementor Pro، وتحتاج Image Hotspot إلى Master Addons Pro. تتضمن بعض حزم الإضافات الأخرى عنصر واجهة مستخدم لنقطة الاتصال في إصداراتها المجانية.
هل الصورة الأساسية نفسها مستجيبة؟
نعم. يتم ضبط مقاييس الصورة بعمودها ومواضع العلامات بالنسبة المئوية، بحيث تظل كل علامة على نفس الجزء من الصورة عبر أحجام الشاشة. على الهواتف، قم بتشغيل Trigger on Click حتى يؤدي النقر إلى فتح تلميح الأداة.
هل أداة Image Hotspot مجانية؟
رقم نقطة اتصال الصورة جزء من ماستر أدونز برو. بدون Pro يمكنك استخدام القطعة تلميح الأداة، والذي يضيف تلميح تحويم إلى عنصر واحد ولكنه لا يثبت العلامات على الصورة. يمكن لمستخدمي Elementor Pro أيضًا استخدام عنصر واجهة مستخدم Hotspot الخاص بـ Elementor.
هل يمكنني إيقاف تشغيل الرسوم المتحركة النبضية؟
نعم. يوجد تعطيل تأثير النبض في الجزء السفلي من قسم النقاط الساخنة ويقوم بإيقاف تشغيل النبض لكل علامة في عنصر واجهة المستخدم هذا. لا يوجد تبديل نبضي لكل علامة، لذا استخدم عنصر واجهة مستخدم Image Hotspot ثانيًا إذا كنت بحاجة إلى المظهرين في صفحة واحدة.
لماذا يختفي التنسيق الموجود في تلميح الأدوات الخاص بي؟
تقوم الأداة بإزالة HTML من محتوى تلميح الأدوات قبل عرضه، لذلك يتم إسقاط النص الغامق والروابط والصور والرموز القصيرة ويظهر تلميح الأداة نصًا عاديًا. احتفظ بكل تلميح أداة في سطر قصير واحد. بالنسبة لتلميحات الأدوات المنسقة، تدعم أداة Hotspot الخاصة بـ Elementor Pro النص المنسق.
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
![ملحق 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)
ناسخ البريد/الصفحة
