إعدادات عناصر واجهة المستخدم لنقطة اتصال الصورة

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

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

ما تفعله أداة Image Hotspot #

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

ثلاث علامات تبويب تشغيله. محتوى يحمل الصورة ونقاط الاتصال وسلوك تلميح الأداة. أسلوب يتعامل مع الصورة وألوان العلامات ومظهر تلميح الأداة. متقدم هو التباعد والرؤية المعتادة للعنصر.

قبل أن تبدأ #

• ووردبريس مع العنصر مثبتة ونشطة.
• ماستر أدونز برو تم تثبيته بترخيص نشط، نظرًا لأن Image Hotspot عبارة عن عنصر واجهة مستخدم Pro. جديد في البرنامج المساعد؟ انظر ال دليل التثبيت.
• صورة، والتسميات أو الروابط التي تريد أن تظهرها كل نقطة اتصال.

كيفية إضافة عنصر واجهة مستخدم Image Hotspot #

في محرر Elementor، افتح عناصر لوحة والبحث عن نقطة اتصال الصورة، أو قم بالتمرير إلى قسم الإضافات الرئيسية (تحمل الأدوات شارة MA أرجوانية). اسحبه إلى الصفحة وسيتم تحميله بنموذج صورة وعلامات يمكنك تحريرها.

اختر الصورة #

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

• اختر صورة: اختر الصورة من مكتبة الوسائط.
• دقة الصورة: الحجم المقدم، مثل كبير أو كامل.
• محاذاة: اليسار أو الوسط أو اليمين داخل عموده.

إضافة النقاط الساخنة #

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

• أضف عنصرًا: أضف عددًا من نقاط الاتصال حسب احتياجات الصورة.
• تعطيل تأثير النبض: قم بإيقاف تشغيل الرسوم المتحركة النابضة على العلامات.
• علامة تبويب الموضع: الموضع الأفقي والرأسي بالنسبة المئوية لكل علامة.

قم بإعداد كل نقطة اتصال #

انقر فوق نقطة اتصال لفتح إعداداتها. ال محتوى تقوم علامة التبويب بتعيين نوع العلامة ونص تلميح الأداة الخاص بها ورابط اختياري.

• يكتب: لا تظهر شيئًا أو نصًا قصيرًا أو رمزًا أو صورة داخل العلامة.
• النص والرابط: النص الموجود داخل العلامة وعنوان URL، والذي يعمل عند فتح تلميحات الأدوات عند التمرير أو تعطيلها على تلك الشاشة.
• محتوى تلميح الأداة: نص تلميح الأداة. يتم تحريره في مربع WYSIWYG، لكن تلميح الأداة يعرض نصًا عاديًا فقط.

نمط كل نقطة اتصال #

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

• اللون والخلفية الافتراضية: العلامة في حالة راحة.
• تحوم اللون والخلفية: كيف يتغير عند التحليق.
• التعتيم: كم تبدو العلامة صلبة.

التحكم في تلميحات الأدوات #

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

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

قم بتصميم الصورة وتلميحات الأدوات #

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

• صورة: العتامة، ونصف قطر الحدود، وظل الصندوق، ومرشحات CSS.
• النقاط الساخنة: الحجم واللون العالمي للعلامات.
• تلميحات الأدوات: خلفية تلميح الأداة ولون النص والطباعة.

حالات الاستخدام الشائعة #

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

نصائح للعمل مع أداة Image Hotspot #

• إبقاء النقاط الساخنة قابلة للقراءة. قم بإبعادها حتى لا تتداخل العلامات وتلميحات الأدوات على الشاشات الأصغر.
• استخدم النقر على الجوال. قم بتشغيل Trigger on Click حتى يتمكن المستخدمون من اللمس من فتح تلميحات الأدوات، نظرًا لعدم وجود تحليق على الهاتف.
• قارن العلامات. اختر لونًا مميزًا يبرز من الصورة الموجودة خلفه، وإلا ستبتلعه صورة مشغولة.
• احتفظ بنص تلميح الأداة قصيرًا. يُقرأ سطر أو سطرين بشكل أفضل من الفقرة المحشوة في صندوق عائم.
• تعيين المواقف الدقيقة. استخدم أشرطة تمرير علامة التبويب "الموضع"، ثم قم بالمعاينة على الهاتف للتحقق من كل علامة.

شاهد الفيديو التعليمي #

تفضل المتابعة على الشاشة؟ يمر برنامج الفيديو التعليمي أدناه عبر عنصر Image Hotspot من البداية إلى النهاية، موضحًا كيفية عمل الصورة ونقاط الاتصال وتلميحات الأدوات والتصميم في محرر Elementor.

الأسئلة المتداولة #

إلتحاق بالركب #

تقوم أداة Image Hotspot بتحويل الصورة المسطحة إلى صورة تفاعلية: قم بتحميل الصورة، وتثبيت العلامات، وإضافة تلميحات الأدوات، ثم قم بتصميم العلامات وتعيين سلوك تلميح الأدوات. للحصول على أمثلة ومقارنة مع نقطة اتصال Elementor Pro، راجع عنصر واجهة مستخدم نقطة اتصال الصورة صفحة. للحصول على الأدوات ذات الصلة، راجع القطعة مقارنة الصور و ال أداة تأثيرات تحوم الصورة، تصفح بالكامل عناصر واجهة المستخدم والإضافات الرئيسية، والتحقق من صفحة التسعير لما تتضمنه كل خطة.