ستساعدك المقالة التالية: كيفية إنشاء Bootstrap Popup لموقعك؟
إذا كنت قد قضيت القليل من الوقت على الإنترنت ، فمن المحتمل أنك رأيت إعلانًا منبثقًا يقطع تجربة التصفح لديك. وربما تكون قد نقرت عليه أيضًا!
من النوافذ المنبثقة PHP إلى React أو Modals ، هناك العديد من الطرق لإنشاء نوافذ منبثقة لموقعك على الويب.
إن النافذة المنبثقة المشروط التمهيدية هي التي نحن هنا للحديث عنها اليوم.
أ Bootstrap المنبثقة هي نافذة صغيرة تعرض رسالة أو معلومات تتطلب اهتمام المستخدم.
تساعدك هذه النوافذ المنبثقة على جذب انتباه الزائرين وإرشادهم إلى الصفحة التالية من موقع الويب الخاص بك – على سبيل المثال ، إلى.
بمساعدة النوافذ المنبثقة المشروطة على موقعك ، يمكنك ذلك زيادة المشتركين وتوليد المزيد من العملاء المحتملين وزيادة المبيعات.
كجزء من منشور المدونة هذا ، سنشرح ما هي نافذة Bootstrap المنبثقة المشروطة وكيفية إنشاء واحد لموقعك على الويب.
أخيرًا ، سنقدم لك حلاً بسيطًا وقابل للتنفيذ ، بديل أفضل للنوافذ المنبثقة التمهيد، لإنشاء النوافذ المنبثقة وتنفيذها بدون تشفير. حسنًا ، فلنبدأ.
تستجيب نماذج Bootstrap حسب التصميم وتحافظ على توافق المستعرض الواسع.
شفرة المصدر نظيفة وسهلة الاستخدام وتأتي مع وثائق مفصلة.
نافذة Bootstrap المنبثقة المشروطة هي مربع حوار / نافذة التي تظهر فوق كل شيء على موقع الويب الخاص بك.
إنه مكون تفاعلي ويحتوي على عنوان (مع نص أو صورة) وبعض النصوص وزر واحد على الأقل
توفر نافذة bootstrap المنبثقة معلومات إضافية دون تحميل الصفحة مرة أخرى.
ونتيجة لذلك ، فإنه يحسن تجربة المستخدم من خلال السماح له برؤية المعلومات ذات الصلة في المربع المنبثق على صفحة ويب مماثلة.
يتيح Bootstrap لمطوري الويب التركيز على أعمال التطوير ، دون الحاجة إلى القلق بشأن التصميم والحصول على موقع ويب حسن المظهر وتشغيله بسرعة.
كما يوفر لمصممي الويب أساس متين لإنشاء سمات Bootstrap مثيرة للاهتمام.
يمكنك استخدام Bootstrap Modal Popups لأسباب عديدة مثل:
- استفسار / استمارات الاتصال
- إنشاء قوائم العملاء المحتملين / نماذج الاشتراك
- استمارات تسجيل الدخول / التسجيل
- نماذج البحث
- التنبيهات / الإخطارات
- نصائح مساعدة
- عرض الصور ومقاطع الفيديو بملء الشاشة
باستخدام البرنامج المساعد المشروط Bootstrap ، يمكن بسهولة إنشاء مربعات حوار ذكية ومرنة للغاية. كما هو موضح في المثال التالي ، تتضمن البنية الأساسية للرسالة المشروطة رأسًا ونصًا وتذييلًا يحتوي على أزرار الإجراءات.
تأكيد h5>
هل تريد حفظ التغييرات في هذا المستند قبل الإغلاق؟ p>
< small> إذا لم تقم بالحفظ ، فستفقد التغييرات. small>
div >
(مصدر
مرة واحدة في “طراز كائن المستند” يتم تحميلها من خلال JavaScript ، ستفتح النافذة تلقائيًا ويمكن أن تبدو كما يلي:
بشكل افتراضي ، تكون الوسائط متوسطة الحجم. ومع ذلك ، يمكنك أيضًا تغيير حجم النموذج عن طريق إضافة ملف .modal-sm فئة لـ أو .modal-lg فئة ل.
مشروط صغير
مشروط كبيرة
يمكنك دائمًا إنشاء نوافذ منبثقة مشروطة وتشغيلها لأي أغراض تضعها في اعتبارك على صفحة الويب الخاصة بك.
ومع ذلك ، هناك طريقة أكثر عملية وبسيطة لإنشاء نماذج لجميع أهدافك التسويقية
Popupsmart هو منشئ النوافذ المنبثقة بدون رمز يمكّنك من إنشاء نافذة منبثقة لأهداف مختلفة في بضع ثوانٍ فقط.
باستخدام Popupsmart ، يمكنك إنشاء أنواع مختلفة من النوافذ المنبثقة. على سبيل المثال ، يمكنك استخدام النافذة المنبثقة النموذجية لتجميع العملاء المحتملين ، ونافذة الحث على اتخاذ إجراء لتحويل المزيد من الزائرين إلى عملاء ، ونافذة المنتج المنبثقة لزيادة قائمة البريد الإلكتروني وتحويل المبيعات.
تعد النوافذ المنبثقة طريقة فعالة لجذب المزيد من الزيارات إلى موقعك وإنشاء عملاء متوقعين جدد وعملاء. يمكنك أيضًا استخدام النوافذ المنبثقة من أجل:
- قم بتنمية قائمة بريدك الإلكتروني واستهدف زوار موقعك.
- اعرض إعلانًا عن منتجاتك وخدماتك لعملائك.
- امتثل لقوانين ملفات تعريف الارتباط واحصل على موافقة الزائرين لتخزين ملفات تعريف الارتباط.
- قم بزيادة المكالمات الهاتفية وبناء علاقات أقوى مع زوارك بطريقة قديمة.
- قم بالترويج لمنتجاتك وخدماتك من خلال تقديم عروض خاصة لجمهورك.
- جمع إرسال النموذج لجمع المعلومات والبيانات الشخصية للزائرين لتعزيز تجربة المستخدم الخاصة بهم.
باستخدام خدماتنا ، يمكنك إنشاء نافذة منبثقة فعالة تجذب المزيد من الزوار وتحويلهم إلى عملاء. في بضع خطوات ، سأوضح لك كيفية إنشاء نافذة منبثقة باستخدام Popupsmart.
الخطوة 1: قم بالتسجيل أو تسجيل الدخول إلى حساب Popupsmart الخاص بك. ثم ، انتقل إلى لوحة القيادة وانقر فوق “إنشاء نافذة منبثقة جديدة” زر لبدء بناء النافذة المنبثقة الخاصة بك.
الخطوة 2: هنا تحتاج إلى تحديد هدف عملك. هناك ستة أهداف عمل مختلفة يمكنك اختيارها لأهداف مختلفة لحملاتك. على سبيل المثال ، هنا نختار “تنمية قائمة البريد الإلكتروني الخاصة بك”.
الخطوه 3: بعد ذلك ، يمكنك تحديد تخطيط من النموذج المعد مسبقًا المناسب لموقع الويب الخاص بك. (لا تقلق ، فهناك الكثير من الخيارات!)
الخطوة 4: انقر فوق “التالي للتخصيص” وقم بتغيير النافذة المنبثقة كما تريد. هنا يمكنك تخصيص القالب لمطابقته مع حملتك والهوية العامة للعلامة التجارية.
على سبيل المثال ، يمكنك تعديل صورة التخطيط والعنوان وأجزاء الوصف وفقًا لذلك.
تأكد من أن CTA الخاص بك مثير للاهتمام بما يكفي لجذب الجمهور وجعلهم يتفاعلون مع ما طلبته في المقام الأول.
الخطوة الخامسة: يمكنك أيضًا تحسين هدف النافذة المنبثقة في هذه الخطوة. في ال “هدف” قسم ، يمكنك جدولة النوافذ المنبثقة الخاصة بك ، أو تحديد الخاص بك “سلوك الزائر” اكثر تحديدا.
عندما تنتهي من الاستهداف ، انقر فوق “التالي للنشر” زر.
الخطوة 6: هنا يمكنك إضافة اللمسات الأخيرة على النافذة المنبثقة الخاصة بك.
يوفر Popupsmart تكاملاً سلسًا مع العديد من الأنظمة الأساسية بما في ذلك مزود خدمة التسويق عبر البريد الإلكتروني Mailchimp. يمكنك أيضًا تحسين ملف “إشعارات المستجيبين بالبريد الإلكتروني” و ال “عند النقر فوق منشئ الزر المنبثق” في هذا الجزء.
تأكد من التحقق من موقع الويب الخاص بك وإلا فسيكون زر النشر غير قابل للنقر.
انسخ رمز التضمين الفريد الخاص بك بسرعة وأكمل الإعداد من خلال تضمينه في موقع الويب الخاص بك. بالإضافة إلى ذلك ، يمكنك إضافة النوافذ المنبثقة إلى موقع الويب الخاص بك باستخدام Google Tag Manager.
أضف رمز التضمين الخاص بالنافذة المنبثقة إلى جزء إدخال رمز موقع الويب الخاص بك. يمكنك إضافته قبل الإغلاق
علامة بسهولة. علاوة على ذلك ، يمكنك إضافة النوافذ المنبثقة باستخدام Google Tag Manager إلى موقع الويب الخاص بك.
بعد الانتهاء من تصميم النافذة المنبثقة والتخصيص ، يمكنك النقر فوق “حفظ ونشر” زر.
ما يلي هو المظهر النهائي للنافذة المنبثقة التي أنشأناها للترويج لمنتج ما:
الحق سهلة؟ الآن ، قم بإنشاء نافذة منبثقة لزيادة تحويلات المبيعات والترويج لمنتجاتك أو خدماتك!
إذا لم تقم مطلقًا بإنشاء نافذة منبثقة للتمهيد من قبل ، فنحن نأمل أن يكون هذا الدليل قد أعطاك الإلهام للقيام بذلك.
من السهل القيام بذلك ويمكنك حقًا أن تكون مبدعًا فيما يمكنك فعله باستخدام Bootstrap.
أحد أفضل الأشياء في النوافذ المنبثقة Bootstrap هو ذلك إنها سريعة الاستجابة ومتوافقة مع الأجهزة المحمولة حتى يتمكن المستخدمون من رؤيتها على أجهزة مختلفة.
ومع ذلك ، إذا كنت ترغب في توفير الوقت ، وإنشاء النوافذ المنبثقة الأكثر لفتًا للنظر ، والأهم من ذلك التحقق من تحويلاتك ، فنحن نقترح عليك اختر Popupsmart بدلاً من ذلك!
يعد Popupsmart أحد البدائل الفعالة والمرنة للغاية للنوافذ المنبثقة Bootstrap. يمكنك استخدامه مجانًا في البداية ، ومن السهل تصميمه وتحريره وتحديثه بانتظام بالقالب الجديد.
ابدأ مع Popupsmart اليوم!
تحقق من منشورات المدونة هذه أيضًا: