A subscription popup triggered by a click can effectively increase your website’s email sign-up rate while enhancing user experience. Elementor offers powerful tools for creating and customizing popups, making it easy to set up a “click-to-open” نافذة الاشتراك المنبثقة. سيرشدك هذا البرنامج التعليمي خلال كل خطوة لإنشاء نافذة منبثقة للاشتراك لا تظهر إلا عندما ينقر المستخدمون على رابط أو زر معين.
مقدمة
Subscription popups can be a great way to engage visitors and encourage them to sign up for your newsletter, promotions, or updates. Unlike auto-triggered popups, which may interrupt the user experience, a click-triggered popup opens only when the user is ready to see it, making it more user-friendly and likely to convert. Let’s explore how you can create a subscription popup in Elementor that opens upon clicking a link or button.
الخطوة 1: إنشاء قالب الاشتراك المنبثق
- عنصر الوصول أو القوالب المنبثقة
- سجِّل الدخول إلى لوحة تحكم ووردبريس وانتقل إلى Templates > Popups.
- انقر على إضافة نافذة منبثقة جديدة لإنشاء قالب منبثق جديد.
- قم بتسمية وإنشاء القالب المنبثق الخاص بك
- Give your popup a relevant name, such as “نافذة الاشتراك المنبثقة” then click إنشاء قالب.
- اختر أو صمم تخطيط النافذة المنبثقة
- سيعرض لك Elementor مجموعة متنوعة من القوالب المنبثقة المصممة مسبقاً. اختر واحدًا يناسب احتياجاتك، أو ابدأ بـ قالب فارغ.
- انقر فوق إدراج لفتح القالب المحدد في محرر Elementor. النقر على "x" ينقلك إلى صفحة القالب الفارغة.
- إضافة نموذج اشتراك
- اسحب الاستمارة القطعة في النافذة المنبثقة لإضافة نموذج اشتراك.
- تكوين حقول النموذج لالتقاط المعلومات الضرورية، عادةً:
- الاسم (اختياري) - للحصول على تجربة أكثر تخصيصاً.
- البريد الإلكتروني (مطلوب) - كمعلومات أساسية للاشتراك.
- اجعل الأمر بسيطًا مع حقل بريد إلكتروني فقط لزيادة احتمالية التسجيل.
- تكوين إجراءات تقديم النموذج
- Update the form’s submit button text to something engaging, like “Subscribe Now” or “Get Updates.”
- في الإجراءات بعد الإرسال قسم، اختر البريد الإلكتروني أو MailChimp (if you’re using MailChimp for email marketing).
- قم بتخصيص إجراءات ما بعد الإرسال، مثل إرسال رسالة شكر أو إضافة إشعار النجاح.
- صمم نافذتك المنبثقة
- Use Elementor’s styling options to customize the form’s colors, الخطوطو التباعد to match your website’s branding.
- To draw attention, add a headline such as “Stay Updated!” or “اشترك للحصول على آخر الأخبار. “
- احفظ النافذة المنبثقة وانشرها
- Once you’re happy with the design, click النشر. You’ll now be prompted to configure the popup’s display settings.
الخطوة 2: تكوين إعدادات العرض والتشغيل للنافذة المنبثقة
- تعيين شروط العرض
- انقر على إضافة شرط واختر الموقع بالكامل أو صفحة محددة تريد أن تكون النافذة المنبثقة متاحة فيها.
- تكوين المشغلات
- Turn off any automatic triggers (like “On Page Load” or “On Scroll”). This step ensures that the popup only appears when the user clicks a designated link or button.
- حفظ إعدادات العرض
- قم بتأكيد إعداداتك بالنقر فوق الحفظ والإغلاق.
الخطوة 3: إنشاء رابط أو زر لتشغيل النافذة المنبثقة
- تحرير الصفحة أو المنشور الذي تريد الرابط فيه
- افتح الصفحة أو المقالة حيث تريد إضافة رابط أو زر التشغيل في Elementor.
- إضافة رابط أو زر لمشغل النافذة المنبثقة
- أدخل الزر or a text link widget to serve as the popup trigger. Use engaging text like “Sign Up Now” or “Subscribe for Updates.”
- يمكنك إرفاق المشغّل المنبثق بصورة أو أيقونة أو عنصر آخر قابل للنقر للحصول على مظهر مخصص.
- تعيين إجراء المشغل لفتح النافذة المنبثقة
- حدد الرابط أو الزر، وانتقل إلى إعدادات الرابط في محرر Elementor.
- تعيين نوع الرابط إلى العلامات الديناميكيةثم اختر Actions > Popup من القائمة المنسدلة.
- اختر الإجراء المنبثق والاسم
- اختر فتح النافذة المنبثقة كإجراء وحدد اسم نافذة الاشتراك المنبثقة التي أنشأتها سابقًا.
- يمكنك أيضًا تعيين إجراء إغلاق النافذة المنبثقة إذا كنت تريد أن يتمكن المستخدمون من إغلاق النافذة المنبثقة يدويًا.
- احفظ التغييرات التي أجريتها
- انقر فوق تحديث لحفظ التغييرات التي أجريتها على الصفحة.
الخطوة 4: اختبر النافذة المنبثقة
- معاينة الصفحة
- قم بزيارة الصفحة التي أضفت فيها المشغّل المنبثق، وانقر على الرابط أو الزر، وتأكد من عرض نافذة الاشتراك المنبثقة بشكل صحيح.
- التحقق من تقديم الاستمارة
- قم بإرسال إدخال اختبار للتأكد من أن النموذج يعمل كما هو متوقع. إذا قمت بتكوين النموذج لإرسال إشعار بالبريد الإلكتروني، تحقق من استلام البريد الإلكتروني.
- إذا كنت متصلاً بأداة مثل MailChimp، تحقق من إضافة الاشتراك التجريبي إلى القائمة الصحيحة.
نصائح وتوصيات إضافية
- إضافة رسوم متحركة: In the popup’s advanced settings, you can add entrance and exit animations (such as fade-in or slide-in) to make the popup appear smoother and more engaging.
- التحسين للأجهزة المحمولة: Switch to mobile view in the Elementor editor and adjust the popup’s design for mobile screens to ensure a seamless experience for mobile users.
- التحكم في التردد: إذا كنت تخطط للحصول على عدة نوافذ منبثقة متعددة، فحد من تكرارها لتجنب إرباك المستخدمين.
- بيان الخصوصية: استخدم النص عنصر واجهة المستخدم لإضافة إخلاء مسؤولية قصير للخصوصية في أسفل النموذج لطمأنة المستخدمين بأن معلومات بريدهم الإلكتروني ستبقى آمنة.
الخاتمة
يؤدي إنشاء نافذة منبثقة للاشتراك يتم تشغيلها بالنقر في Elementor إلى زيادة معدل الاشتراك في البريد الإلكتروني لموقعك الإلكتروني بشكل فعال مع ضمان تجربة إيجابية للمستخدم. على عكس النوافذ المنبثقة التي يتم تشغيلها تلقائيًا، لا يعرض هذا الأسلوب النافذة المنبثقة إلا عندما يكون المستخدم مستعدًا للمشاركة، مما يجعلها أقل تطفلاً وأكثر احتمالاً للتحويل. باتباع هذه الخطوات، يمكنك بسهولة تصميم وتخصيص وتهيئة نافذة منبثقة للاشتراك تتماشى مع علامتك التجارية وتشجع تفاعل المستخدم. يمكن أن تكون النافذة المنبثقة المصممة جيدًا والموضوعة بشكل استراتيجي ذات قيمة لبناء قائمة بريدك الإلكتروني والبقاء على اتصال مع جمهورك.