كيفية إنشاء نافذة منبثقة بسهولة باستخدام Elementor
نشرت: 2022-09-15Elementor هو مكون إضافي مشهور في WordPress يسمح لك بإنشاء صفحات ومنشورات جميلة بسهولة بالسحب والإفلات. أحد الأشياء الرائعة في Elementor هو أنه يأتي مع أداة إنشاء النوافذ المنبثقة المضمنة. هذا يعني أنه يمكنك بسهولة إنشاء نوافذ منبثقة باستخدام Elementor دون الحاجة إلى استخدام مكون إضافي منبثق منفصل . في هذه المقالة ، سنوضح لك كيفية إنشاء نافذة منبثقة بسهولة باستخدام Elementor. سنوضح لك أيضًا كيفية تصميمه ليلائم تصميم موقعك.
يجعل Elementor من السهل إنشاء نافذة منبثقة. باستخدام Elementor ، يمكنك إنشاء نافذة منبثقة بوظيفة السحب والإفلات. علاوة على ذلك ، تتوفر قواعد متقدمة على المنصة. لعرض النافذة المنبثقة عندما ينقر المستخدم على زر ، افتح علامة التبويب المشغلات وحدد عند النقر. يلغي Elementor Pro الحاجة إلى تثبيت مكون إضافي منبثق. يمكنك إنشاء أي نوع من النوافذ المنبثقة باستخدام Popup Builder في Elementor. فيما يلي بعض الأمثلة على النوافذ المنبثقة التي أنشأناها مؤخرًا: نافذة منبثقة للحث على اتخاذ إجراء كما أنشأناها للتو ، ونموذج تسجيل منبثق ، وشريط إعلام ، وزر مشاركة اجتماعية.
هل يحتوي Elementor على نوافذ منبثقة؟

تتوفر النوافذ المنبثقة في مكتبة Elementor's Library ، والتي تأتي مع مجموعة متنوعة من العناصر المصممة مسبقًا. اختر تخطيطًا يرضي العين وعمليًا ، مثل شاشة كاملة أو مشروط أو منزلق للداخل أو شريط علوي أو سفلي أو مخطط تستمتع به. اجعل النافذة المنبثقة الخاصة بك مخصصة كما تريدها وخاصتك تمامًا.
قد يكون إنشاء نوافذ WordPress المنبثقة المخصصة أمرًا صعبًا في بعض الأحيان. يمكّنك المكون الإضافي منشئ الصفحة من Elementor من تخصيص النوافذ المنبثقة وإنشائها بسرعة وسهولة. تسمح لك النماذج المنبثقة بالتقاط عناوين البريد الإلكتروني والترويج للمبيعات والقيام بأشياء أخرى. باتباع الخطوات الموضحة في هذا الدليل ، ستتمكن من تحديد نوع العنصر المنبثق المناسب لك. في السابق ، سمحت ميزة Modal Popup في المكون الإضافي Essential Addons for Elementor للمستخدمين بإنشاء نماذج منبثقة مجانًا. ستتمكن من تحقيق ذلك باستخدام برنامج Elementor Pro المجاني في هذه المقالة. قبل أن تبدأ في تصميم النوافذ المنبثقة ، يجب عليك أولاً شراء وتنشيط Elementsor Pro.
لتنشيط المشغل الخاص بك ، ستحتاج إلى تحديد معلماته. عند تحديد On Page Load ، على سبيل المثال ، ستظهر النافذة المنبثقة في أقل من ست ثوانٍ. يتيح لك On Scroll تحديد الاتجاه الذي يحتاج المستخدم إلى التمرير إليه. عندما يكون المستخدم خاملاً في صفحتك لفترة زمنية محددة ، تتيح لك خاصية Inactivity في النافذة المنبثقة تنشيطها. بعد فتح النافذة المنبثقة ، انتقل إلى عرض القواعد في محرر Elementor. عندما يرى المستخدمون النموذج الخاص بك ، سيسمح لك الإعداد المتقدم بتعديل مظهره. قد تساعدك هذه الميزة في تخصيص التسويق الخاص بك لأولئك الذين سبق لهم زيارة موقع الويب الخاص بك ، بدلاً من أولئك الذين لم يسبق لهم زيارة موقع الويب الخاص بك.
قد يرى المستخدمون النافذة المنبثقة الخاصة بك مرة واحدة فقط إذا تم تمكين خيار العرض حتى X مرة. يحتوي كل من Elementor و JetPopUp على واجهة سحب وإفلات ، مما يجعل JetPopUp مكونًا إضافيًا بسيطًا وسهل الاستخدام. باستخدام Popup Box Widget ، يمكنك تصميم النوافذ المنبثقة الديناميكية التي تتضمن عناصر ديناميكية مثل مقاطع الفيديو والصور وخرائط Google. إذا كنت ترغب في إضافة رسوم متحركة ثلاثية الأبعاد إلى النوافذ المنبثقة ، يمكنك استخدام تنسيق الصحيفة أو التكبير. Lightbox هو أداة رائعة لـ Elementor إذا كنت تستخدم الأداة Essential Addons for Elementor. أنشئ النوافذ المنبثقة بميزاتها التفاعلية ، مثل مقاطع الفيديو والصور والرسوم المتحركة. هناك أكثر من 70 عنصر واجهة مستخدم وسبعة ملحقات متاحة كجزء من خطة الاشتراك السنوية البالغة 39.97 دولارًا. يمكنك استخدام كل من أدوات Elementor المجانية والمدفوعة لإنشاء النوافذ المنبثقة.
العنصر المنبثق على زر انقر فوق

