كيفية إضافة نافذة منبثقة في Elementor مجانًا (لا يلزم وجود Elementor Pro)

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

يتناول هذا الدليل الأمر برمته، مع لقطات شاشة تم التقاطها على Elementor 4.2.4 وMaster Addons 3.2. ويغطي أيضًا الأجزاء التي تتخطاها معظم البرامج التعليمية: المشغلات المجانية بالفعل، وكيفية الاحتفاظ بالنافذة المنبثقة من كل صفحة عندما يكون استهداف الصفحة ميزة احترافية، وواجهة برمجة تطبيقات JavaScript التي تحل محلها elementorProFrontend.modules.popup.showPopup عندما لا يكون لديك Pro.

هل يحتوي Elementor free على منشئ منبثق؟

يأتي منشئ النوافذ المنبثقة الخاص بـ No. Elementor مزودًا بـ Elementor Pro فقط. قم بتثبيت Elementor مجانًا ولا يوجد عنصر النوافذ المنبثقة في أي مكان في القائمة، و elementor/popup/show الحدث غير موجود على الصفحة.

لديك ثلاث طرق للخروج:

الإضافات الرئيسية هي الخيار الذي يتم تناوله هنا لأن النافذة المنبثقة مدمجة في نفس لوحة Elementor التي تستخدمها بالفعل، لذلك لا يوجد محرر ثانٍ لتتعلمه. إنه مكون إضافي مجاني على WordPress.org قيد التشغيل 30،000+ موقعويأتي Popup Builder مع التنزيل المجاني.

إذا كنت تفضل مقارنة عدة أدوات أولاً، فإننا نحتفظ بتقرير منفصل عن أفضل المكونات الإضافية لمنشئ النوافذ المنبثقة لـ WordPress.

ما يقدمه لك منشئ النوافذ المنبثقة المجاني بالفعل

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

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

كيفية إضافة نافذة منبثقة في Elementor مجانًا، خطوة بخطوة

الخطوة 1: تثبيت العنصر والإضافات الرئيسية

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

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

الخطوة 2: افتح الإضافات الرئيسية → منشئ النوافذ المنبثقة

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

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

الخطوة 3: قم بتسمية النافذة المنبثقة وتشغيل التنشيط

انقر إضافة نافذة منبثقة جديدة. مربع حوار صغير يفتح بحقلين.

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

الخطوة 4: قم بتعيين مكان ظهور النافذة المنبثقة

التبديل إلى شروط علامة التبويب في نفس مربع الحوار.

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

انقر الآن تحرير باستخدام العنصر.

الخطوة 5: ابدأ من قالب أو لوحة قماشية فارغة

يفتح المحرر بإطار منبثق فارغ. يوجد في منطقة الإسقاط زر Master Addons أرجواني بجوار أزرار الإضافة الخاصة بـ Elementor. انقر عليه لفتح مكتبة القوالب المنبثقة.

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

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

الخطوة 6: تصميم النافذة المنبثقة

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

بعض الأشياء التي تستحق القيام بها هنا:

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

الخطوة 7: اختر المشغل

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

تم إدراج سبعة مشغلات. تحميل الصفحة هو الحر، و التأخير بعد تحميل الصفحة (ثانية) يقبل أي شيء من 0 إلى 60 في خطوات من 0.1. ثانيتان إلى ثلاث ثوان هي نقطة بداية معقولة. يؤدي إطلاق النار على الفور إلى إزعاج الأشخاص الذين لديهم اتصالات بطيئة، وأي شيء يتجاوز العشر ثوانٍ عادةً ما يفتقد الزائر تمامًا.

تحته، إظهار التأخير مرة أخرى يتحكم في مدة الانتظار قبل عرض النافذة المنبثقة مرة أخرى للشخص الذي أغلقها. مجاني يمنحك عدم التأخير، 1 و3 و5 دقائق. يقوم Pro بتمديد ذلك إلى ساعات وأيام وشهر ولا تظهر مرة أخرى.

