كيفية إنشاء صورة تفاعلية باستخدام النقاط الفعالة في WordPress

هل ترغب في معرفة كيفية إنشاء صورة تفاعلية باستخدام Hotspots في WordPress باستخدام Elementor وEssential Addons؟

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

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

سواء كنت منشئ محتوى يتطلع إلى تحسين التفاعل على موقعك أو مطور ويب يتطلع إلى تقديم ميزات متقدمة لعملائك، فإن هذه الطريقة ستزودك بالأدوات اللازمة لتصميم صور تفاعلية جذابة. استعد لاكتشاف كيف يمكن لـ Essential Addons وElementor تحويل صورك إلى نقاط تفاعل حقيقية تأسر زوار موقعك وتجذبهم.

---

محتويات

---

ما هي الإضافات الأساسية؟

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

1. ملحق الميزة
2. الحاجيات المختلفة
3. واجهة بديهية
4. التخصيص المتقدم
5. الاستجابة والأداء
6. الدعم والتحديثات
7. نسخة فريميوم

---

لماذا نستخدم الإضافات الأساسية لإنشاء صور تفاعلية؟

عندما يتعلق الأمر بإنشاء صور تفاعلية على WordPress، يمكن أن توفر العديد من المكونات الإضافية ميزات رائعة. لكن، الإضافات الأساسية تبرز كخيار فعال بشكل خاص لعدة أسباب رئيسية:

1. التكامل السلس مع Elementor

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

2. سهولة الاستخدام

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

3. التخصيص المتقدم

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

4. الاستجابة والتوافق

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

5. الأداء الأمثل

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

6. الدعم والتحديثات

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

7. وظائف موسعة

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

---

ما هي صورة نقطة الاتصال؟

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

الميزات الرئيسية

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

تطبيقات عملية

1. الخرائط التفاعلية :
   • غالبًا ما تُستخدم صور النقاط الساخنة لإنشاء خرائط تفاعلية، حيث توفر كل نقطة على الخريطة معلومات إضافية حول مواقع أو مناطق محددة.
2. أدلة المنتج :
   • ويتم استخدامها أيضًا على صفحات المنتج لتسليط الضوء على الميزات المختلفة للمنتج وتقديم تفاصيل إضافية.
3. التصور دي données :
   • يمكن للشركات استخدام صور النقاط الساخنة لتقديم تصورات بيانات تفاعلية، مثل الرسوم البيانية أو الرسوم البيانية، حيث يمكن أن تكشف النقاط المهمة عن بيانات محددة.
4. تحسين تجارب المستخدم :
   • إنها توفر طريقة جذابة لتقديم المعلومات ويمكنها تحسين تجربة المستخدم من خلال جعل الصور أكثر تفاعلية وغنية بالمعلومات.

---

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

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

أولاً، تحتاج إلى تثبيت وحدات Elementor وEssential Addons على WordPress الخاص بك. يمكنك الحصول على الإصدار الاحترافي من Essential Addons من موقعه الرسمي على الويب. بينما بالنسبة لـ Elementor، يمكنك استخدام الإصدار المجاني.

خطوة 1: قم بتثبيت الإضافات الأساسية لـ Elementor

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

• انتقل إلى لوحة تحكم WordPress الخاصة بك.
• اذهب ملحقات> إضافة.
• ابحث عن "الإضافات الأساسية لـ Elementor".
• انقر فني تركيب/تثبيت ثم نشط.
• قم بتنزيل وتثبيت الإصدار المحترف من الإضافات الأساسية التي اشتريتها على موقعه على الانترنت
• أدخل الترخيص
• قم بتمكين عنصر واجهة المستخدم Image Hotspots في إعدادات البرنامج المساعد

انظر أيضا: كيفية استخدام عنصر واجهة مستخدم عالمي في Elementor

الإصدار المجاني من Elementor متاح في دليل وورد البرنامج المساعد حتى تتمكن من تثبيته عن طريق كتابة "elementor" في مربع بحث مثبت المكونات الإضافية (الإضافات -> إضافة).

خطوة 2: إنشاء صفحة جديدة أو تحرير صفحة موجودة

بمجرد تثبيت Elementor و Essential Addons ، قم بإنشاء صفحة جديدة (الصفحات -> إضافة) أو عنصر جديد (العناصر -> إضافة) وتحريره باستخدام Elementor. ستتم إعادة توجيهك إلى محرر Elementor بعد النقر فوق الزر تحرير مع إليمنتور.

قبل إنشاء صور نقطة الاتصال، يمكنك أولاً تحديد التخطيط. للقيام بذلك، افتح لوحة إعدادات الصفحة عن طريق النقر على أيقونة الترس في الشريط العلوي لمحرر Elementor.

اقرأ أيضا: كيفية استخدام عنصر واجهة العنصر

اضبط التخطيط على عنصر العرض الكامل في الحقل قالب الصفحة.

خطوة 3: أضف أداة النقاط الساخنة

