نادرًا ما تتم قراءة صورة المنتج التي تحتوي على فقرة من المواصفات الموجودة أسفلها. يتم تجاهل مخطط الأرضية الذي يحتوي على وسيلة إيضاح على الجانب. المشكلة هي نفسها دائمًا: الصورة والمعلومات موجودة في مكانين مختلفين، ومعظم الزوار لا يقومون بالتمرير بعيدًا بما يكفي لربطهما.
آن نقطة اتصال الصورة يصلح ذلك. تقوم بتثبيت علامات صغيرة مباشرة على الصورة، وتكشف كل واحدة منها عن ملصق قصير عندما يحوم شخص ما أو ينقر. ال أداة نقطة اتصال الصورة من الإضافات الرئيسية يقوم بذلك داخل محرر Elementor. قم بتحميل صورة، وإسقاط العلامات حيث تريدها، واكتب تسمية لكل منها، وبذلك تكون قد انتهيت. لا CSS، لا يوجد رمز مخصص.
ما هي نقطة اتصال الصورة في Elementor؟
نقطة اتصال الصورة هي علامة تفاعلية صغيرة مثبتة في موضع محدد على الصورة. كل علامة لها ملصقها أو رمزها أو رابطها الخاص. على سطح المكتب، يُظهر التمرير فوق العلامة لوحة عائمة تحتوي على المحتوى. على الهاتف المحمول، يؤدي النقر عليه إلى نفس الشيء.
يمكن أن تحتوي صورة المنتج على علامة على كل ميزة. يمكن أن يحدد مخطط الأرضية الغرف الفردية. يمكن أن تشير لقطة الشاشة إلى الأزرار أو الإعدادات مع شرح قصير. الصورة نفسها لا تتغير. العلامات تمنح الزائرين طريقة لاستكشافها فقط.
لا يحتوي Elementor على عنصر واجهة مستخدم نقطة اتصال مدمج. يتعامل إصدار Master Addons مع كل شيء بدءًا من لوحة عناصر واجهة المستخدم: وضع العلامة ومحتوى التسمية والأيقونات والرسوم المتحركة والتصميم. يمكنك تكوين كل نقطة اتصال على حدة من خلال المكرر، وتهتم الأداة بتحديد الموضع والاستجابة.
لماذا تستخدم نقاط اتصال الصور على موقع الويب الخاص بك؟
تخلق الصور الثابتة فجوة بين ما يراه الزائر وما يحتاج إلى معرفته. النقاط الساخنة تسد هذه الفجوة.
في صورة المنتج، قم بتثبيت علامة على كل ميزة حتى يتمكن الزوار من رؤية المواصفات دون التمرير إلى قائمة منفصلة. في مخطط الأرضية، ضع علامة على الغرف أو الأكشاك بحيث يفتح كل موقع باسمه وتفاصيله. على الرسم البياني، حافظ على نظافة الصورة ودع العلامات تحمل السياق الإضافي. في لقطة الشاشة، أشر إلى أزرار أو إعدادات محددة لبرنامج تعليمي أو تدفق الإعداد. في صورة الفريق أو الأشخاص أو الأقسام.
البنية هي نفسها دائمًا: صورة واحدة، وعلامات متعددة، كل واحدة تكشف المحتوى عند التفاعل معها. يبقى الزائر على الصورة بدلاً من الارتداد بين الصورة وكتلة النص الموجودة أسفلها.
كيفية إضافة نقطة اتصال للصور في Elementor (خطوة بخطوة)
يستغرق الإعداد بأكمله حوالي خمس دقائق.
الخطوة 1: تثبيت الإضافات الرئيسية وتنشيط Pro
انتقل إلى المكونات الإضافية، وأضف جديدًا إلى لوحة تحكم WordPress الخاصة بك وابحث عن إضافات “Master.” قم بتثبيت البرنامج الإضافي المجاني وتنشيطه. إذا كان لديك رخصة برو، أدخله ضمن الإضافات الرئيسية، الترخيص. تظهر أداة Image Hotspot فقط بعد تنشيط Pro.
الخطوة 2: اسحب أداة نقطة اتصال الصورة إلى صفحتك
افتح أي صفحة في محرر Elementor. في لوحة العناصر الموجودة على اليسار، ابحث عن Image Hotspot أو قم بالتمرير إلى قسم الإضافات الرئيسية (تحمل الأدوات شارة MA أرجوانية). اسحبه إلى الصفحة. يتم تحميله بنموذج صورة وبعض علامات العنصر النائب التي يمكنك تحريرها.
الخطوة 3: قم بتحميل صورتك
في علامة التبويب المحتوى، افتح قسم الصورة. انقر فوق اختيار صورة واختر صورة من مكتبة الوسائط. اضبط دقة الصورة على كاملة أو كبيرة للحصول على عرض حاد. يقوم خيار المحاذاة بوضع الصورة داخل عمودها: يسار، أو وسط، أو يمين.
الخطوة 4: إضافة نقاط اتصال إلى الصورة
افتح قسم النقاط الساخنة. كل عنصر في المكرر عبارة عن علامة واحدة. انقر فوق إضافة عنصر لإنشاء عنصر جديد. يمكنك إضافة العدد الذي تحتاجه الصورة. اسحب كل علامة على الصورة لوضعها، أو قم بتعيين إحداثيات أفقية ورأسية دقيقة لوضعها بدقة.
يوجد تبديل تعطيل تأثير النبض إذا كنت تريد علامات ثابتة بدلاً من الرسوم المتحركة النبضية الافتراضية.
الخطوة 5: قم بتعيين نوع العلامة ومحتوى التسمية
انقر فوق عنصر نقطة اتصال لفتح إعداداته. ضمن النوع، اختر ما يظهر داخل العلامة: لا شيء (مجرد نقطة)، أو أيقونة، أو صورة صغيرة. يحمل حقل النص التسمية القصيرة التي تظهر في اللوحة العائمة. يضيف حقل الرابط عنوان URL بحيث تنتقل العلامة أيضًا إلى مكان ما عند النقر.
محرر محتوى تلميح الأدوات عبارة عن مربع WYSIWYG لنص التسمية الكامل. يمكنك استخدام التنسيق أو الصور أو الرموز القصيرة هناك.
الخطوة 6: تكوين سلوك العلامة
بالعودة إلى علامة التبويب المحتوى الرئيسية، يتحكم قسم تلميحات الأدوات في كيفية تصرف التسميات عبر جميع العلامات
- إظهار الموقف: أي جانب من العلامة يفتح الملصق عليه (أعلى، أسفل، يسار، يمين).
- سهم: قم بتبديل المؤشر بين العلامة والملصق.
- الرسوم المتحركة: تأثير الكشف عند ظهور التسمية، مثل Shift-Toward.
- الزناد عند النقر: التبديل من التمرير إلى الكشف إلى النقر إلى الكشف. هذا هو ما تريده للجوال، نظرًا لأن شاشات اللمس لا تحتوي على التمرير.
خيارات تصميم العلامة
تحتوي كل نقطة اتصال على علامة تبويب نمط خاصة بها لمظهر العلامة:
- اللون الافتراضي و الخلفية الافتراضية: العلامة في حالة راحة.
- تحوم اللون و تحوم الخلفية: كيف يتغير عند التحليق.
- التعتيم: مدى صلابة العلامة مقابل الصورة. القيم المنخفضة تجعلها أكثر دقة.
اختر لونًا مميزًا يبرز من الصورة الموجودة خلفه. ستبتلع الصورة المزدحمة علامة منخفضة التباين، ولن يلاحظ الزائرون النقاط الساخنة.
تصميم الصورة والتسميات
تحتوي علامة التبويب النمط الرئيسية لعنصر واجهة المستخدم على ثلاثة أقسام.
لوحة الصور
يتحكم في الصورة نفسها: العتامة، ونصف قطر الحدود، وظل الصندوق، ومرشحات CSS. يساعد نصف قطر الحدود أو الظل الصورة على الجلوس داخل تخطيط على شكل بطاقة. تتيح لك مرشحات CSS تعديل السطوع أو التباين أو التشبع دون إعادة تصدير الصورة.
لوحة العلامات
الإعدادات العامة لجميع العلامات: الحجم واللون الافتراضي. تتجاوز أنماط نقاط الاتصال الفردية هذه.
لوحة الملصقات
يتحكم في اللوحة العائمة التي تظهر عند تفاعل العلامة مع: لون الخلفية، ولون النص، والطباعة، والحشو، ونصف قطر الحدود، والظل.
السلوك المستجيب على الهاتف المحمول
تستخدم العلامات تحديد المواقع على أساس النسبة المئوية، بحيث تظل مثبتة في نفس المكان على الصورة بغض النظر عن حجم الشاشة. يتم تغيير حجم الملصقات وتغيير موضعها للبقاء داخل إطار العرض.
لا تحتوي أجهزة اللمس على تحوم، لذا يقوم مفتاح التشغيل عند النقر للتبديل في قسم تلميحات الأدوات بتبديل الأداة بأكملها للنقر للكشف. ينقر الزائرون على علامة لفتح الملصق وينقرون على مكان آخر لإغلاقه. إذا كان جمهورك في الغالب على الهاتف المحمول، فقم بتشغيل هذا من البداية.
على الشاشات الصغيرة جدًا حيث تبدأ التسميات في التداخل، يمكنك تعطيلها أسفل نقطة توقف معينة والسماح لروابط العلامات بالقيام بالعمل بدلاً من ذلك. لا تزال كل علامة تنتقل إلى عنوان URL الخاص بها عند النقر.
نقطة اتصال الصورة مقابل أداة تلميح الأدوات: ما الفرق؟
تحتوي Master Addons على ميزتين تنتجان ملصقات تحوم، ويقوم الأشخاص بخلطها
| ميزة | ماذا يفعل | الأفضل ل |
|---|---|---|
| أداة نقطة اتصال الصورة | دبابيس العلامات التفاعلية في مواضع x/y محددة على الصورة. تفتح كل علامة تسمية عند التمرير أو النقر. | الصور المشروحة، ووسائل شرح المنتجات، ومخططات الطوابق، والخرائط التفاعلية. |
| أداة تلميح الأدوات وامتداد تلميحات الأدوات | أداة Tooltip عبارة عن تلميح مستقل مع مشغل خاص به. يقوم ملحق Tooltips بإرفاق تسمية تحويم بعنصر Elementor موجود، مثل زر أو رمز أو كتلة نص أو قسم. | قم بتمرير التلميحات على الأزرار، وساعد النص في حقول النموذج، وسياق إضافي على أي عنصر صفحة. |
تم تصميم Image Hotspot للصور ووضع العلامات حسب الموضع. إذا كنت بحاجة إلى علامات على صورة، استخدم Image Hotspot. للحصول على تسمية تحوم على زر أو كتلة نصية موجودة بالفعل، استخدم ملحق تلميحات الأدوات. إذا كنت تريد تلميحًا مستقلاً بدلاً من ذلك، فإن القطعة تلميح الأداة يفعل ذلك.
تحتاج نقطة اتصال الصور وملحق Tooltips إلى Master Addons Pro، بينما تكون أداة Tooltip موجودة في البرنامج الإضافي المجاني. لا يشاركون المحددات أو معالجات الأحداث، لذا يمكنك استخدامها في نفس الصفحة.
نصائح للعمل مع نقاط اتصال الصور
- علامات الفضاء خارج. العلامات المتداخلة تجعل الصورة صعبة الاستخدام. إذا كانت نقطتا اتصال قريبتان من بعضهما البعض، فاضغط على ملصقاتهما على الجانبين المتقابلين أو أسقط إحداهما.
- إبقاء التسميات قصيرة. يُقرأ سطر أو سطرين بشكل أفضل من الفقرة الموجودة داخل لوحة عائمة. استخدم الملصق للحصول على ملخص سريع واربط التفاصيل الكاملة.
- قم بتشغيل المشغل عند النقر للجوال. حتى لو كان التمرير يعمل على سطح المكتب، يحتاج مستخدمو اللمس إلى هدف النقر. تتعامل الأداة مع كلا الوضعين في نفس الوقت.
- اختبار على شاشات مختلفة. يمكن وضع العلامات التي تبدو متباعدة بشكل جيد على سطح المكتب على الهاتف. تحقق من الهاتف والجهاز اللوحي والشاشة العريضة قبل النشر.
- قارن العلامات مع الصورة. تعمل علامة ساطعة على صورة داكنة. تختفي علامة صامتة على خلفية مزدحمة. استخدم حالة التحويم لإضافة التركيز عندما يركز شخص ما على علامة.
- استخدم علامة التبويب "الموضع" عندما تكون المحاذاة مهمة. السحب سريع للموضع التقريبي. تكون علامة التبويب "الموضع" ذات قيم النسبة المئوية الدقيقة أفضل عندما تحتاج إلى علامات لتتماشى مع أجزاء محددة من الرسم التخطيطي أو لقطة الشاشة.
مجاني مقابل احترافي: ما تحصل عليه
| يخطط | نقطة اتصال الصورة | الحاجيات الأخرى |
|---|---|---|
| حر | غير متضمن | 40+ عنصر واجهة مستخدم بما في ذلك العنوان والزر وصندوق المعلومات والأكورديون والمزيد. |
| برو | متضمن | جميع عناصر واجهة المستخدم المجانية بالإضافة إلى نقطة اتصال الصور وملحق تلميحات الأدوات وشروط العرض وبقية عناصر واجهة المستخدم والإضافات التي يبلغ عددها 80+. |
البرنامج المساعد الأساسي مجاني للتثبيت من مستودع ووردبريس. تتطلب أداة Image Hotspot على وجه التحديد أ رخصة برو.
ما هي نقطة اتصال الصورة في Elementor؟
نقطة اتصال الصورة هي علامة تفاعلية صغيرة توضع أعلى الصورة. عندما يقوم الزائر بالتمرير أو النقر عليها، تظهر تسمية تحتوي على نص أو وصف أو رابط لتلك المنطقة المحددة من الصورة. لا يتضمن Elementor عنصر واجهة مستخدم مدمج لنقطة الاتصال، لذا فأنت بحاجة إلى إضافة مثل Master Addons لإضافة هذه الميزة.
كم عدد النقاط الساخنة التي يمكنني إضافتها إلى صورة واحدة؟
لا يوجد حد صعب. من الناحية العملية، 5 إلى 7 نقاط اتصال لكل صورة تجعل الأشياء قابلة للقراءة. أبعد من ذلك، تبدأ العلامات بالتداخل. إذا كنت بحاجة إلى إضافة تعليقات توضيحية إلى المزيد من المناطق، فقم بتقسيم المحتوى عبر صور متعددة.
هل تعمل نقاط اتصال الصور على الهاتف المحمول؟
نعم. على الأجهزة التي تعمل باللمس، تتحول الأداة من التمرير إلى النقر للكشف. يمكنك تمكين Trigger on Click حتى ينقر زوار الهاتف المحمول على علامة لفتح الملصق الخاص به. يحافظ تحديد المواقع المستند إلى النسبة المئوية على تثبيت نقاط الاتصال بشكل صحيح عبر أحجام الشاشة.
هل يمكنني ربط نقطة اتصال بصفحة أخرى؟
نعم. تحتوي كل نقطة اتصال على حقل رابط. يتم تشغيل الرابط عند النقر، بحيث يمكن للعلامة إظهار المعلومات في الملصق الخاص بها والتنقل بين الزائر وصفحة المنتج أو قسم الوثائق أو عنوان URL الخارجي.
هل أداة Image Hotspot مجانية أم احترافية؟
تعد أداة Image Hotspot ميزة احترافية. البرنامج الإضافي الأساسي لـ Master Addons مجاني ويتضمن أكثر من 40 عنصر واجهة مستخدم، لكن عنصر واجهة المستخدم لنقطة الاتصال يتطلب أ رخصة برو.
ما الفرق بين عنصر واجهة مستخدم Image Hotspot وعنصر واجهة مستخدم Tooltip؟
تقوم أداة Image Hotspot بتثبيت علامات تفاعلية في مواضع محددة على الصورة، ويظهر كل منها ملصقًا عند التمرير أو النقر. ال القطعة تلميح الأداة هو تلميح مستقل له مشغل خاص به، ويقوم ملحق Tooltips بإرفاق تسمية تحوم بعنصر موجود مثل زر أو نص أو رمز. استخدم Image Hotspot للصور المشروحة وخيارات تلميحات الأدوات لتلميحات التحويم على عناصر الصفحة الأخرى.
إلتحاق بالركب
تلتقط أداة Image Hotspot صورة مسطحة وتضيف علامات تكشف معلومات عند التمرير أو النقر. قم بتحميل الصورة، وإسقاط العلامات على المناطق التي تحتاج إلى شرح، وكتابة تسمية قصيرة لكل منها، وتصميم العلامات لتتناسب مع تصميمك. كل شيء يحدث داخل محرر Elementor.
لمزيد من المعلومات حول الصور في Elementor، راجع القطعة مقارنة الصور و ال أداة تأثيرات تحوم الصورة. إذا كنت بحاجة إلى تمرير التسميات على الأزرار أو النصوص بدلاً من الصور، فإن البرنامج التعليمي لعنصر واجهة المستخدم تلميح الأداة يغطي ذلك. والقائمة الكاملة ل عناصر واجهة المستخدم والإضافات الرئيسية يستحق التصفح إذا كنت تريد رؤية ما هو متاح أيضًا.
احصل على Master Addons Pro لفتح عنصر واجهة مستخدم Image Hotspot وبقية عناصر واجهة المستخدم والإضافات 80+ لـ Elementor.
