في بعض الأحيان لا تريد تحميل نافذة منبثقة بمفردها. تريد أن يفتح فقط عندما ينقر شخص ما على زر أو رابط. ال ماستر الإضافات المنبثقة منشئ يفعل هذا مع على انقر الزناد ومحدد معرف CSS. قمت بتعيين المعرف على النافذة المنبثقة، ثم أضف نفس المعرف إلى أي عنصر Elementor، والنقر فوق هذا العنصر يفتح النافذة المنبثقة.
ما هي النافذة المنبثقة عند النقر في Elementor؟ #
النافذة المنبثقة التي يتم النقر عليها في Elementor هي نافذة منبثقة تظل مخفية حتى ينقر الزائر على عنصر معين، مما يجعل الزر أو الرابط أو الصورة أو الرمز يمثل بدلاً من الظهور بمفرده عند تحميل الصفحة. ال ماستر الإضافات المنبثقة منشئ يبني واحدة مع على انقر المشغل: أنت تعطي النافذة المنبثقة CSS محدد الهوية مثل #sale-popup، ثم أضف نفس المعرف (بدون #) إلى حقل معرف CSS الخاص بأي عنصر Elementor. نظرًا لأن المطابقة تتم على المعرف وحده، يمكن تشغيل نافذة منبثقة واحدة من أي عدد تريده من العناصر مثل 20000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 عناصر واجهة المستخدم والإضافات الرئيسية لمعرفة ما يمكنك وضعه داخل واحدة.
قبل أن تبدأ #
يجب أن تكون هناك ثلاثة أشياء في مكانها الصحيح قبل إعداد نافذة منبثقة عند النقر: نافذة منبثقة مدمجة بالفعل في Master Addons Popup Builder، وElementor مثبت ونشط، وMaster Addons for Elementor مثبت ونشط. ثم يستغرق الإعداد بأكمله حقلين وحوالي دقيقة.
- نافذة منبثقة مدمجة بالفعل في Master Addons Popup Builder (راجع دليل الإعدادات المنبثقة لإنشاء واحدة)
- العنصر مثبت ونشط
- الإضافات الرئيسية للعنصر مثبتة ونشطة (دليل التثبيت)
الخطوة 1: اضبط النافذة المنبثقة على فتح عند النقر #
افتح النافذة المنبثقة في Elementor وانتقل إلى إعدادات MA المنبثقة لوحة. تحت إعدادات، تغيير افتح النافذة المنبثقة إلى على انقر. يظهر حقل جديد: فتح بواسطة المحدد.
في هذا الحقل، اكتب معرف CSS مع علامة #، على سبيل المثال #sale-popup. هذا هو المحدد الذي يقوم بتشغيل النافذة المنبثقة. حافظ على الاسم بسيطًا وفريدًا بحيث يسهل إعادة استخدامه.

الخطوة 2: أضف معرف CSS إلى عنصر العنصر #
انتقل الآن إلى الصفحة التي تريد المشغل فيها وقم بتحريرها في Elementor. اختر أي عنصر، والزر يعمل بشكل جيد، وافتحه متقدم علامة التبويب. ابحث عن معرف CSS الحقل وأدخل نفس الاسم، ولكن بدون علامة # هذه المرة، لذلك sale-popup.
يؤدي هذا الاختلاف إلى رفع الأشخاص: يستخدم Open By Selector الخاص بالنوافذ المنبثقة #sale-popup، بينما يستخدم معرف CSS الخاص بالعنصر sale-popup. ال # هو جزء من بناء جملة المحدد، وليس جزءا من المعرف.

الخطوة 3: المعاينة والنقر #
قم بتحديث الصفحة، ثم قم بمعاينتها في الواجهة الأمامية. سترى الزر الخاص بك (المسمى هنا “Click to Open Popup”) موجودًا في التخطيط، مع عدم وجود نافذة منبثقة في الأفق بعد.

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

استكشاف الاخطاء #
- لا شيء يحدث عند النقر؟ تأكد من تطابق المعرفات:
#sale-popupفي النافذة المنبثقة افتح بواسطة المحدد، وsale-popup(لا #) في معرف CSS الخاص بالعنصر. - النافذة المنبثقة غير نشطة؟ تأكد من أن النافذة المنبثقة التنشيط قيد التشغيل وشروط العرض الخاصة به تتضمن الصفحة التي تحتوي على الزر.
- هل استخدمت # في حقل معرف CSS؟ قم بإزالته. يأخذ معرف Elementor CSS الاسم العادي فقط.
الأسئلة المتداولة #
كيف يمكنني فتح نافذة منبثقة لـ Master Addons عند النقر؟
في لوحة إعدادات MA Popup، قم بتعيين Open Popup to On Click وأدخل معرف CSS مثل #sale-popup في حقل Open By Selector. ثم أضف نفس المعرف، بدون #، إلى حقل معرف CSS الخاص بالعنصر في علامة التبويب "متقدم" الخاصة بـ Elementor.
لماذا أقوم بإضافة # في مكان واحد دون الآخر؟
يتوقع حقل Open By Selector محدد CSS، ويمثل # محدد معرف. يتوقع حقل معرف Elementor CSS اسم المعرف فقط. لذلك تستخدم #sale-popup في النافذة المنبثقة وsale-popup في العنصر.
هل يمكنني تشغيل النافذة المنبثقة من أكثر من زر واحد؟
نعم. امنح كل زر أو عنصر نفس معرف CSS، ثم يفتح كل زر نفس النافذة المنبثقة عند النقر. يمكنك مزج الأزرار والروابط والعناصر الأخرى.
هل يمكنني فتح نافذة منبثقة من رابط نصي بدلاً من الزر؟
نعم. يعمل أي عنصر بمعرف CSS المطابق، بما في ذلك رابط أو صورة أو رمز. أضف المعرف في علامة التبويب "متقدم" الخاصة بهذا العنصر وسيصبح مشغلًا.
هل أحتاج إلى Elementor Pro لنافذة منبثقة عند النقر؟
رقم يعمل برنامج Master Addons Popup Builder مع الإصدار المجاني من Elementor، لذا يعمل مشغل On Click وطريقة CSS ID بدون Elementor Pro.