1. في محرر Elementor، قم بالتمرير خلال قائمة الأدوات المتاحة في اللوحة اليمنى.
2. ابحث عن القطعة النقاط الساخنة de الإضافات الأساسية.
3. اسحب الأداة إلى منطقة صفحتك حيث تريد أن تظهر الصورة التفاعلية.

الخطوة 4: تكوين الصورة التفاعلية الخاصة بك

1. إضافة صورة : انقر فوق عنصر واجهة المستخدم Hotspots في المحرر. سترى خيارًا لتحميل صورة أو تحديدها من مكتبة WordPress الخاصة بك. اختر الصورة التي تريد جعلها تفاعلية.

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

2. إضافة النقاط الساخنة : بمجرد إضافة الصورة، يمكنك البدء في وضع نقاط الاتصال. انقر فوق إضافة عنصر

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

4. تكوين موقع نقطة الاتصال: انقر فوق علامة التبويب للصفقة لتعيين موضع نقطة الوصول. اضبط مواضع X و Y عن طريق سحب أشرطة التمرير.

4. تمكين عرض تلميح الأدوات : انقر فوق علامة التبويب تلميح لإضافة محتوى تلميح الأداة. يمكنك أيضًا ضبط موضع تلميح الأداة، سواء كان أعلى أو أسفل أو يسارًا أو يمينًا.

5. قسم مفتوح إعدادات تلميح الأداة لتعيين حجم تلميحات الأدوات وتأثير الحركة.

5. تكوين خيارات العرض والنمط : يمكنك تخصيص كيفية ظهور النقاط الفعالة، بما في ذلك حجمها ولونها وشكلها. يمكنك أيضًا ضبط تأثيرات التمرير لتحسين التفاعل.
6. انتقل إلى علامة التبويب "النمط" لتصميم نقاط الاتصال الخاصة بك بالإضافة إلى تلميحات الأدوات. أولا، افتح الخيار صورة لتعيين حجم الصورة.

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

اكتشف أيضًا: كيفية إضافة العناصر ذات الصلة في Elementor

8. افتح قسم تلميحات الأدوات لتخصيص تلميحات الأدوات. يمكنك ضبط لون الخلفية ولون النص والطباعة (حجم الخط وعائلة الخط ونمط الخط) والعرض.

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

خطوة 5: المعاينة والإصدار وآخرون اختبار

1. قبل النشر، استخدم الخيار مسح من Elementor لترى كيف تظهر نقاط الاتصال الخاصة بك في الصورة. تأكد من وضع كل شيء بشكل صحيح وأن المعلومات واضحة.
2. بمجرد رضاك ​​عن النتيجة، انقر فوق نشر ل تحميل صفحتك التفاعلية.
3. تفضل بزيارة الصفحة المنشورة لاختبار التفاعل مع نقاط الاتصال. تأكد من عرض المعلومات بشكل صحيح وأن الروابط تعمل كما هو متوقع.

---

أضف الصور ذات النقاط الفعالة إلى Gutenberg

إذا كنت ترغب في إضافة صور بها نقاط فعالة كمواد دعم للمقالة التي تعمل عليها ، فيمكنك دمجها مع Gutenberg (محرر WordPress الافتراضي) باستخدام المكون الإضافي كتل العنصر لجوتنبرج. يتيح لك هذا المكون الإضافي استخدام قالب Elementor ككتلة Gutenberg.

لحفظ صور نقطة الاتصال أعلاه كقالب قسم Elementor:

1. انقر بزر الماوس الأيمن فوق مقبض القسم وحدد حفظ كقالب.

2. قم بتسمية النموذج الخاص بك وانقر فوق الزر حفظ.

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

---

الأسئلة المتداولة: صور نقطة الاتصال مع الإضافات الأساسية

---

الموارد مماثلة لهذه المادة

• كيفية إنشاء نموذج باستخدام Elementor حراحصل على Elementor Pro الآن !!!
• كيفية إنشاء النوافذ المنبثقة باستخدام Elementor
• Elementor مجاني مقابل Elementor Pro: مقارنة الميزات التفصيلية
• Elementor : كيفية تغيير الصورة بنقرة زر واحدة
• كيفية إنشاء تخطيط مع Elementor

وفي الختام

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

باستعمال الإضافات الأساسية بالنسبة إلى Elementor، فإنك تستفيد من حل بسيط وفعال لدمج نقاط الاتصال هذه في موقع WordPress الخاص بك. بفضل ميزاتها البديهية ومرونتها، تتيح لك Essential Addons إنشاء صور تفاعلية لا تعمل على تجميل موقعك فحسب، بل تعمل أيضًا على تحسين تجربة المستخدم من خلال توفير معلومات إضافية بطريقة سلسة وجمالية.

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

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

هل وجدت هذه المقالة مفيدة؟ شاركها مع زملائك وأصدقائك والذين يمكنهم أيضًا الاستفادة من هذه الميزة. اشترك في مدونتنا للحصول على مزيد من النصائح حول إنشاء مواقع الويب واستخدام Elementor وملحقاته بشكل فعال.

...