كيفية إزالة حقول الاسم من وحدة Divi Email Optin

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

لمساعدتك في الحصول عليها القيام به، ونحن سوف، ومع ذلك، تظهر لك كيفية التخلص من الحقول اسم بصريا وجعلها تعمل وظيفيا وكذلك

نتيجة

إذا اتبعت هذا المنشور خطوة بخطوة ، فستحصل على النتيجة التالية:

لماذا تريد إزالة حقول الاسم لوحدة البريد الإلكتروني Optin

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

لتوفير وقت الزائر الخاص بك

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

لجعل الحاجز أصغر / الاعتماد على السلوك السريع

إذا قام الأشخاص بملء جميع وحدات optin التي يصادفونها على الويب ، فمن المحتمل أن ينفد الوقت. تعد نماذج Optin جزءًا من جميع أنواع مواقع الويب في الوقت الحاضر. لقد ولت الأيام التي كان الناس فيها مفتونين بهم. إذا رأوا أنه يتعين عليهم بذل الكثير من الجهد (اقرأ: يجب عليهم إكمال الكثير من الحقول المطلوبة) للاشتراك ، فربما يتجاهلونها على الأرجح. ومع ذلك ، إذا طلبت عنوان البريد الإلكتروني فقط ، فمن المرجح أنهم سيكونون على ما يرام مع ذلك. يستغرق الأمر 5 ثوانٍ كحد أقصى لكتابة عنوان بريد إلكتروني (وهو أقل من متوسط ​​مدى انتباه البشر البالغ 7 ثوانٍ).

كيفية إزالة حقول الاسم من وحدة Divi Email Optin

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

دون مزيد من التأخير ، دعونا نجعل هذا يعمل.

أضف صفحة جديدة

أول شيء عليك القيام به هو إضافة صفحة جديدة أو فتح الصفحة حيث تريد وضع وحدة Email Optin مع حقل البريد الإلكتروني فقط.

أضف وحدة البريد الإلكتروني Optin Module

بمجرد وصولك إلى تلك الصفحة ، أضف وحدة Email Optin في أي مكان تريده. بمجرد معاينة الصفحة باستخدام وحدة Email Optin Module ، سترى أنها ستبدو كما يلي:

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

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

أضف كود CSS

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

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

أضف كود CSS إلى صفحة واحدة على وجه الخصوص

لإضافة كود CSS إلى صفحة واحدة على وجه الخصوص ، انقر فوق الرمز التالي داخل الصفحة التي تعمل عليها:

داخل الشاشة التي تظهر ، انسخ والصق الأسطر التالية من كود CSS:

.et_pb_newsletter_form p:nth-child(2){
display: none !important;
}
.et_pb_newsletter_form p:nth-child(3) {
display: none !important;
}

أضف كود CSS إلى خيارات السمة

لإضافة رمز CSS إلى موقع الويب بالكامل ، انتقل إلى لوحة معلومات WordPress> Divi> خيارات السمة> قم بالتمرير لأسفل في علامة التبويب عام وأضف الأسطر التالية من كود CSS إلى حقل CSS المخصص:

.et_pb_newsletter_form p:nth-child(2){
display: none !important;
}
.et_pb_newsletter_form p:nth-child(3) {
display: none !important;
}

أضف كود jQuery

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

أضف كود jQuery إلى صفحة واحدة بشكل خاص (وحدة التعليمات البرمجية)

لإضافة كود jQuery إلى صفحة واحدة على وجه الخصوص ، أضف وحدة Code Module مباشرة أسفل وحدة Email Optin Module. افتح Code Module وضع الأسطر التالية من كود jQuery فيه:

<script type="text/javascript">
jQuery(function($){
$(".et_pb_contact_form_label").remove();
$("#et_pb_signup_firstname").val("*");
$("#et_pb_signup_email").val("");
$("#et_pb_signup_email").attr("placeholder", "Email address");
});
</script>

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

أضف كود jQuery إلى خيارات النسق

لجعل كود jQuery ينطبق على موقع الويب بأكمله ، يمكنك وضعه في خيارات السمة. للقيام بذلك ، انتقل إلى WordPress Dashboard> Divi> Theme Options> Integration وضع الأسطر التالية من كود jQuery في رأس موقع الويب الخاص بك:

<script type="text/javascript">
jQuery(function($){
$(".et_pb_contact_form_label").remove();
$("#et_pb_signup_firstname").val("*");
$("#et_pb_signup_email").val("");
$("#et_pb_signup_email").attr("placeholder", "Email address");
});
</script>

نتيجة

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

افكار اخيرة

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

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

صورة مميزة بواسطة adichrisworo / shutterstock.com