تعطيل تمرير الصفحة مجاني ويتم تعيينه افتراضيًا على نعم، والذي يقوم بقفل الصفحة خلف النافذة المنبثقة.

الخطوة 8: اضبط التخطيط والموضع والرسوم المتحركة

افتح ال تخطيط القسم في نفس اللوحة. كل ذلك مجاني.

عرض باسم تبديل النافذة المنبثقة بين ثلاثة أشكال:

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

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

الخطوة 9: قم بنشره واختباره على الواجهة الأمامية

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

اختبار في نافذة خاصة بدلا من معاينة المحرر. يقوم المحرر بقمع النوافذ المنبثقة عمدًا، وقد تخدمك علامة تبويب المتصفح العادية صفحة مخزنة مؤقتًا.

إظهار نافذة منبثقة في صفحة واحدة فقط مجانًا

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

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

قاعدتان يجب معرفتهما:

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

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

المشغلات السبعة المنبثقة، وأي منها تحصل عليها مجانًا

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

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

كيفية تشغيل نافذة Elementor المنبثقة بنقرة زر واحدة

هذا هو المشغل الأكثر طلبًا بعد تحميل الصفحة، وهو المشغل الذي يحاول الأشخاص غالبًا تزييفه باستخدام JavaScript. مع Master Addons Pro، فهو حقل نصي.

1. تصميم وحفظ النافذة المنبثقة كالمعتاد.
2. في إعدادات MA المنبثقة، تعيين افتح النافذة المنبثقة إلى على انقر.
3. في فتح بواسطة المحدد، اكتب المحدد بما في ذلك النقطة، على سبيل المثال .open-newsletter-popup.
4. قم بتحرير الزر الذي يجب أن يفتحه. انتقل إلى متقدم → فئات CSS ونوع open-newsletter-popupهذه المرة بدون النقطة.
5. قم بتحديث كليهما، ثم اختبرهما على الواجهة الأمامية.

يؤدي عدم تطابق النقطة في الخطوتين 3 و4 إلى عدم قيام معظم مشغل النقر “my بأي شيء من تقارير” التي نراها. يأخذ حقل المشغل محدد CSS، ويأخذ حقل العنصر اسم فئة.

لا يقتصر المحدد على الأزرار. أي عنصر يمكنك منحه فئة للعمل: حاوية، عنوان، رمز، صورة. يمكنك أيضًا استهداف رابط موجود باستخدام محدد سمة مثل a[href="#pricing-popup"]. هناك علاقة ذات صلة القطعة الزناد المنبثقة لوضع إجراءات الإغلاق وإعادة التوجيه داخل النافذة المنبثقة نفسها.

بدون Pro، أربعة أسطر من JavaScript تقوم بنفس المهمة. هذا الكود موجود في القسم التالي.

حدث العنصر/المنبثق/العرض، وما الذي يحل محله بدون Pro

elementorProFrontend.modules.popup.showPopup و ال elementor/popup/show ينتمي كلا الحدثين إلى Elementor Pro. تسجل الوحدة المنبثقة نفسها على elementorProFrontend كائن، لذلك في التثبيت المجاني، يكون هذا الكائن غير محدد ولا يتم تشغيل الحدث أبدًا. لا يوجد مقتطف يعيده، لأن الكود الذي سينبعث منه موجود في البرنامج المساعد Pro.

يقوم البرنامج الإضافي Master Addons المجاني بشحن واجهة برمجة التطبيقات الخاصة به والتي تغطي نفس الأرضية.

يكشف Master Addons عن عالمي يسمى JltmaPopups في أي صفحة توجد بها نافذة منبثقة. هنا هو التعيين:

تتم طباعة كل نافذة منبثقة باستخدام معرف DOM jltma-popup-id-<post ID>. معرف المنشور هو الرقم الموجود في الرمز القصير الموجود على شاشة قائمة Popup Builder. لفتح النافذة المنبثقة 441 من الكود الخاص بك:

