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

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

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

هل تحتاج إلى Elementor Pro لإنشاء النوافذ المنبثقة؟

إجابة مختصرة: لا. يعد Popup Builder الخاص بـ Elementor Pro ميزة مدفوعة، ولكنها ليست الطريقة الوحيدة لإضافة النوافذ المنبثقة داخل Elementor.

إليك ما يقدمه لك كل خيار فعليًا:

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

يستحق أن تكون محددًا بشأن كلمة “free” هنا. إن Popup Builder ليس إصدارًا تجريبيًا وليس إصدارًا مختصرًا لوحدة مدفوعة. تبيع Master Addons إصدارًا احترافيًا، لكن Pro يغطي أشياء أخرى: عناصر واجهة مستخدم إضافية ومنشئ عناصر واجهة المستخدم الكامل. توجد النوافذ المنبثقة خارج ذلك.

ما هو برنامج Master Addons Popup Builder؟

Master Addons هو مكون إضافي متكامل للعنصر يستخدمه 30،000+ موقع نشط. يأتي مع 80+ عنصر واجهة مستخدم، أ منشئ الموضوعمكتبة النماذج، أ منشئ القطعةو مجاني منشئ النوافذ المنبثقة. لا يعد Popup Builder عملية شراء منفصلة. قم بتثبيت البرنامج المساعد وهو موجود.

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

لماذا يختار الأشخاص أداة الإنشاء المنبثقة للإضافات الرئيسية المجانية

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

ما هي أنواع النوافذ المنبثقة التي يمكنك بناؤها؟

• الجيل الرئيسي والنوافذ المنبثقة للاشتراك في البريد الإلكتروني
• عروض WooCommerce الترويجية ولافتات البيع وعروض التخلي عن عربة التسوق
• النوافذ المنبثقة للفيديو Lightbox (YouTube، Vimeo، مستضافة ذاتيًا)
• معرض الصور Lightbox
• أشرطة الإعلان واللافتات العليا
• النوافذ المنبثقة لتسجيل الدخول والتسجيل
• موافقة ملفات تعريف الارتباط وإشعارات اللائحة العامة لحماية البيانات
• التعليقات، NPS، والنوافذ المنبثقة للمسح
• النوافذ المنبثقة المشروطة للشروط أو تفاصيل التسعير أو معلومات المنتج

المشغلات الخمسة المنبثقة في الإضافات الرئيسية

1. على تمرير الزناد

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

2. مشغل تحميل الصفحة

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

3. الخروج من الزناد النية

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

4. عند النقر على الزناد

يتم فتح النافذة المنبثقة فقط عندما ينقر الزائر على زر أو صورة أو رابط معين. إنها أسهل طريقة لإنشاء نموذج النقر للفتح بدون لمس الكود، وهو البديل المجاني لـ elementor/popup/show حدث JavaScript مغطى في القسم التالي.

5. بعد مشغل عدم النشاط

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

كيفية استخدام العنصر/النافذة المنبثقة/عرض الحدث (والبديل المجاني)

يكشف Elementor Pro عن حدث JavaScript يسمى elementor/popup/show. يستخدمه المطورون لتشغيل نافذة منبثقة من التعليمات البرمجية: قم بتشغيل نافذة منبثقة بعد إرسال نموذج مخصص، أو استجابة AJAX، أو زر موجود خارج محرر Elementor.

يبدو النمط الأساسي في Elementor Pro كما يلي

jQuery( document ).on( 'elementor/popup/show', ( event, id, instance ) => {
    // your code runs when popup with this ID is shown
    console.log( 'Popup opened:', id );
} );

// To open a popup programmatically in Elementor Pro:
elementorProFrontend.modules.popup.showPopup( { id: 1234 } );

إذا كنت تستخدم Elementor مجانًا، فلن تتمكن من الوصول إليه elementorProFrontend.modules.popup.showPopup. أنت أيضًا لا تحتاج إليه في معظم حالات الاستخدام. الإضافات الرئيسية على انقر يتعامل الزناد مع العناصر الشائعة محليًا:

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

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

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

كيفية تشغيل نافذة منبثقة للعنصر عند النقر على الزر (مجاني)

أحد الطلبات الأكثر شيوعًا، لذا إليك الإعداد الدقيق

1. قم بإنشاء النافذة المنبثقة في Master Addons وPopup Builder وقم بتصميمها.
2. في إعدادات النافذة المنبثقة، قم بتبديل المشغل إلى على انقر.
3. أدخل محدد CSS في حقل التشغيل، على سبيل المثال .open-signup-popup.
4. انتقل إلى الصفحة أو القالب باستخدام الزر. تحرير عنصر واجهة المستخدم الخاص بالزر المتقدمة، فئات CSS الحقل والإضافة open-signup-popup (بدون نقطة، فقط اسم الفصل).
5. احفظ كليهما. كل زر في هذا الفصل يفتح الآن النافذة المنبثقة، في أي مكان على الموقع.