يمكن أن يكون العنصر المنبثق عند النقر فوق الزر مفيدًا حقًا إذا كنت تريد عرض رسالة منبثقة أو نموذج عند النقر فوق الزر. يمكن أن يكون هذا مفيدًا حقًا إذا كنت ترغب في جذب العملاء المحتملين أو حث الأشخاص على الاشتراك في رسالتك الإخبارية. لإعداد هذا ، كل ما عليك فعله هو إنشاء عنصر زر ثم إضافة عنصر منبثق إليه.
يسمح لك Elementor بإنشاء نوافذ منبثقة أثناء النقر فوق الزر. يمكن استخدام Elementor Pro فقط لتحقيق ذلك. يمكنك استخدام الإصدار المحترف من Elementor لإنشاء موقع الويب الخاص بك عن طريق تخصيص مجموعة متنوعة من القوالب واستخدامها. إذا كنت ترغب في تجربة تأثيرات التمرير على الأزرار الموجودة في النافذة المنبثقة ، فراجع البرنامج التعليمي Elementor Underline On Hover. 2- أدخل نافذة منبثقة في الجزء السفلي من الشاشة. بعد النقر فوقه (قبل Popup مباشرة) ، سيظهر رمز مفتاح الربط. سيحتوي على حقلين: الإجراءات والكل. حدد النافذة المنبثقة الخاصة بك عن طريق ترك حقل الإجراء فارغًا.
أمثلة على العنصر المنبثق
هناك العديد من الطرق لإنشاء نوافذ منبثقة باستخدام Elementor. على سبيل المثال ، يمكنك استخدام مكون إضافي مثل Popup Maker لإنشاء تراكبات وشروط. خيار آخر هو استخدام محرر Popup المدمج في Elementor. يتيح لك ذلك إنشاء نوافذ منبثقة دون الحاجة إلى تثبيت مكون إضافي منفصل. لاستخدام محرر Popup ، ما عليك سوى إنشاء نافذة منبثقة جديدة وتحديد علامة التبويب "Popup Editor". من هنا ، يمكنك إضافة المحتوى الخاص بك وتغيير التخطيط وإضافة الرسوم المتحركة.
فيما يلي دليل تفصيلي خطوة بخطوة لتصميم أنواع مختلفة من نماذج الاشتراك المنبثقة لموقع الويب الخاص بك. يشتمل الإصدار المميز من Elementor Pro على محرر سحب وإفلات متقدم يمكن استخدامه لإنشاء مجموعة كبيرة من النوافذ المنبثقة. يمكن إرسال هذه النوافذ المنبثقة إلى عدد من خدمات التسويق عبر البريد الإلكتروني الأخرى أيضًا. يحتوي Elementor Pro على تكامل مباشر مع منصات التسويق عبر البريد الإلكتروني التالية: هل هناك أي طرق للحصول على قائمة بشركات التسويق عبر البريد الإلكتروني الجيدة دون إنفاق الكثير من المال؟ لا يزال من الممكن استخدام Zapier لتوصيل جميع أجهزتك. بمجرد تكوين إعدادات Popup ، يمكنك إنشاء تصميم النافذة المنبثقة الخاصة بك باستخدام واجهة السحب والإفلات المرئية. هناك العديد من أنواع عناصر واجهة المستخدم المتاحة ، مما يسمح لك بتصميم أي عنصر وفقًا لتفضيلاتك.

