كيفية جعل نموذج الاشتراك بلوم منبثق عند النقر فوق الزر

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

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

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

متى تستخدم نموذج التقيد بعد النقر

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

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

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

كيفية جعل نموذج الاشتراك بلوم منبثق عند النقر فوق الزر

اشترك في قناتنا على اليوتيوب

قم بإنشاء نموذج التقيد الخاص بك

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

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

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

اختر نوع نموذج التقيد

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

إعداد علامة التبويب

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

علامة تبويب التصميم

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

علامة التبويب "إعدادات العرض"

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

علاوة على ذلك ، نريد استخدام نموذج التقيد للمشغلات عند النقر فقط. لهذا السبب سنقوم بتعطيل جميع الخيارات الأخرى ونقوم فقط بتمكين خيار "Trigger on Click". سترى أن حقل CSS Selector سيظهر على الفور. في وقت لاحق من هذا المنشور ، سنستخدم هذا الحقل لربط أزرارنا بنموذج الاشتراك الذي نقوم بإنشائه. اترك هذه الصفحة مفتوحة في علامة التبويب الخاصة بك حتى تتمكن من الوصول إليها على الفور لاحقًا.

هيا بنا نبدأ

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

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

قم بتوصيل وحدة الزر بنموذج الاشتراك المنبثق

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

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

باستخدام فئة CSS

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

انتقل إلى علامة التبويب خيارات متقدمة وانتقل لأسفل. انقر في الحقل Main Element وشاهد فئة CSS المخصصة للزر تظهر. انسخ فئة CSS ، سنحتاجها على الفور.

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

*.et_pb_button_0.et_pb_button.et_pb_module

كما ترى ، إنه مجرد رمز "*" متبوعًا بالفصل الذي نسخته قبل هذه الخطوة مباشرة.

عند استخدام هذه الطريقة ، هناك شيء واحد يجب أن تضعه في اعتبارك ؛ يختلف الزر CSS Class لكل زر في نفس الصفحة ولكن بمجرد إضافة زر إلى صفحة أخرى ، سيبدأ من "0" على الفور. هذا يعني أن كل وحدة زر أولية في كل صفحة ستطلق نموذج الاشتراك إذا كان نموذج الاشتراك متاحًا لجميع الصفحات والمنشورات.

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

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

باستخدام معرف CSS

الطريقة الثانية هي باستخدام معرف CSS. افتح وحدة الأزرار ، وانتقل إلى علامة التبويب خيارات متقدمة وأعطها معرف CSS. في هذه الحالة ، سنستخدم "popup".

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

الانتقال ، ارجع إلى إعدادات نموذج التقيد وأضف "# popup" إلى حقل Trigger On Click. يجب عليك دائمًا كتابة "#" متبوعًا بمعرف CSS الذي قمت بتعيينه لوحدة الزر.

a#popup

قم بتوصيل أزرار الرأس ذات العرض الكامل بنموذج التقيد

المثال الآخر الذي سنعرض فيه لك كيفية تنفيذ نموذج Trigger On Click-in Opt-in هو زر Fullwidth Header. الاحتمال الوحيد المتاح لدينا هنا هو استخدام فئة الزر CSS. لا يمكننا تعيين معرف CSS من خلال Divi builder للزر على وجه الخصوص.

باستخدام فئة CSS

قم بإنشاء رأس عرض كامل أو افتح رأس عرض كامل حيث تريد إضافة نموذج Trigger On Click-in opt-in. انتقل إلى علامة التبويب خيارات متقدمة في رأس Fullwidth وانتقل لأسفل حتى تصادف "الزر الأول". انقر فوق الحقل وانسخ فئة CSS المخصصة للزر.

بعد ذلك ، انتقل إلى علامة التبويب "المحتوى" واكتب الرمز "#" متبوعًا بأي شيء آخر في حقل عنوان URL الخاص بالزر رقم 1.

أخيرًا ، انتقل إلى علامة التبويب إعدادات العرض الخاصة بالاشتراك واكتب الرمز "*" متبوعًا بالفئة التي نسختها للزر.

*.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button

افكار اخيرة

يجب أن يساعدك هذا البرنامج التعليمي على البدء في استخدام المشغلات عند النقر ونموذج الاشتراك في Bloom. حتى أنه قد يجعلك تعيد النظر في الطريقة التي تحاول بها حاليًا كسب مشتركين أو عملاء محتملين. إذا كان لديك أي أسئلة أو اقتراحات. لا تتردد في ترك تعليق في قسم التعليقات أدناه. وأثناء وجودك هناك ؛ أخبرنا في الحالات التي ستستخدم فيها نموذج الاشتراك في Trigger On Click.

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!

صورة مميزة من BarsRsind / shutterstock.com