يعمل نفس المحدد على صف أو عمود أو عنوان أو رمز أو أي عنصر يمكنك إعطاء فئة له. هذه هي الطريقة التي تحصل بها على سلوك مطابق لـ elementor/popup/show دون كتابة سطر من جافا سكريبت. شيء واحد يجب مشاهدته: إذا كنت تستخدم محدد معرف مثل #open-popup، تأكد من عدم مشاركة أي عنصر آخر في الصفحة للمعرف، وإلا فسيتم النقر فوق إطلاق النار من العنصر الخطأ.

قوالب Elementor المنبثقة المجانية: 100+ تصميم جاهز للاستيراد

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

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

خطوة بخطوة: كيفية إضافة نافذة منبثقة في Elementor باستخدام الإضافات الرئيسية

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

1. افتح لوحة تحكم WordPress والمكونات الإضافية وأضف جديدًا.
2. ابحث عن إضافات “Master لـ Elementor”.
3. انقر ثبت الآنإذن تفعيل.
4. جديد الإضافات الرئيسية يظهر العنصر في الشريط الجانبي لـ WordPress.

إذا لم يظهر عنصر الشريط الجانبي على الفور، فقم بتحديث المسؤول (Ctrl+Shift+R /Cmd+Shift+R). يتم تعليق بعض المكونات الإضافية للتخزين المؤقت على قائمة المسؤول القديمة لمدة دقيقة.

الخطوة 2: افتح منشئ النوافذ المنبثقة

1. اذهب الى الإضافات الرئيسية، منشئ النوافذ المنبثقة.
2. انقر إضافة نافذة منبثقة جديدة.
3. أعط النافذة المنبثقة اسمًا وصفيًا (على سبيل المثال، النشرة الإخبارية، منشورات المدونة).
4. انقر تحرير باستخدام العنصر.

الخطوة 3: اختر قالبًا أو ابدأ من الصفر

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

الخطوة 4: تصميم المحتوى المنبثق

1. اسحب عناصر واجهة المستخدم Elementor: العنوان، محرر النص، الزر، الصورة، النموذج.
2. لالتقاط البريد الإلكتروني، استخدم أداة النموذج وقم بتوصيله بخدمة البريد الإلكتروني الخاصة بك.
3. أضف مؤقت العد التنازلي أو الرمز أو الفيديو باستخدام عناصر واجهة المستخدم الأساسية Elementor أو Master Addons.
4. اضبط الخطوط والألوان والحشو والتباعد في علامات التبويب "النمط" و"المتقدم".
5. قم بالمعاينة على عرض الهاتف المحمول والكمبيوتر اللوحي للتأكد من أن التخطيط لا يزال يعمل.

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

1. انقر فوق أيقونة الترس الموجودة أسفل يسار المحرر لفتحها إعدادات.
2. افتح ال الزناد علامة تبويب.
3. اختر أحد المشغلات الخمسة: عند النقر، تحميل الصفحة، نية الخروج، عند التمرير، بعد عدم النشاط.
4. املأ الإعدادات الخاصة بالمشغل: نسبة التمرير، أو ثواني التأخير، أو محدد النقر، أو مدة عدم النشاط.

الخطوة 6: ضبط شروط العرض (حيث تظهر النوافذ المنبثقة)

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

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

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

الخطوة 7: النشر والاختبار

1. انقر ينشر أو تحديث في أسفل يسار المحرر.
2. افتح الصفحة التي يجب أن تعرض النافذة المنبثقة في نافذة متصفح عادية (وليس معاينة المحرر).
3. قم بتشغيل النافذة المنبثقة بالطريقة التي قمت بتكوينها بها: انقر فوق الزر، أو قم بالتمرير، أو انتظر، أو تحرك نحو علامة التبويب "إغلاق".
4. التحقق من السلوك المستجيب على هاتف حقيقي. معاينة المحرر قريبة ولكنها ليست دقيقة.
5. مراقبة تقديم النماذج ومعدلات التحويل للأسبوع الأول.

لماذا لا تظهر النافذة المنبثقة

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

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

الإضافات الرئيسية مقابل Elementor Pro Popup Builder

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

وزن الخيارات الأخرى أيضا؟ قارن بين أفضل الأدوات جنبًا إلى جنب في تقريرنا التقريبي أفضل المكونات الإضافية لمنشئ النوافذ المنبثقة لـ WordPress.

لمن يعمل هذا الإعداد بشكل أفضل

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

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