يمكنك إنشاء نموذج الاشتراك في البريد الإلكتروني الخاص بك باستخدام عنصر واجهة المستخدم للنموذج. يمكنك ربط النموذج الخاص بك بمجموعة متنوعة من خدمات التسويق عبر البريد الإلكتروني. يمكنك أيضًا تخصيص تصميم النوافذ المنبثقة لزيادة معدل التحويل. يعد Elementor Pro Popup Builder أداة ممتازة لإنشاء النوافذ المنبثقة للبريد الإلكتروني والاشتراكات لقائمة البريد الإلكتروني لموقع الويب الخاص بك. يُنصح بشدة بتمكين "العرض حتى X مرة" لتجعل نفسك تبدو أكثر احترافًا. عند تحديد خيار URL ، تصبح خيارات التخصيص أكثر سهولة. إذا كتبت منشور ضيف على مدونة شائعة ، فيمكنك الاشتراك في قائمة الأشخاص الذين يتابعون تلك المدونة.
يمنحك Elementor Pro القدرة على تصميم 100٪ من النوافذ المنبثقة من البداية. يوفر لك Elementor أيضًا إمكانية الوصول إلى جميع عناصر واجهة المستخدم التي تعد جزءًا من تجربة Elementor العادية ، مما يسمح لك بتخصيص التجربة وفقًا لاحتياجاتك الخاصة. يمكنك استخدام المزيد من عناصر واجهة المستخدم مع ملحقات Elementor المجانية والمتميزة.
انقر فوق العنصر المنبثق على الصورة
إذا كنت تبحث عن إضافة نافذة منبثقة إلى صورة على موقع WordPress الخاص بك ، فإن إحدى أسهل الطرق للقيام بذلك هي باستخدام المكون الإضافي Elementor. بمجرد تثبيت المكون الإضافي وتنشيطه ، يمكنك إنشاء نافذة منبثقة بالانتقال إلى Elementor -> Popups -> Add New. من هناك ، يمكنك إضافة المحتوى الخاص بك ، واختيار وقت ومكان ظهور النافذة المنبثقة ، وحتى إضافة شروط لجعل النافذة المنبثقة تظهر فقط في ظل ظروف معينة.
إذا قمت بالنقر فوق عنصر ، سيتم فتح النافذة المنبثقة. بنهاية هذا البرنامج التعليمي ، ستتمكن من تنفيذ استراتيجيتين إبداعيتين لفتح نافذة منبثقة عند النقر فوق الزر. كمكافأة ، ستتعلم كيفية زيادة عدد الأشخاص الذين ينقرون على هذا الزر لمزيد من التحويلات عند القيام بذلك. الخطوة 2: يجب أن يتم تصميم أسلوب النافذة المنبثقة الخاصة بك لتلائم جمالية علامتك التجارية وصوتها ورسائلها. عند الانتهاء من تحرير صفحة في Elementor ، انقر فوق الزر نشر في القائمة الموجودة على الجانب الأيسر للصق النافذة المنبثقة في الصفحة. OptinMonster هو أشهر برامج إنشاء قوائم العملاء المحتملين ، وأفضل مكون إضافي للنوافذ المنبثقة من WordPress. بالإضافة إلى ذلك ، يمتلك OptinMonster أداة إنشاء سحب وإفلات سهلة الاستخدام ، مما يجعل من السهل إنشاء نوافذ منبثقة احترافية بدون تشفير أو خبرة تقنية.
يمكن استخدام قواعد الاستهداف المتقدمة لتخصيص حملات Optin الأخرى. قوالب Optin Monster المعدة مسبقًا تستجيب تمامًا ، مما يجعلها مثالية للاستخدام على أي جهاز ، بما في ذلك الهاتف المحمول والكمبيوتر اللوحي. باستخدام أداة السحب والإفلات أو محرر النصوص المضمنة ، لا تحتاج إلى أي خبرة في الترميز لإنشاء حملات عالية التحويل لأن كل شيء يمكن القيام به في جزء واحد من التعليمات البرمجية. يجعل OptinMonster من السهل استخدام صفحات Elementor الخاصة بك مع نافذة منبثقة قابلة للنقر . يمكن العثور على مفتاح API الذي تحتاجه لتوصيل OptinMonster بـ ESP الخاص بك في لوحة القيادة الخاصة بحساب ESP الخاص بك. HTML المضمن هو كما يلي: هو مشتق من الكلمة العربية tal أود أن أفتح Monster Campaigns.com مع: https://app.monstercampaigns.com/c/lxefnymh0ugfyvsxa8wu/>opener أحد أهم العوامل في إقناع الناس بزيارة موقعك هو فعالية دليلك الاجتماعي. إنه مصطلح يشير إلى جوانب مختلفة من موقع الويب الخاص بك والتي تبني الثقة مع جمهورك.
من الطرق الجيدة لإضافة إشعارات الإثبات الاجتماعي إلى موقع الويب الخاص بك باستخدام أداة مثل TrustPulse. يمكنك زيادة مشاركة النافذة المنبثقة القابلة للنقر باستخدام الدليل الاجتماعي. يمكنك استخدام TrustPulse مع أي منشئ مواقع الويب ، بما في ذلك WordPress ، ولا تحتاج إلى معرفة تقنية لاستخدامه. يمكنك إظهار عدد الأشخاص المهتمين بالعرض من خلال عرض إجمالي عدد الزوار. ستكون أكثر حماسًا بشأن الموضوع عندما تروج لشيء ما نتيجة لذلك.
عنصر الزناد المنبثق مع جافا سكريبت
هناك طريقتان لتشغيل نافذة Elementor المنبثقة باستخدام JavaScript: 1. استخدام Elementor مشغلات API. 2. استخدام وحدة Elementor Popup . تعد واجهة برمجة تطبيقات Elementor Triggers هي الطريقة الموصى بها لتشغيل نافذة منبثقة باستخدام JavaScript. هذا لأنها الطريقة الأكثر مرونة لتشغيل نافذة منبثقة وتسمح لك بتخصيص سلوك النافذة المنبثقة. تعد الوحدة النمطية Elementor Popup طريقة أبسط لتشغيل نافذة منبثقة باستخدام JavaScript. هذه الطريقة أسهل في الاستخدام ولكنها أقل مرونة من واجهة برمجة تطبيقات Elementor.
نحن نوفر وصولاً ممتازًا للقطعة إلى جميع ميزاتنا وعناصر واجهة المستخدم. ضمان استرداد الأموال بنسبة 100٪ في أول 30 يومًا من الاستخدام. يمكن إجراء مدفوعات آمنة باستخدام SSL. يتم ضمان التحقق الآمن من الهوية وأمن البيانات بواسطة تشفير SSL 256 بت. عندما تدفع فاتورتك ، لن يتم تحصيل أي ضرائب سارية بناءً على عنوان إرسال الفواتير الخاص بك. قبل إجراء عملية الشراء ، سيظهر السعر النهائي على صفحة الدفع. استخدم أداة شبكة النشر لعرض المنشورات بجانب بعضها البعض.
ستتيح لك هذه الأداة إنشاء مربعات أرقام مذهلة. بالإضافة إلى محوّل الخلفية ، يمكّنك المكون الإضافي من إعداد مربعات المحتوى. اقض وقتًا أقل في البحث عن الأدوات المصغّرة في Elementor ووقتًا أكثر في القيام بما تفعله بشكل أفضل - التصميم.