يعد توقيت النافذة المنبثقة حسب نسبة الصفحة أمرًا جيدًا حتى تحتاج إلى الهبوط في مكان واحد بالضبط. ربما تريد ذلك في اللحظة التي يصل فيها شخص ما إلى كتلة التسعير الخاصة بك، أو صف الشهادات، أو نطاق الاتصال إلى الإجراء، وليس 40% غامضًا أسفل الصفحة. ال ماستر الإضافات المنبثقة منشئ يعالج ذلك مع على التمرير إلى العنصر مشغل. أنت تعطي النافذة المنبثقة معرف CSS مع #، ثم ضع نفس المعرف، بدون #، على العنصر الذي تريد أن يكون بمثابة الزناد.
إليك الإعداد الكامل في Master Addons Popup Builder، والذي يأتي مجانًا مع Master Addons for Elementor. إذا كان المشغل القائم على النسبة المئوية هو كل ما تحتاجه، فإن دليل خيارات الزناد المنبثق يغطي هذا واحد.
قبل أن تبدأ #
- نافذة منبثقة مدمجة بالفعل في Master Addons Popup Builder (راجع دليل الإعدادات المنبثقة لإنشاء واحدة)
- صفحة تحتوي على العنصر الذي تريد استخدامه كمشغل تمرير
- العنصر مثبت ونشط
- الإضافات الرئيسية للعنصر مثبتة ونشطة (دليل التثبيت)
الخطوة 1: قم بتعيين النافذة المنبثقة لفتحها عند التمرير إلى العنصر #
افتح النافذة المنبثقة في Elementor وانتقل إلى إعدادات MA المنبثقة لوحة. تحت إعدادات، التبديل افتح النافذة المنبثقة إلى على التمرير إلى العنصر. يظهر حقل جديد: محدد العنصر.
يوضح التلميح الموجود أسفل الحقل ما يريده، وهو محدد CSS للعنصر الذي يقوم بتشغيل النافذة المنبثقة عند التمرير، مثل #my-id أو .my-class.
الخطوة 2: أدخل محدد معرف CSS (مع علامة #) #
في ال محدد العنصر الحقل، اكتب معرف CSS الذي يبدأ بـ #. ها هو #show-popup. احتفظ بالاسم قصيرًا وفريدًا حتى تتمكن من إعادة استخدامه على الصفحة دون التعارض مع أي شيء آخر.
ال # يقوم بعمل حقيقي: فهو يخبر النافذة المنبثقة بمراقبة العنصر الذي يكون معرفه show-popup. نشر (أو تحديث) النافذة المنبثقة لحفظها.
الخطوة 3: أضف نفس المعرف إلى العنصر المستهدف (بدون علامة #) #
افتح الآن الصفحة التي يجب أن يتم تشغيل النافذة المنبثقة فيها وقم بتحريرها في Elementor. انقر فوق العنصر الذي تريده كمشغل، وهنا كتلة القسم الموجودة على الصفحة، وافتحها متقدم علامة تبويب.
ابحث عن معرف CSS أدخل الحقل في علامة التبويب "متقدم" واكتب نفس الاسم الذي استخدمته في النافذة المنبثقة، ولكن بدون ال #، لذلك فقط show-popup. هذا الاختلاف البسيط هو الحيلة بأكملها
- محدد العنصر المنبثق:
#show-popup(مع التجزئة) - معرف CSS الخاص بالعنصر:
show-popup(لا تجزئة)
ال # هو جزء من محدد CSS، وليس جزءًا من المعرف، ولهذا السبب ينتمي إلى الحقل المنبثق ولكن ليس أبدًا في حقل معرف CSS الخاص بالعنصر. قم بتحديث الصفحة للحفظ. شيء واحد يجب مشاهدته: لا تعيد استخدام معرف تم توصيله بالفعل برابط ربط أو CSS مخصص في مكان آخر، وإلا ستحصل على مفاجآت.
الخطوة 4: المعاينة والتمرير إلى العنصر #
افتح الصفحة في الواجهة الأمامية وابدأ بالتمرير. لا شيء في الأعلى. الثاني العنصر الذي يحمل show-popup يتم تمرير المعرف إلى العرض، ويتم فتح النافذة المنبثقة فوق الصفحة.
هل تريد عدة نقاط تمرير لتشغيل نفس النافذة المنبثقة؟ أعط كل عنصر نفس معرف CSS، show-popupومنهم من ينفجر.
استكشاف الاخطاء #
- النافذة المنبثقة لا تفتح أبدا؟ تحقق من التجزئة. احتياجات محدد العناصر المنبثقة
#show-popup، واحتياجات معرف CSS للعنصرshow-popupبدون تجزئة. - هل استخدمت # في حقل معرف CSS؟ أخرجه. يريد حقل معرف Elementor CSS الاسم العادي فقط.
- عنصرين لهما نفس المعرف؟ يعد هذا أمرًا جيدًا للتشغيل، لكن لا تقم بإعادة استخدام المعرف الذي يتعامل بالفعل مع CSS أو روابط التثبيت على الصفحة.
- المنبثقة لا تظهر على الإطلاق؟ تأكد من تشغيل تنشيط النافذة المنبثقة وأن شروط العرض الخاصة بها تتضمن الصفحة التي تحتوي على عنصر التشغيل.
الأسئلة المتداولة #
كيف يمكنني فتح نافذة منبثقة عند التمرير إلى عنصر معين في Elementor؟
قم بتعيين خيار Open Popup الخاص بالنافذة المنبثقة على On Scroll to Element وأدخل معرف CSS مثل #show-popup في حقل Element Selector. ثم أضف نفس المعرف، بدون #، إلى حقل معرف CSS الخاص بالعنصر المستهدف في علامة التبويب "متقدم" في Elementor.
لماذا أقوم بإضافة # في النافذة المنبثقة ولكن ليس على العنصر؟
يتوقع حقل Element Selector محدد CSS، ويمثل # محدد معرف. يتوقع حقل معرف Elementor CSS اسم المعرف فقط. لذلك تستخدم #show-popup في النافذة المنبثقة وshow-popup في العنصر.
هل يمكنني تشغيل النافذة المنبثقة من أكثر من عنصر؟
نعم. امنح كل عنصر نفس معرف CSS، ويتم تشغيل النافذة المنبثقة عندما يقوم الزائر بالتمرير إلى أي منها. يكون هذا مفيدًا عندما يكون لديك عدة أقسام من المفترض أن تؤدي جميعها إلى نفس العرض.
ما الفرق بين On Scroll وOn Scroll to Element؟
يتم تشغيل التمرير بعد قيام الزائر بتمرير نسبة مئوية محددة من الصفحة. يتم تشغيل التمرير إلى العنصر عند ظهور عنصر محدد، وهو أكثر دقة عندما تريد ربط النافذة المنبثقة بقسم محدد.
هل أحتاج إلى Elementor Pro لهذا؟
رقم يعمل برنامج Master Addons Popup Builder مع الإصدار المجاني من Elementor، لذا يعمل مشغل On Scroll to Element وطريقة معرف CSS بدون Elementor Pro.
