الوجبات السريعة الرئيسية
- نقطة اتصال صورة Elementor هي علامة مثبتة على صورة تفتح ملصقًا قصيرًا عند التمرير أو النقر، وتضيف أداة Master Addons Image Hotspot علامة واحدة لكل عنصر في قائمة نقاط الاتصال الخاصة بها.
- تحتاج أداة Image Hotspot إلى Elementor وMaster Addons Pro، لأن Elementor المجاني لا يحتوي على عنصر واجهة مستخدم لنقطة الاتصال ويقوم Elementor Pro بشحن عنصر واجهة مستخدم نقطة الاتصال المنفصل الخاص به.
- يتم وضع كل علامة نقطة اتصال للصور مع أشرطة تمرير الموضع الأفقي والرأسي بالنسبة المئوية للصورة، وينطبق هذا الموضع الواحد على سطح المكتب والكمبيوتر اللوحي والهاتف.
- تعرض تلميحات أدوات Image Hotspot نصًا عاديًا فقط، حيث تتم إزالة النص الغامق والروابط والصور والرموز القصيرة المكتوبة في مربع محتوى تلميح الأدوات عند عرض الصفحة.
- يؤدي تشغيل النقر في قسم Image Hotspot Tooltips إلى جعل العلامات تعمل على الهواتف، ولكن يتم اتباع رابط العلامة فقط عند فتح تلميحات الأدوات عند التمرير.
- يمكن أن تكون أداة Image Hotspot بمثابة خريطة صور بسيطة مع علامات نقاط مرتبطة، على الرغم من أنها لا تستطيع رسم أشكال قابلة للنقر أو تحديد الخطوط العريضة للغرفة بالطريقة التي يمكن بها للمكون الإضافي لخريطة الصور SVG.
نقطة اتصال صورة Elementor هي علامة صغيرة مثبتة على صورة تعرض ملصقًا قصيرًا عندما يقوم الزائر بالتمرير أو النقر عليه. لا يحتوي Free Elementor على عنصر واجهة مستخدم لهذا الغرض، لذلك يستخدم هذا الدليل عنصر واجهة مستخدم نقطة اتصال الصورة للإضافات الرئيسية، والذي يضيف علامات إلى أي صورة من لوحة Elementor بدون رمز مخصص. أنت بحاجة إلى Master Addons Pro لذلك.
تنقلك الخطوات أدناه من حاوية فارغة إلى صورة تفاعلية منشورة: وضع العلامات بالنسبة المئوية، وكتابة الملصق لكل منها، وتصميم العلامات لسطح المكتب والهواتف. تغطي الأقسام اللاحقة الحدود التي يجب معرفتها قبل الإنشاء، وكيفية استخدام نقاط الاتصال كخريطة صور بسيطة، وكيفية مقارنة عنصر واجهة المستخدم بعنصر واجهة المستخدم Hotspot في Elementor Pro.
جدول المحتويات
ما هي نقطة اتصال الصورة في Elementor
نقطة اتصال الصورة هي علامة يتم وضعها عند نقطة محددة على الصورة. تحمل كل علامة ملصقًا قصيرًا خاصًا بها، وإذا أردت، رابطًا. على سطح المكتب تظهر التسمية عند التمرير. على الهاتف ينقر الزائر على العلامة.
يمكن أن تحتوي صورة المنتج على علامة على كل ميزة. يمكن أن يحدد مخطط الأرضية الغرف أو المكاتب. يمكن أن تشير لقطة الشاشة إلى الأزرار التي يحتاجها المستخدم الجديد. تظل الصورة كما هي، وتسمح العلامات للزائرين باستكشافها دون التمرير لأسفل إلى قائمة منفصلة من المواصفات أو وسيلة إيضاح.
لا يحتوي Free Elementor على عنصر واجهة مستخدم لنقطة الاتصال. يحتوي Elementor Pro على عنصر يسمى Hotspot، ويضيف Master Addons Pro Image Hotspot، والذي يمكنه أيضًا استخدام صورة صغيرة كعلامة. يغطي هذا الدليل عنصر واجهة المستخدم Master Addons.
إذا كنت تريد فقط تلميحًا للتحليق على زر أو عنوان، فإن نقطة الاتصال هي الأداة الخاطئة. ال القطعة تلميح الأداة يعالج ذلك بدون Master Addons Pro و ملحق تلميحات الأدوات يضيف (Pro) تلميحًا إلى عنصر موجود بالفعل في الصفحة.
هل تريد رؤيتها تعمل قبل البناء؟ ال صفحة عناصر واجهة مستخدم نقطة اتصال الصورة يحتوي على عروض توضيحية مباشرة وقائمة الإعدادات الكاملة ونقطة اتصال Elementor Pro جنبًا إلى جنب.
كيفية إضافة نقطة اتصال الصورة في Elementor
يستغرق الإعداد حوالي خمس دقائق لصورة تحتوي على أربع أو خمس علامات.
الخطوة 1: تثبيت الإضافات الرئيسية وتنشيط Pro
في لوحة تحكم WordPress الخاصة بك، انتقل إلى المكونات الإضافية وأضف جديدًا وابحث عن “Master Addons”. قم بتثبيته وتنشيطه، ثم أدخل رخصة برو ضمن الإضافات الرئيسية، الترخيص. تظهر نقطة اتصال الصورة فقط في لوحة Elementor بمجرد تنشيط Pro. يعمل مع Elementor المجاني.
الخطوة 2: اسحب عنصر واجهة مستخدم Image Hotspot إلى الصفحة
افتح الصفحة في محرر Elementor وابحث في لوحة Elements عن “hotspot”. النتيجة مع شارة MA هي Image Hotspot. إذا رأيت أيضًا عنصر واجهة مستخدم Hotspot مقفل بجواره، فهذا ينتمي إلى Elementor Pro. اسحب Image Hotspot إلى الحاوية.
الخطوة 3: اختر صورتك
في علامة التبويب "المحتوى"، افتح قسم الصورة وانقر فوق "اختيار صورة". اضبط دقة الصورة على كاملة أو كبيرة إذا كانت الصورة تحتوي على تفاصيل دقيقة، لأن العلامات موجودة على الصورة المعروضة والنسخة المصغرة تجعل كل دبوس يبدو تقريبيًا. تضع المحاذاة الصورة على اليسار أو الوسط أو اليمين في عمودها.
الخطوة 4: أضف نقاط الاتصال وحدد موضعها
افتح قسم النقاط الساخنة. كل عنصر في القائمة عبارة عن علامة واحدة، لذا انقر فوق إضافة عنصر مرة واحدة لكل نقطة تريد وضع علامة عليها. لا يوجد حد لعدد العناصر.
يحتوي كل عنصر على علامات تبويب المحتوى والنمط والموضع. في علامة التبويب "الموضع"، حرك شريط التمرير للموضع الأفقي (%) والموضع الرأسي (%) لوضع العلامة. القيم هي نسبة مئوية من الصورة، لذا فإن 50 و50 يضعان العلامة في المنتصف. لا يمكنك سحب العلامات على اللوحة القماشية، وتبدأ جميع العناصر الجديدة في الزاوية العلوية اليسرى حتى تقوم بتحريكها، لذلك يمكن أن تبدو ثلاثة عناصر جديدة وكأنها عنصر واحد.
يتم تطبيق موضع واحد على كل حجم شاشة. توجد علامة بعرض 22% وأسفل بنسبة 52% على نفس الجزء من الصورة على جهاز كمبيوتر محمول وعلى الهاتف.
ضمن القائمة، تعطيل تأثير النبض؟ يقوم بإيقاف تشغيل الحلقة النابضة حول كل علامة في الأداة.
الخطوة 5: اختر نوع العلامة واكتب الملصق
في علامة التبويب المحتوى لكل عنصر، يقوم النوع بتعيين ما يظهر داخل العلامة: لا شيء (نقطة عادية)، أو نص (علامة زائد افتراضيًا، أو رقم أو كلمة تكتبها)، أو أيقونة (أي رمز Font Awesome) أو صورة (صورة صغيرة). يعمل خلط الأنواع في صورة واحدة بشكل جيد.
يرسل حقل الارتباط الزائر إلى صفحة أخرى عند النقر فوق العلامة. ويتم اتباعه عند فتح تلميحات الأدوات عند التمرير. مع تشغيل تشغيل Trigger on Click (الخطوة 6)، تفتح النقرة تلميح الأداة ويتم تجاهل الرابط.
محتوى تلميح الأداة هو السطر الذي يظهر في تلميح أداة نقطة الاتصال. يبدو المربع وكأنه محرر نص كامل، لكن تلميح الأداة يعرض نصًا عاديًا: تتم إزالة الخط الغامق والمائل والروابط والصور والرموز القصيرة عند عرض الصفحة. اكتب سطرًا قصيرًا واحدًا.
الخطوة 6: اختر كيفية فتح العلامات
بالعودة إلى علامة التبويب المحتوى، يتحكم قسم تلميحات الأدوات في كل علامة في عنصر واجهة المستخدم مرة واحدة.
- إظهار الموضع يختار الجانب الذي يفتح عليه تلميح الأداة: أعلى أو أسفل أو يسار أو يمين. يمكن للعلامة تجاوزه باستخدام خيار إظهار الموضع في علامة التبويب موضعه.
- تحدد الرسوم المتحركة تأثير الكشف: Shift-Away، Shift-Toward، Fade، Scale أو Perspective.
- يضيف السهم مؤشرًا من تلميح الأداة إلى العلامة.
- يقوم الإزاحة والمسافة بتحريك طرف الأداة على طول العلامة وبعيدًا عنها.
- يؤدي تشغيل النقر إلى فتح تلميحات الأدوات عند النقر أو النقر. لا تحتوي الهواتف على تحوم، لذا قم بتشغيل هذا إذا كان العديد من الزوار يستخدمون الهاتف.
الخطوة 7: المعاينة والنشر
انقر فوق نشر الصفحة وفتحها في علامة تبويب جديدة. قم بتمرير كل علامة للتحقق من نص تلميح الأداة وجانبها، ثم قم بتغيير حجم النافذة إلى عرض الهاتف وتأكد من أن العلامات لا تغطي بعضها البعض.
نمط العلامات والصورة
يحدث التصميم في مكانين: علامة التبويب "النمط" الخاصة بكل علامة، وعلامة التبويب "النمط" الرئيسية لعنصر واجهة المستخدم.
نمط لكل علامة
تحتوي علامة التبويب "النمط" الموجودة داخل عنصر نقطة الاتصال على إعدادات "افتراضي" و"تمرير" للون والخلفية والعتامة. استخدمه لإعطاء علامة واحدة لونًا مختلفًا، مثل عنصر البيع في صورة المنتج.
اختر لونًا مميزًا يتناقض مع الصورة الموجودة خلفه. تضيع علامة صامتة على صورة مزدحمة، ولن يلاحظ الزائرون وجود أي شيء للتحليق فيه.
صورة
يتحكم قسم الصورة في علامة التبويب "النمط" الرئيسية في الصورة: العتامة والحدود ونصف قطر الحدود وظل الصندوق ومرشحات CSS. يساعد نصف القطر والظل الناعم الصورة على الجلوس داخل تخطيط البطاقة.
النقاط الساخنة
يقوم قسم النقاط الساخنة بتصميم كل علامة في وقت واحد: الحجم، والحشوة، ونصف قطر الحدود، والعتامة، واللون، والخلفية، ولكل منها إصدار تحوم. الإعدادات على علامة فردية تفوز بهذه.
تلميحات الأدوات
يقوم قسم تلميحات الأدوات بتصميم تلميح أداة نقطة الاتصال: محاذاة النص، والحشو، ونصف قطر الحدود، والخلفية، ولون النص، ولون السهم، والطباعة.
قم ببناء صورة تفاعلية في Elementor
الصورة التفاعلية هي صورة تجيب على الأسئلة عندما يشير إليها الزائر. في Elementor، يمكنك إنشاء واحدة باستخدام Image Hotspot باتباع الخطوات المذكورة أعلاه: علامة واحدة لكل نقطة، وتلميح أداة من سطر واحد على كل منها، ومشغل عند النقر إذا كانت حركة المرور الخاصة بك متنقلة في الغالب.
يعمل إقران الصورة بقائمة قصيرة بجوارها بشكل جيد. يمكن للزائر تحريك علامة أو قراءة القائمة، وكلاهما يشير إلى نفس العناصر. ال تسوق في هذه الغرفة التجريبية يستخدم علامات مرقمة على صورة غرفة المعيشة مع قائمة الأسعار بجانبها.
تتضمن التخطيطات الأخرى التي تناسب الصورة التفاعلية ساعة أو أداة بها علامة على كل جزء، وقائمة سيارة بها علامات على الأضواء والعجلات، وصورة ملكية مع ملصقات على كل ميزة، وصورة فريق مع اسم على كل شخص.
استخدم نقاط اتصال الصور كخريطة صور بسيطة
خريطة الصورة تجعل أجزاء من الصورة قابلة للنقر عليها. تغطي نقطة اتصال الصورة الحالة الشائعة: علامة في كل نقطة تحتوي على رابط إلى صفحة أخرى، والتي يتم اتباعها عند فتح تلميحات الأدوات عند التمرير. فهو يضع علامات النقاط فقط. لا يرسم أشكالًا قابلة للنقر، لذا فإن مخطط الأرضية حيث يجب أن يكون كل مخطط تفصيلي للغرفة قابلاً للنقر يحتاج إلى مكون إضافي مخصص لخريطة الصور مثل خريطة الصور برو، الذي يرسم أشكالًا متجهة على الصورة (اعتبارًا من نوفمبر 2026).
بالنسبة للدبابيس الموجودة على خريطة الحرم الجامعي أو تخطيط المتجر أو أرضية صالة الألعاب الرياضية، تكون العلامات كافية وأسرع في الإعداد. ال عرض خريطة منطقة الصالة الرياضية حدد خمس مناطق في الصورة، وترتبط كل علامة بصفحة الحجز الخاصة بتلك المنطقة.
نقاط اتصال الصور على الهواتف والأجهزة اللوحية
تمثل مواضع العلامات نسبة مئوية من الصورة، لذلك تظل كل علامة على نفس الجزء من الصورة عند كل حجم شاشة. لا يوجد موضع منفصل للكمبيوتر اللوحي أو الهاتف.
تحافظ العلامات على حجمها مع تقلص الصورة، بحوالي 40 بكسل بشكل افتراضي. على الهاتف، تصبح الصورة التي تحتوي على العديد من العلامات مزدحمة. استخدم علامات أقل، أو مقاسًا أقل ضمن النمط، أو نقاط اتصال، أو امنح زوار الهاتف صورة أبسط.
لا تحتوي الهواتف على خاصية التمرير، لذا قم بتشغيل Trigger on Click in the Tooltips القسم. ينقر الزائرون على علامة لفتح تلميح الأداة الخاص بها. ضع في اعتبارك أنه مع تشغيل وضع النقر، يؤدي النقر إلى فتح تلميح الأداة ولا يتم اتباع رابط العلامة، لذلك إذا كانت الروابط أكثر أهمية من تلميحات الأدوات، فاترك Trigger عند النقر.
ما تحتاجه لاستخدام نقاط اتصال الصورة
| يثبت | القطعة نقطة الاتصال التي تحصل عليها |
|---|---|
| عنصر حر من تلقاء نفسه | لا أحد. لا يحتوي Core Elementor على عنصر واجهة مستخدم لنقطة الاتصال. |
| إليمنتور برو | أداة Hotspot الخاصة بـ Elementor، مع محتوى تلميح الأدوات المنسق والرسوم المتحركة الخاصة بالعلامات. |
| إضافات رئيسية بدون Pro | لا توجد نقطة اتصال للصور. يتم تضمين العديد من الأدوات الأخرى. |
| مع ماستر أدونز برو | نقطة اتصال الصورة وامتداد تلميحات الأدوات وبقية عناصر واجهة المستخدم والإضافات 80+. |
يتم تثبيت الإضافات الرئيسية من دليل البرنامج المساعد ووردبريس. تحتاج نقطة اتصال الصورة إلى أ ترخيص ماستر أدونز برو فوقه. يتم إدراج كل عنصر تحكم في دليل إعدادات نقطة اتصال الصورة.
نصائح للعمل مع نقاط اتصال الصور
- علامات الفضاء خارج. إذا جلس اثنان بالقرب من بعضهما البعض، فأرسل تلميحات الأدوات الخاصة بهما إلى الجانبين المتقابلين مع خيار العرض في علامة التبويب موضع كل علامة، أو قم بإسقاط واحدة.
- احتفظ بكل تسمية في سطر واحد. يتم عرض تلميح الأداة كنص عادي، لذا ضع تفاصيل أطول على الصفحة واستخدم رابط العلامة.
- اختبر عرض الهاتف قبل النشر. ينطبق نفس موضع النسبة المئوية في كل مكان ولا تتقلص العلامات، لذا فإن العلامة التي تبدو جيدة على سطح المكتب يمكن أن تغطي تفاصيل صغيرة على الهاتف.
- استخدم لون التمرير على العلامات حتى يتمكن الزوار من معرفة اللون الذي يرتدونه.
- علامات الخط بأرقام دقيقة. تعد كتابة القيم في حقول النسبة المئوية أسرع من دفع أشرطة التمرير عندما يجب أن تكون العلامات موجودة على أجزاء صغيرة من الرسم التخطيطي أو لقطة الشاشة.
الأسئلة المتداولة
ما هي نقطة اتصال الصورة في Elementor؟
نقطة اتصال الصورة هي علامة صغيرة توضع أعلى الصورة. عندما يقوم الزائر بالتمرير أو النقر عليها، تظهر تسمية قصيرة لهذا الجزء من الصورة. يحتوي Elementor Pro على عنصر واجهة مستخدم Hotspot خاص به، ويضيف Master Addons Pro عنصر واجهة مستخدم Image Hotspot الذي يمكنه أيضًا استخدام الصور الصغيرة كعلامات.
كم عدد النقاط الساخنة التي يمكنني إضافتها إلى صورة واحدة؟
لا يوجد حد صعب. خمس إلى سبع علامات لكل صورة تجعل الأشياء قابلة للقراءة، وعدد أقل على الصور التي سيتم رؤيتها على الهواتف، لأن العلامات لا تتقلص مع الصورة. إذا كنت بحاجة إلى المزيد، قم بتقسيم المحتوى عبر صورتين.
هل تعمل نقاط اتصال الصور على الهاتف المحمول؟
نعم. لا تحتوي الهواتف على تحوم، لذا قم بتشغيل Trigger on Click ويقوم الزائرون بالنقر فوق علامة لفتح تلميح الأداة الخاص بها. المواضع هي نسبة مئوية من الصورة ونفس الشيء على كل شاشة، لذا تأكد من أن العلامات لا تزاحم بعضها البعض عند عرض الهاتف.
هل يمكنني ربط نقطة اتصال بصفحة أخرى؟
نعم. تحتوي كل علامة على حقل رابط. يتم اتباع الرابط عند فتح تلميحات الأدوات عند التمرير، لذلك يقرأ الزائر تلميح الأداة عند التمرير وينتقل إلى الصفحة عند النقر. مع تشغيل Trigger on Click on، تفتح النقرة تلميح الأداة بدلاً من ذلك ولا يتم اتباع الرابط.
هل يمكنني وضع نص أو روابط أو صور غامقة داخل تلميح أداة نقطة الاتصال؟
رقم يعد مربع محتوى تلميح الأداة محررًا غنيًا، ولكن تتم إزالة النص الغامق والروابط والصور والرموز القصيرة عند عرض الصفحة، وبالتالي يعرض تلميح الأداة نصًا عاديًا. اكتب سطرًا قصيرًا واستخدم رابط العلامة للحصول على محتوى أطول.
هل أحتاج إلى Master Addons Pro لنقطة اتصال الصور؟
نعم. Image Hotspot عبارة عن عنصر واجهة مستخدم Master Addons Pro، ويعمل مع Elementor المجاني. يظهر في لوحة Elementor مرة واحدة رخصة برو نشط.
كيف تختلف Image Hotspot عن أداة Elementor Pro Hotspot؟
يسمح Elementor Pro Hotspot بمحتوى تلميح الأدوات المنسق، ويحتوي على رسوم متحركة لعلامات Soft Beat وExpand وOverlay، ويفتح عند التمرير أو النقر أو عدم النقر على الإطلاق. يستخدم Master Addons Image Hotspot تلميحات أدوات نصية عادية، وتأثير نبضي على العلامات وخمسة رسوم متحركة لتلميحات الأدوات، ويمكنه استخدام صورة صغيرة كعلامة.
الأفكار النهائية
تقوم نقطة اتصال الصورة بتحويل الصورة المسطحة إلى صورة تفاعلية: أربعة أنواع من العلامات، والمواضع المحددة بالنسبة المئوية، وسطر نص عادي واحد لكل علامة وخمسة رسوم متحركة تكشف، كل ذلك من لوحة Elementor. احتفظ بالقليل من العلامات على الصور التي ستراها الهواتف، وقم بتشغيل Trigger on Click عندما تكون معظم حركة المرور متنقلة.
لمزيد من عناصر واجهة المستخدم الصورة، راجع مقارنة الصور و تأثيرات تحوم الصورة. إذا كنت بحاجة إلى تلميحات التمرير على الأزرار أو النص بدلاً من الصور، فإن البرنامج التعليمي لعنصر واجهة المستخدم تلميح الأداة يغطي ذلك، والقائمة الكاملة ل عناصر واجهة المستخدم والإضافات الرئيسية يوضح ما يأتي أيضًا مع البرنامج المساعد.
احصل على Master Addons Pro لإضافة Image Hotspot وبقية عناصر واجهة المستخدم والإضافات 80+ إلى Elementor.
