نقطة اتصال الصورة

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

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

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

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

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

قبل أن تبدأ #

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

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

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

اختر الصورة #

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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