jQuery(function ($) {
  var $popup   = $('#jltma-popup-id-441');
  var settings = JltmaPopups.getLocalStorage(441);

  JltmaPopups.openPopup($popup, settings);
});

لتوصيل ذلك بنقرة واحدة، وهو البديل المجاني لمشغل On Click:

jQuery(function ($) {
  $(document).on('click', '.open-newsletter-popup', function (e) {
    e.preventDefault();

    var $popup   = $('#jltma-popup-id-441');
    var settings = JltmaPopups.getLocalStorage(441);

    JltmaPopups.openPopup($popup, settings);
  });
});

ولإغلاقه مرة أخرى:

JltmaPopups.closePopup(jQuery('#jltma-popup-id-441'));

ثلاثة أشياء يجب مشاهدتها:

• getLocalStorage() يعود false حتى تتم تهيئة النافذة المنبثقة على الصفحة، وهو ما يحدث على DOM جاهزًا. قم بتشغيل الكود الخاص بك بالداخل jQuery(function ($) { ... }) وأنت بخير.
• يجب أن تكون النافذة المنبثقة على الصفحة حتى يعمل أي من هذا. إما أن تتضمن حالتها الصفحة، أو أنك وضعتها مع الرمز القصير.
• يتم تخطي البرنامج النصي داخل محرر Elementor عن قصد، لذا قم باختباره على الواجهة الأمامية.

لماذا يتم تشغيل العنصر/المنبثق/العرض مرتين

في Elementor Pro، يعني تشغيل المعالج مرتين دائمًا أنه تم ربطه مرتين: مرة واحدة elementor/frontend/init ومرة أخرى في مقتطف أو ملف سمة، أو مرة واحدة لكل مثيل منبثق عند وجود عدة مثيلات. احرسه بعلامة، أو اربطه .off('elementor/popup/show').on(...) قبل إعادة الربط. العنصر الخاص توثيق الأحداث المنبثقة يسرد التوقيع الكامل للحدث.

لا يحتوي ما يعادل Master Addons على حدث مستند للربط المزدوج، لذلك لا يتم ترحيل المشكلة. أنت تتصل openPopup() مباشرة في اللحظة التي تريد فيها فتح النافذة المنبثقة.

لماذا لا تظهر النافذة المنبثقة Elementor الخاصة بك

بترتيب تقريبي لعدد المرات التي يتبين فيها أن كل واحد هو السبب:

1. التنشيط معطل. افتح الإضافات الرئيسية → Popup Builder وتحقق من عمود الحالة. غير نشط يعني عدم عرض أي شيء في أي مكان، بما في ذلك الرمز القصير.
2. النافذة المنبثقة لا تزال مسودة. حفظ التصميم في Elementor ليس مثل نشر النافذة المنبثقة.
3. أنت تختبر في معاينة المحرر. يتم منع النوافذ المنبثقة هناك حسب التصميم. استخدم نافذة خاصة.
4. ذاكرة التخزين المؤقت. قم بتنقية البرنامج الإضافي للتخزين المؤقت وشبكة CDN، ثم أعد التحميل في نافذة خاصة. لن تحتوي صفحة HTML المخزنة مؤقتًا على نافذة منبثقة منشورة حديثًا.
5. عرض مرة أخرى تم إطلاق التأخير بالفعل. بمجرد إغلاق النافذة المنبثقة، يقوم البرنامج المساعد بتخزين طابع زمني في مخزن المتصفح. مسح بيانات الموقع أو تبديل المتصفحات عند الاختبار بشكل متكرر.
6. عدم تطابق النقطة في محدد النقر. يريد حقل الزناد .my-class، يريد حقل فئات Elementor CSS my-class.
7. الخروج بقصد على الهاتف. لا يوجد مؤشر، لذلك لا شيء يشتعل. سطح المكتب فقط.

الإضافات الرئيسية مقابل النوافذ المنبثقة Elementor Pro

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

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

القراءة ذات الصلة

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