كيفية إضافة نموذج اشتراك Mailrelay باستخدام WordPress

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

لماذا ا؟ في الأساس لأنه يسمح لك بالتقاط البيانات من الأشخاص المهتمين بالمنتجات أو الخدمات التي تقدمها حتى تتمكن من الاتصال بهم بشكل دوري.

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

لا تقلق ، في هذا البرنامج التعليمي ؛ سنعرض لك طرقًا مختلفة لإضافة رمز HTML الذي تم إنشاؤه بواسطة Mailrelay في موقع الويب الخاص بك الذي تم إنشاؤه باستخدام WordPress مع المكونات الإضافية وبدونها.

ممتع ، أليس كذلك؟

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

· كيفية دمج نموذج اشتراك Mailrelay دون استخدام أي مكون إضافي

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

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

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

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

كيف؟

باتباع الخطوات التالية:

للبدء ، سيتعين عليك تسجيل الدخول إلى WordPress الخاص بك والنقر على " المظهر" وعلى "القطعة".

في قسم الأدوات ، يتعين علينا العثور على عنصر واجهة مستخدم باسم " Custom HTML. "بمجرد العثور عليه ، يمكننا سحبه إلى منطقة الأدوات حيث نريد إضافة نموذج التقيد الخاص بنا.

بشكل افتراضي ، يحتوي WordPress على منطقة عنصر واجهة مستخدم في الشريط الجانبي للصفحة.

يمكننا إدراجه هناك أو إذا كان القالب أو القالب الخاص بنا به مناطق أخرى من عناصر واجهة المستخدم ممكنة ، فيمكننا تغيير المكان (على سبيل المثال ، في التذييل).

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

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

بعد تسمية القطعة (في قسم العنوان) وإدخال الرمز (في قسم المحتوى) ، سيتعين عليك النقر فوق الزر حفظ.

لاحقًا ، للتحقق مما إذا كان كل شيء يعمل بشكل جيد ، يمكنك الوصول إلى مدونتك ، وسترى نموذج الاشتراك في الشريط الجانبي.

* من المهم أن تضع في اعتبارك أن النموذج سيتضمن الأنماط (الألوان والخطوط) المكونة في القالب أو السمة.

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

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

· كيفية دمج نموذج اشتراك Mailrelay في WordPress مع Elementor (نسخة مجانية)

كيفية دمج نموذج اشتراك Mailrelay في WordPress مع Elementor (نسخة مجانية)

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

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

Elementor هو مكون إضافي متاح حاليًا مجانًا مع المزيد من الميزات المحدودة وبإصدار مدفوع / مميز مع بعض الخيارات الإضافية.

ومع ذلك ، لا يهم إذا كنت تستخدم الإصدار المجاني أو المدفوع ، فستتمكن من دمج نموذج Mailrelay في القسم والموقع المطلوبين. سوف تتعلم كيفية القيام بذلك في بضع خطوات فقط:

الشرط الأول هو تثبيت المكون الإضافي Elementor على موقعنا. إذا لم تكن قد قمت بتثبيته بعد ، فيجب عليك الانتقال إلى علامة التبويب المكونات الإضافية والنقر فوق " إضافة جديد".

ابحث عن "Elementor page builder" في مستودع WordPress وانقر على تثبيت.

بمجرد التثبيت ، تذكر تمكينه ، وسنكون مستعدين لدمج الكود الخاص بنا.

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

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

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

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

لإجراء تغييرات أو تعديلات على النمط ، ستحتاج إلى تحرير HTML أو استخدام مكونات إضافية معينة تسمح لنا بتخصيص نماذج الاشتراك الخاصة بنا (Bloom ، على سبيل المثال).

· كيفية دمج نموذج اشتراك Mailrelay في WordPress مع Bloom

يعد Bloom أحد أكثر المكونات الإضافية اكتمالاً التي يمكن أن نجدها لإنشاء نماذج الاشتراك. إذا كان لديك بالفعل هذا المكون الإضافي مثبتًا في WordPress الخاص بك أو كنت تفكر في شراء ترخيص ، فسنشرح كيف يمكنك دمجه مع حساب Mailrelay الخاص بك.

بعد الوصول إلى لوحة الإدارة ، فإن أول شيء يجب عليك فعله هو النقر فوق نماذج Bloom / Opt-in. في علامة التبويب هذه ، يمكنك العثور على جميع نماذج الاشتراك التي قمت بإنشائها بالفعل. في هذه الحالة ، سننشئ نموذجًا جديدًا من البداية لمعرفة كيفية دمجه بسهولة مع Mailrelay.

لإنشاء نموذج جديد ، ما عليك سوى النقر فوق الزر الأزرق أعلى الشاشة " اشتراك جديد. "أو شكل جديد.

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

في النافذة التالية ، سيتعين عليك البدء في تكوين نموذجنا الجديد. أول شيء يجب عليك فعله هو تسميته لتتمكن من التعرف عليه داخليًا (سيكون هذا الاسم مرئيًا لك فقط ، ولن يظهر للزوار.)

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

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

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

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

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

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

لقد جئنا إلى قسم الأنماط. إذا كنت ترغب في تخصيص نموذج اشتراكك بشكل أكبر ، أو تغيير الخطوط ، أو الألوان ، أو الخلفيات ، أو أي جانب جمالي آخر ، فهذا هو المكان المناسب. في Opt-in Styling and Form Style ، يمكنك الاختيار من بين العديد من الخيارات والبدائل.

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

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

حسنًا ، لقد قمنا بالفعل بإنشاء وتكوين نموذج Bloom الخاص بنا. الخطوة التالية هي دمجها بشكل صحيح في موقعنا.

للقيام بذلك ، في نماذج Bloom / opt-in ، سنبحث عن النموذج الذي أنشأناه للتو ، وعلى اليسار ، سنجد هذا الرمز "[]."

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

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

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

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

بعد اتباع هذه الخطوات ، سيكون نموذجك الجديد متاحًا على موقعك. العملية أسهل بكثير مما كنت تعتقد ، أليس كذلك؟

· استنتاج

كما رأينا طوال المقال ، هناك العديد من الخيارات لدمج نموذج Mailrelay HTML باستخدام WordPress. في هذا المنشور ، أردنا التركيز على الأساليب التي نعتبرها سهلة حتى تفقد الخوف من التلاعب بالكود.

كما رأينا ، يمكنك دمج Mailrelay مع WordPress بدون مكونات إضافية ، من خلال قسم الأدوات أو حتى باستخدام Gutenberg ، الميزة الجديدة التي يوفرها WordPress.

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

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

والآن ، هل تريد دمج نموذج Mailrelay الخاص بك في موقع WordPress الخاص بك؟