جميعنا نرغب في إضافة مشتركين جدد إلى قائمتنا البريدية. ومن أهم طرق جذب مشتركين جدد تزويد زوارك بنموذج اشتراك بريد إلكتروني مُصمم بشكل جيد. لذلك، سأوضح لك في هذا البرنامج التعليمي كيفية إنشاء ثلاثة تصاميم مختلفة باستخدام وحدة اشتراك البريد الإلكتروني Divi لإلهام خيالك حول إمكانيات هذه الوحدة القوية والمرنة.
مسح
فيما يلي نظرة عامة على مفاهيم وحدة البريد الإلكتروني Divi الثلاثة التي سنستكشفها اليوم.
الاشتراك في Shadow Stacks رقم 1
# 2 الاشتراك الكبير والحد الأدنى
#3 نموذج اشتراك صغير
ما تحتاجه للبدء
في هذا البرنامج التعليمي، كل ما تحتاجه هو Divi. سنبني كل هذه النماذج من الصفر، لذا لا حاجة لتخطيط مُعدّ مسبقًا. مع ذلك، سأستخدم بعض الصور من حزم التخطيط، ويمكنك استخدام صورك الخاصة إذا أردت.
بالإضافة إلى ذلك، من المهم معرفة أنك لن تتمكن من رؤية حقول نموذج الاشتراك على الموقع الإلكتروني إلا بعد تعيين موفر/قائمة بريد إلكتروني لوحدة اشتراك البريد الإلكتروني لديك. يمكنك القيام بذلك من إعدادات الاشتراك في بريدك الإلكتروني ضمن حساب البريد الإلكتروني.
الآن دعونا نصل إلى هذه الرسومات!
الاشتراك في Shadow Stacks رقم 1
يُضيف هذا التصميم ظلّين مربعين إلى وحدة الاشتراك بالبريد الإلكتروني Divi لإضفاء تأثير تكديس فريد يُبرز الشكل. يُضاف ظلّ المربع الأول إلى وحدة الاشتراك بالبريد الإلكتروني، ويُضاف ظلّ المربع الثاني إلى الصف، الذي يتميز بحجم وحدود مُخصّصين لجعله مُناسبًا.
وإليك كيف يتم ذلك.
ابدأ بإنشاء قسم جديد بصف مكون من عمود واحد، ثم أضف وحدة تسجيل البريد الإلكتروني إلى الصف.
افتح إعدادات اتصال البريد الإلكتروني وقم بتحديث ما يلي:
لون الخلفية: #1a0a38
التخطيط: الجسم في الأعلى، الشكل على القاعدة
زوايا الحقول المستديرة: 0 بكسل
اتجاه النص:
وزن خط عنوان المركز:
مسح عنوان حجم النص: 36 بكسل
لون زر النص: #ffffff
لون خلفية الزر: #00ac69
عرض حد الزر: 0px
نصف قطر الزر: 0px
الحشو المخصص: 3vw أعلى، 3vw أسفل، 5vw يسار، 5vw يمين
الآن دعونا نضيف أول طبقة ظل للمربع خلف وحدة الاشتراك في البريد الإلكتروني الخاصة بنا.
Box Shadow: انظر لقطة الشاشة
موضع الظل الأفقي للموضع: 25px
Box Shadow الوضع الرأسي: -25px
لون الظل: rgba (26,10,56,0.82)
الآن دعونا نضيف مقتطفًا صغيرًا من كود CSS المخصص لإزالة الحشو الأيسر المُضاف افتراضيًا إلى النموذج. انتقل إلى علامة التبويب خيارات متقدمة وأضف CSS التالي ضمن نموذج العضوية.
padding-left: 0px !important; |
وهذا يدعم إعدادات وحدة الاشتراك في البريد الإلكتروني. الآن دعونا نعدل صفنا. افتح إعدادات الصف وقم بتحديث ما يلي:
العرض المخصص: 600px
الحشو المخصص: 25 بكسل للأعلى، 0 بكسل للأسفل، 25 بكسل لليمين
عرض الحد السفلي: 25px
لون الحد السفلي: rgba(0,0,0,0)
عرض الحد الأيسر: 25px
لون الحد الأيسر: rgba (0,0,0, 0)
يمكننا الآن إضافة ظل الصندوق إلى السطر.
Box Shadow: انظر لقطة الشاشة
موضع الظل الأفقي للموضع: 50px
Box Shadow الوضع الرأسي: -50px
قوة انتشار ظل الصندوق: -25 بكسل
لون الظل: rgba(26,10,56,0.55)
كل ما عليك فعله الآن هو تعديل النص الموجود في النموذج. الآن دعونا نرى التصميم النهائي.
# 2 الاشتراك الكبير والحد الأدنى
تصميم نموذج الاشتراك بالبريد الإلكتروني بسيط وأنيق وكبير. تتكيف حقول النموذج مع حجم المتصفح، مما يجعله رائعًا على جميع الأجهزة. كما أنه ليس كبيرًا جدًا بحيث يتطلب التمرير.
إليك كيفية القيام بذلك.
ابدأ بإنشاء قسم جديد بصف مكون من عمود واحد، ثم أضف وحدة تسجيل البريد الإلكتروني إلى الصف.
افتح إعدادات مشاركة البريد الإلكتروني وقم بتحديث المحتوى ليتضمن العنوان ونص التذييل.
ثم قم بتحديث الخلفية بلون أو صورة داكنة:
لون الخلفية: #121212
صورة الخلفية: هذا اختياري. أستخدم واحدًا من حزمة تخطيط Podcast
قبل أن ننتقل إلى علامة التبويب "تصميم" لمزيد من التخصيص، نحتاج إلى ترك بعض المساحة لعناصر النموذج الكبيرة التي سنضيفها. للقيام بذلك، انتقل إلى إعدادات الصف وقم بتحديث ما يلي:
العرض المخصص: 100٪
مجلس: يعد استخدام عرض مخصص بنسبة 100% طريقة رائعة لضمان عدم احتواء تصميمك على هوامش يسارية أو يمينية على الهاتف المحمول. إذا استخدمت خيار "إنشاء عرض كامل"، فسيكون الحد الأقصى لعرضك هو 89%، وبالتالي سيكون لديك دائمًا هوامش على هاتفك المحمول.
ارجع الآن إلى إعدادات وحدة تسجيل البريد الإلكتروني وقم بتحديث القالب التالي:
التصميم: الجسم في الأعلى والشكل في الأسفل
لون خلفية حقل النموذج: rgba (0,0,0,0)
حقول الزوايا الدائرية: 0 بكسل
عرض الحدود السفلية للحقول: 2 بكسل
لون الحدود السفلية للحقول: #ffffff
اتجاه النص: المركز
عنوان الخط : لاتو
عنوان الخط : نور
نمط خط العنوان: TT
حجم نص العنوان: 4vw
ارتفاع سطر العنوان: 1em
لون نص الحقل: #ffffff
خط الحقل: لاتو
وزن خط الحقل: خفيف
حجم النص: 3.5vw
تباعد الحروف الميدانية: 0.1em
ارتفاع خط المجال: 1.3م
تباعد حروف الجسم: 0.5em
حجم نص الزر: 4vw
نصف قطر الزر: 0px
تباعد حروف الزر: 0.1em
خط الزر: لاتو
وزن الخط: خفيف
الحشو المخصص: 10vw أعلى، 10vw أسفل، 10vw يسار، 10vw يمين
لاحظ استخدام وحدة الطول vw لحجم الخط مع وحدة الطول em لارتفاع الخط وتباعد الحروف. يتيح ذلك للنص والتصميم التكيف بسلاسة أثناء ضبطك في متصفحك.
تتضمن الخطوة الأخيرة بعض مقتطفات CSS المخصصة لتحسين التصميم. انتقل إلى علامة التبويب خيارات متقدمة وأضف CSS المخصص التالي ضمن حقول نموذج العضوية:
font-size: 3.5vw; |
سيسمح هذا لحجم النص أثناء الكتابة بمطابقة نص العنصر النائب في حقول النموذج الخاص بك.
بعد ذلك، دعونا نضيف هامشًا مخصصًا أعلى الزر لمنحه بعض المساحة للتنفس. أضف ما يلي أسفل زر الاشتراك:
margin-top: 3.5vw; |
الآن دعونا نرى التصميم النهائي.
#3 نموذج اشتراك صغير
من المؤكد أن هذا التصميم الجديد سيكون حلاً شائعًا للشركات والمدونات التي تسعى لتوفير المساحة العمودية في منشوراتها أو صفحاتها المقصودة. في حين أن وحدة الاشتراك بالبريد الإلكتروني من Divi تُناسب النماذج العمودية التقليدية، يمكنك تحويلها إلى نموذج أفقي بسطر واحد باستخدام شفرة CSS صغيرة.
إليك كيفية القيام بذلك.
أنشئ قسمًا جديدًا يحتوي على صف مكون من عمود واحد وأضف وحدة عضوية البريد الإلكتروني إلى الصف.
افتح إعدادات الاشتراك في البريد الإلكتروني وقم بتحديث المحتوى ليتضمن عنوانًا، وليس أي شيء آخر.
ثم قم بتحديث التصميم بخلفية ولون الزر كما يلي:
لون الخلفية: #54677د
التصميم: الجسم في الأعلى والشكل في الأسفل
اتجاه النص: المركز
لون خلفية الزر: #b0c94f
عرض حد الزر: 0px
الآن هو الوقت المناسب لـ CSS المخصص. نظرًا لأننا نريد أن يكون تصميم النموذج النحيف سطح المكتب فقط (وليس الهاتف المحمول)، فسنضيف CSS إلى الصفحة (ضمن إعدادات الصفحة) باستخدام معرف CSS مخصص لاستهداف نمط النموذج.
للقيام بذلك، انتقل إلى علامة التبويب خيارات متقدمة وقم بتعيين معرف CSS مخصص لوحدة العضوية.
معرف CSS: نحيف
سيتم استخدام هذا لاستهداف هذا النموذج باستخدام CSS الخارجي الذي سنضيفه إلى الصفحة.
افتح الآن إعدادات صفحة Divi Builder وأضف CSS التالي ضمن علامة التبويب خيارات متقدمة.
@media (min-width: 980px){ #skinny.et_pb_newsletter .et_pb_newsletter_fields { flex-wrap: nowrap !important; } #skinny.et_pb_newsletter .et_pb_newsletter_fields>* { flex-basis: 23%; } } #skinny .et_pb_newsletter_form { padding-left: 0px; }
نظرًا لأن Divi يستخدم بالفعل flex لتصميم النموذج على الواجهة الخلفية، فإن CSS هذا يزيل خاصية flex-wrap التي تقوم بمحاذاة حقول النموذج عموديًا. والنتيجة هي تخطيط أفقي لحقول النموذج. من خلال ضبط خاصية القاعدة المرنة إلى 23%، يمكنك بشكل عام ضبط عرض كل حقل من حقول النموذج. ولأننا أضفنا CSS في استعلام الوسائط، فلن يتم التصميم إلا على سطح المكتب مع عرض تخطيط النموذج الافتراضي على الهاتف المحمول.
هنا هو التصميم النهائي.
هذا كل شيء في هذا البرنامج التعليمي، آمل أن يساعدك في إنشاء نماذج اشتراك فريدة على Divi Builder.