تم إنشاء النوافذ المنبثقة الأولى من السيناريو الذي تخيله إيثان زوكرمان لـالإقامة لصفحته على الويب على ترايبود في أوائل التسعينيات، اشتكى مستخدموه من عدد الإعلانات التي وضعها على الموقع، لذلك قرر وضع اللافتات على صفحة منفصلة تُفتح عندما يدخل المستخدم إلى الصفحة.
لم يكن هذا الجزء الصغير من الكود عبارة عن نافذة منبثقة حقيقية كما نراها في كل موقع ويب الآن ، ولكن هذا هو المكان الذي بدأ فيه كل شيء. في صفحات الويب الحديثة ، تُستخدم النوافذ المنبثقة لأغراض مختلفة ، وليس فقط للإعلانات. غالبًا ما يتم أيضًا تقديم نماذج جهات الاتصال وتحذيرات سياسة الخصوصية واقتراحات الاشتراك كنوافذ منبثقة.
هناك أمران يضايقان المستخدمين عندما يتعلق الأمر بالنوافذ المنبثقة: عندما يقفزون عليك عندما لا تريدهم ؛ وعندما يختلف مظهره تمامًا عن أسلوب الموقع. تظهر هاتان المشكلتان عند استخدام المكونات الإضافية التي لا تبدو ذات جودة عالية.
أكبر مشكلة في معظم الإضافات التي يستخدمها المطورون المبتدئون خلق النوافذ المنبثقة هو عدم السيطرة على الرسالة الناتجة. ومع ذلك ، يمكنك تجنب كل هذه المشاكل إذا كنت تستخدم Elementor إنشاء موقع على شبكة الإنترنت.
مكونان إضافيان رائعان ، تم إنشاؤهما خصيصًا لـ Elementor منشئ الصفحة، تساعدك في إنشاء النوافذ المنبثقة من أي نوع وشكل ونمط تريده - منشئ العنصر المنبثق et JetPopup. نظرًا لأن كلاهما مصنوع من نفس الشكل الذي كان عليه Elementor ، فإن السؤال الوحيد الذي يجب طرحه هو أي من هذه المكونات الإضافية تختار. لمساعدتك في اتخاذ هذا القرار ، سأقوم بمراجعة شاملة لكليهما ويمكنك مقارنة إيجابياتهما وسلبيتهما. إذا هيا بنا !
التنزيل والتثبيت
هذه ليست أهم المعايير عند اختيار البرنامج المساعد الذي تريد استخدامه ، ولكن لتجربته ، يجب أن تحصل عليه أولاً. لهذا السبب سأبدأ من البداية وأوجز العملية للحصول عليها - التسعير ، والجهد المبذول ، وبساطة عملية الإعداد.
منبثق
تم إنشاء هذا المكون الإضافي بواسطة فريق Elementor. لذلك يمكننا أن نسميه "طفله" الحقيقي. هذا هو التحديث الأخير لـ Elementor ، الذي تم إصداره في يناير 2019 لتلبية احتياجات العملاء. ومع ذلك ، فهو غير متاح لمستخدمي الإصدار المجاني من Elementor.
يتم تضمين Popup Builder في خطة الاشتراك الاحترافية. لذلك ، لكي تكون لديك القدرة على إنشاء النوافذ المنبثقة ، يجب أن يكون لديك أولاً Elementor Pro. أبسط خطة تسعير تتيح لك استخدام جميع ميزات Elementor المتنوعة لموقع ويب واحد تكلف 49 دولارًا سنويًا. لذلك ، من الخطوات الأولى (شراء Elementor Pro) ، إليك الخوارزمية للحصول على Popup Builder:
- شراء Pro Elementor منشئ الصفحة.
- انتقل إلى حسابك الشخصي وقم بتنزيل المكون الإضافي.
- انتقل إلى لوحة معلومات موقع الويب الخاص بك ، الإضافات> إضافة جديد ، انقر فوق الزر "تحميل المكون الإضافي" واختر ملف .zip المناسب.
- عند اكتمال التثبيت ، قم بتنشيط المكون الإضافي باستخدام مفتاح الترخيص الخاص بك.
- هنا هو Popup Builder الموجود في القوالب> علامة التبويب Popups.
إنه طريق طويل بعض الشيء ، ولكن مع Popup Builder ، ستحصل أيضًا على مجموعة ضخمة من العناصر المختلفة من Elementor ، مثل الأدوات ، والقوالب ، والأدوات الإضافية الأخرى.
منبثق
JetPopup
تحتوي "مكونات" مكونات Jet الإضافية بالفعل على أكثر من مقالات 10 و JetPopup هو واحد منهم. تم إنشاؤه بعناية خصيصًا لـ Elementor ويزيد من عدد أدواته المتاحة. هذا البرنامج المساعد هو ر
متوافق تمامًا مع الإصدارات المجانية والمدفوعة. لذلك لا تحتاج إلى إجراء أي عمليات شراء إضافية. تبلغ تكلفة JetPopup 15 دولارًا وبمجرد الحصول عليها يمكنك استخدامها لموقع ويب واحد فقط. إذا كنت بحاجة إليه لأكثر من مشروع واحد ، فيمكنك شراء البرنامج المساعد بموجب ترخيص المطور (سيكلفك 45 دولارًا) واستخدامه في خمسة مواقع ويب. خوارزمية الحصول على المكون الإضافي أبسط قليلاً:
- شراء البرنامج المساعد على TemplateMonster السوق. سيتم تنزيله على جهاز الكمبيوتر الخاص بك.
- انتقل إلى لوحة معلومات موقع الويب الخاص بك ، الإضافات> إضافة جديد ، انقر فوق الزر "تحميل المكون الإضافي" واختر ملف .zip المناسب.
- عند اكتمال التثبيت ، قم بتنشيط المكون الإضافي.
- فويلا! عند فتح قائمة تخصيص Elementor (بالنقر فوق الزر "تحرير باستخدام Elementor") ، ستجد قسم JetPopup في القائمة اليمنى لعنصر واجهة المستخدم.
إنشاء المنبثقة
الآن ، عندما تكون الأدوات جاهزة وجاهزة ، يمكنني محاولة إنشاء نافذة منبثقة مع كل من الإضافات ومعرفة مدى بساطة وسهولة فهم هذه الميزة. بعد ذلك ، سوف أقوم بإنشاء نافذة منبثقة أساسية وألقي نظرة على خيارات التخصيص لـ Popup Builder و JetPopup.
منبثق
في Pro Elementor النوافذ المنبثقة تتم بشكل منفصل عن صفحات الموقع. لتغيير مظهر موقع الويب ، افتح الصفحة التي تريد تخصيصها ، وانقر فوق الزر "تعديل باستخدام Elementor" وقم بإجراء التغييرات. ولكن لإنشاء (ثم تعديل) النوافذ المنبثقة ، يجب عليك الانتقال إلى القوالب> النوافذ المنبثقة والضغط على الزر "إضافة نافذة منبثقة جديدة".
في النافذة المفتوحة ، تحتاج إلى اختيار القالب الذي ستقوم بإنشائه (نعم ، يمكنك إنشاء قوالب ليس فقط للنوافذ المنبثقة ، ولكن أيضًا للصفحات والعناصر الأخرى) ومنحها اسمًا.
بعد الضغط على زر "إنشاء قالب" ، سيتم إعادة توجيهك إلى قائمة تخصيص Elementor. من الأسهل تخصيص عنصر موجود من خلال بنائه من البداية. سوف يطلب منك أولاً اختيار نموذج مناسب.
اخترت أحد النماذج المعروضة في أعلى قائمة المكتبة. بعد الاختيار مباشرة ، ستصل إلى مساحة عمل Elementor التي ربما اعتدت عليها. يتم وضع خيارات التخصيص في الشريط الجانبي على الجانب الأيسر من الشاشة. لديك ثلاث علامات تبويب هنا.
تتيح لك علامة التبويب "الإعدادات" تغيير تخطيط النافذة المنبثقة ، وتغيير اسم النموذج والمعاينة. في علامة التبويب "النمط" ، يمكنك تخصيص التصميم - تغيير الألوان والخطوط والصور والحدود. تحتوي علامة التبويب "خيارات متقدمة" أيضًا على مجموعة من منزلقات إضافية ؛ على سبيل المثال ، يمنعون إغلاق النافذة المنبثقة باستخدام مفتاح ESC.
كما ترى - لا شيء غير متوقع ، إذا كنت قد استخدمت Elementor من قبل فلن تواجه أي مشاكل مع هذا المكون الإضافي. إليك مقطع فيديو مفصل يشرح كيفية إنشاء نافذة منبثقة باستخدام Popup Builder:
JetPopup
يضيف هذا البرنامج المساعد أيضًا علامة تبويب جديدة إلى لوحة القيادة الخاصة بك من وورد موضوع وبمساعدتها ، يتم أيضًا إنشاء النوافذ المنبثقة بشكل منفصل عن الصفحات. يتم أيضًا تخزين النوافذ المنبثقة الجاهزة في علامة تبويب تسمى "مكتبة منبثقة". لإنشاء نافذة منبثقة جديدة ، يمكنك إما الضغط على الزر "إضافة" في القالب المعد مسبقًا أو الانتقال إلى JetPopup> إضافة نافذة منبثقة جديدة ، ثم إعطاء اسم للقالب ثم الضغط على "تحرير باستخدام Elementor".
يختلف مجال العمل قليلاً عن المعيار لأنك تقوم الآن بإنشاء نافذة أصغر. في القائمة اليمنى ، يمكنك إضافة أي نوع من العناصر إلى القائمة المنبثقة.
يضيف المكون الإضافي JetPopup عنصرًا واحدًا إلى قائمة عنصر واجهة المستخدم - زر الإجراء السياقي. هذا يسمح بتحديد نوع الإجراء الذي سيحدث عندما يضغط المستخدم على الزر.
ليس من الواضح حقًا فتح الإعدادات من النافذة المنبثقة. تحتاج إلى النقر فوق زر الصيانة في أسفل القائمة. قائمة الإعدادات مشابهة تمامًا لتلك الموجودة في Popup Builder ، ولكن لا يوجد سوى علامتي تبويب للتخصيص. تسمح لك "الإعدادات العامة" بتحديد تأثير الحركة ، أو إعادة تسمية النموذج أو تحديد الشروط. في علامة التبويب "النمط" ، يمكنك تغيير التخطيطات والألوان والصور والخطوط والحدود.
JetPopup لديه وظائف أقل وضوحا ولكن يعوض مع دروس فيديو مفصلة ومفيدة.
مشغلات
لكي تكون مفيدة ولا تزعج الزوار ، يجب أن تظهر النوافذ المنبثقة في الوقت المناسب. تسمى الشروط التي يتم بموجبها عرض النافذة المنبثقة "المشغلات". كلما كانت الشروط المتاحة أكثر تفصيلاً ، كان البرنامج المساعد أكثر مرونة. تعد الدقة مهمة جدًا إذا كنت لا ترغب في مغادرة المستخدم للموقع بعد ظهور نافذة منبثقة لنموذج الاشتراك.
منبثق
يساعدك هذا المكون الإضافي في تحديد الشروط الضرورية بعد تخصيص النافذة المنبثقة مباشرةً. عندما تضغط على الزر "نشر" سترى النافذة التي يمكنك من خلالها تحديد الشروط (على الصفحات التي سيتم عرض هذه النافذة المنبثقة) ، والمشغلات (عندما يتم عرض النافذة المنبثقة) والقواعد المتقدمة.
يحتوي Popup Builder على ستة مشغلات ، مثل العرض عند تمرير ونقرة واحدة ، وسبع قواعد متقدمة ، مثل العرض بعد عدد محدد من الجلسات أو العرض على أجهزة معينة. المشغلات والقواعد المتقدمة لها مفاتيح تمرير بسيطة وستكون سريعة جدًا لتعيين أي معلمات تريدها.
JetPopup
يتم تجميع جميع المشغلات والشروط والأحداث الافتتاحية معًا في المعلمات. بعد النقر فوق زر الصيانة ، يمكنك فتح علامات تبويب الإعدادات ويمكنك تعيين المشغلات على الفور. يمكنك تعيين النسبة المئوية للصفحة بعد التمرير ، أو قائمة السياق المراد عرضها ، أو عدد الثواني التي سيرى المستخدم الرسالة بعدها.
لا يمكن عرض النافذة إلا مرة واحدة أو في كل مرة يقوم فيها المستخدم بتنفيذ إجراءات معينة (لا أوصي باستخدامها بشدة - لن تجعل المستخدمين سعداء). يمكنك أيضًا أن تختار بدقة شديدة أي المنشورات أو الصفحات سيتم عرضها في هذه النافذة المنبثقة الملموسة. بشكل عام ، هذا البرنامج المساعد مرن للغاية ويسمح لك بعرض النوافذ المنبثقة بدقة كبيرة.
وضع
بالتأكيد لن يتمكن المستخدمون من تجنب النوافذ التي تقفز مباشرة من وسط الشاشة ، لكنهم يصرفون انتباه الزائرين عن موقع الويب ويمكن أن يكون مزعجًا حقًا. لا يجب وضع جميع النوافذ المنبثقة في المنتصف ، سيكون الشريط الضيق في الأعلى أقل وضوحًا ، ولكن يمكن أن يكون أكثر فاعلية. هذا يعني أنك بحاجة إلى التحكم في موضع النافذة والقدرة على التحرك حول الشاشة.
منبثق et JetPopup قسّم الشاشة إلى تسعة قطاعات واسمح لك بوضع النافذة المنبثقة في أي منها. يتم تحديد الموضع على طول المقياسين من اليسار إلى اليمين ومن أعلى إلى أسفل. إنه ليس مرنًا للغاية ، لكنه كافٍ للنوافذ المنبثقة.
تأثيرات الرسوم المتحركة
الطريقة التي تنزلق بها النافذة (أو تتدحرج أو تقفز) على الصفحة مهمة للغاية. إذا كانت النافذة تتحرك بسرعة كبيرة أو ببطء شديد ، فلن تكون فعالة. يجب أيضًا استخدام الاهتزازات والدغدغة والهزات بدقة كبيرة. تجعل تأثيرات الرسوم المتحركة الموقع أكثر ديناميكية ، ولكنها قد تفسد أيضًا الانطباع بالكامل.
منبثق يحتوي على 36 نوعًا من الرسوم المتحركة المدخلة ، بما في ذلك أنواع مختلفة من الانزلاق ، والتكشف ، والتكبير ، والارتداد ، والتدوير في اتجاهات مختلفة. كل هذا ، بالإضافة إلى مدة الرسوم المتحركة ، يمكن العثور عليها في قسم "التخطيط" في علامة التبويب "الإعدادات".
يوجد 13 نوعًا من الرسوم المتحركة في المكون الإضافي JetPopup، بما في ذلك يتلاشى ، التقليب العمودي ، شرائح مختلفة ، كذاب والتكبير. ستجدها في قسم "الإعدادات" في علامة التبويب "الإعدادات".
نماذج
في بعض الحالات ، تريد إنشاء نافذة منبثقة بهيكل معين وتعرف بالضبط كيف يجب أن تبدو. لكن هذه مناسبة نادرة إلى حد ما. في كثير من الأحيان ليس لديك أي فكرة عن العناصر التي يجب أن تحتوي عليها النافذة المنبثقة. هذا هو المكان الذي تكون فيه القوالب سهلة الاستخدام. حتى إذا لم تستخدم أيًا من العينات التي تم تكوينها مسبقًا ، فإن معالجتها يمكن أن يمنحك نظرة عامة جيدة. وبالطبع ، يعد تخصيص عنصر خارج الصندوق أسرع وأسهل بكثير من بنائه من البداية.
منبثق أضاف فئة إلى مكتبة نموذج Elementor. كما أخبرتك من قبل ، يمكنك رؤيته في بداية العملية الجديدة لإنشاء نافذة منبثقة. مجموعة متنوعة من القوالب المنبثقة كبيرة بما يكفي ؛ هناك أكثر من 100 عنصر. في الزاوية اليسرى العلوية ، تتيح لك أداة الفرز حسب الفئة المنسدلة تسريع البحث. الفئات مفهومة ولن يستغرق الأمر وقتًا طويلاً للعثور على النافذة المنبثقة التي تريدها.
JetPopup يحتوي أيضًا على مكتبة ضخمة من القوالب. يتم تخزينها جميعًا في علامة التبويب "المكتبة السياقية" ولديها ميزات مفيدة مثل زر المعاينة وعداد الاستخدام. هناك المزيد من خيارات الفرز ، يمكن تكوين القائمة لعرض نوع معين من النماذج ومن ثم وضعها بأي ترتيب ؛ على سبيل المثال ، اعتمادًا على تاريخ الإنشاء. لا يمكنني إخبارك بالعدد الدقيق للموديلات المتاحة ، لكن بالتأكيد يوجد أكثر من 100 طراز.
جدول المقارنة
| منشئ العنصر المنبثق | JetPopup | |
| السعر | ١٠٠،٠٠٠ الف دولار | ١٠٠،٠٠٠ الف دولار |
| نماذج | +100 | +100 |
| مشغلات | مشغلات 6 ، قواعد متقدمة 7 | 5 الأحداث المفتوحة مع معلمات إضافية |
| الرسوم المتحركه | 36 أنواع | 13 أنواع |
| دروس | توثيق | الوثائق ، دروس الفيديو 9 |
وفي الختام
لا أستطيع أن أقول أي من هذين الملحقين هو الأفضل ؛ إنه أمر معقد للغاية للحكم عليهم. كل حالة وكل شخص لديه متطلباته الخاصة لاختيار المكونات الإضافية. أعتقد أنه يجب عليك تحديده بنفسك - أيهما سيكون الأفضل لك؟ أتمنى لك حظًا سعيدًا في إضافة نافذة منبثقة رائعة إلى موقع الويب الخاص بك!
