5 تصميمات لتفعيل البريد الإلكتروني يمكنك إنشاؤها باستخدام وحدة Divi للبريد الإلكتروني
نشرت: 2019-01-14كلنا نحب المشتركين الجدد في قائمة البريد الإلكتروني الخاصة بنا. وإحدى الطرق الأساسية للحصول على مشتركين جدد هي تزويد زوارك بنموذج اشتراك بالبريد الإلكتروني مصمم جيدًا. لهذا السبب في هذا البرنامج التعليمي ، سأوضح لك كيفية تحقيق خمسة تصميمات مختلفة باستخدام وحدة الاشتراك في البريد الإلكتروني Divi للمساعدة في إثارة خيالك بشأن ما هو ممكن باستخدام هذه الوحدة القوية والمرنة.
نظرة خاطفة
فيما يلي معاينة لتصميمات Divi Email Opt-in Module الخمسة التي سنتعامل معها اليوم.
# 1 اختيار مكدسات الظل
ابدأ في تصميم # 1
# 2 التقيد الكبير والصغير
ابدأ في تصميم # 2
# 3 نحيل Opt-in
ابدأ في تصميم # 3
# 4 الاشتراك في عرض الكتاب
ابدأ في التصميم # 4
# 5 قطع الإطار التقيد في
ابدأ في تصميم # 5
ما تحتاجه للبدء
اشترك في قناتنا على اليوتيوب
في هذا البرنامج التعليمي ، كل ما ستحتاجه هو Divi. سنقوم ببناء كل واحد من الصفر لذلك لا داعي لتصميم مسبق. ومع ذلك ، سأستخدم بعض الصور من بعض حزم التخطيط لدينا ولكن يمكنك استخدام الصور الخاصة بك إذا كنت تريد ذلك.
أيضًا ، من المهم أن تعرف أنك لن تكون قادرًا على رؤية حقول نموذج optin على الموقع المباشر حتى تقوم بتعيين مزود / قائمة بريد إلكتروني إلى وحدة الاشتراك في البريد الإلكتروني الخاصة بك. يمكنك القيام بذلك في إعدادات اختيار البريد الإلكتروني الخاص بك ضمن حساب البريد الإلكتروني.
الآن دعنا نصل إلى تلك التصاميم!
# 1 اختيار مكدسات الظل
يضيف هذا التصميم اثنين من ظلال الصندوق إلى وحدة الاشتراك في البريد الإلكتروني Divi للحصول على تأثير التراص الفريد الذي يجعل النموذج منبثقًا. تتم إضافة ظل المربع الأول إلى وحدة الاشتراك في البريد الإلكتروني ويتم إضافة ظل المربع الثاني إلى الصف الذي يحتوي على حجم مخصص وحدود لجعله يعمل.
إليك كيف يتم ذلك.
أنشئ أولاً قسمًا جديدًا به صف من عمود واحد وأضف وحدة الاشتراك في البريد الإلكتروني إلى الصف.
افتح إعدادات الاشتراك في البريد الإلكتروني وقم بتحديث ما يلي:
لون الخلفية: # 1a0a38
التخطيط: الجسم في الأعلى ، النموذج في الأسفل
زوايا الحقول المستديرة: 0 بكسل
اتجاه النص: الوسط
وزن خط العنوان: خفيف
حجم نص العنوان: 36 بكسل
لون نص الزر: #ffffff
لون خلفية الزر: # 00ac69
عرض حد الزر: 0 بكسل
نصف قطر حدود الزر: 0 بكسل
الحشو المخصص: 3vw top ، 3vw bottom ، 5vw left ، 5vw right
الآن دعنا نضيف طبقة ظل الصندوق الأولى خلف وحدة الاشتراك في البريد الإلكتروني الخاصة بنا.
Box Shadow: انظر لقطة الشاشة
مربع الظل الأفقي: 25 بكسل
مربع الظل الوضع الرأسي: -25 بكسل
لون الظل: rgba (26،10،56،0.82)
الآن دعنا نضيف مقتطفًا صغيرًا من CSS المخصص لإخراج الحشو الأيسر الذي تمت إضافته إلى النموذج افتراضيًا. انتقل إلى علامة التبويب خيارات متقدمة وأضف CSS التالي ضمن نموذج الاشتراك.
padding-left: 0px !important;
هذا يعتني بإعدادات وحدة الاشتراك في البريد الإلكتروني. الآن دعنا نعدل صفنا. افتح إعدادات الصف وقم بتحديث ما يلي:
العرض المخصص: 600 بكسل
الحشو المخصص: 25 بكسل للأعلى ، 0 بكسل للأسفل ، 25 بكسل لليمين
عرض الحد السفلي: 25 بكسل
لون الحد السفلي: rgba (0،0،0،0)
عرض الحد الأيسر: 25 بكسل
لون الحد الأيسر: rgba (0،0،0،0)
الآن يمكننا إضافة ظل الصندوق إلى الصف.
Box Shadow: انظر لقطة الشاشة
مربع الظل الأفقي: 50 بكسل
مربع الظل الوضع الرأسي: -50 بكسل
قوة انتشار الظل المربع: -25 بكسل
لون الظل: rgba (26،10،56،0.55)
الآن دعنا نتحقق من التصميم النهائي.
# 2 التقيد الكبير والصغير
تصميم الاشتراك في البريد الإلكتروني هذا ضئيل ونظيف وكبير. تتناسب حقول النموذج مع حجم المتصفح بحيث تبدو رائعة على جميع الأجهزة. وهي ليست كبيرة جدًا لدرجة أنها تجبر المستخدم على التمرير.
هيريس كيفية القيام بذلك.
أنشئ أولاً قسمًا جديدًا به صف من عمود واحد وأضف وحدة الاشتراك في البريد الإلكتروني إلى الصف.
افتح إعدادات الاشتراك في البريد الإلكتروني وقم بتحديث المحتوى لتضمين نص العنوان والتذييل.
ثم قم بتحديث الخلفية بلون أو صورة داكنة:
لون الخلفية: # 121212
صورة الخلفية: هذا اختياري. أنا أستخدم واحدًا من حزمة تخطيط Podcast
قبل أن ننتقل إلى علامة تبويب التصميم لمزيد من التخصيص ، نحتاج إلى إفساح المجال لعناصر الشكل الكبيرة التي سنضيفها. للقيام بذلك ، انتقل إلى إعدادات الصف وقم بتحديث ما يلي:
العرض المخصص: 100٪
نصيحة: يعد استخدام عرض مخصص بنسبة 100٪ طريقة رائعة للتأكد من عدم حصول تصميمك على أي هامش يمين أو يسار على الهاتف المحمول. إذا كنت تستخدم خيار "Make Fullwidth" ، فسيكون الحد الأقصى للعرض 89٪ ، لذا ستظل لديك هوامش على الهاتف المحمول.
انتقل الآن مرة أخرى إلى إعدادات وحدة الاشتراك في البريد الإلكتروني وقم بتحديث التصميم التالي:
التخطيط: الجسم في الأعلى ، النموذج في الأسفل
لون خلفية حقل النموذج: rgba (0،0،0،0)
زوايا الحقول المستديرة: 0 بكسل
عرض الحدود السفلى للحقول: 2 بكسل
لون الحد السفلي للحقول: #ffffff
اتجاه النص: الوسط
خط العنوان: Lato
وزن خط العنوان: خفيف
نمط خط العنوان: TT
حجم نص العنوان: 4vw
ارتفاع خط العنوان: 1em
لون نص الحقل: #ffffff
الخط الميداني: لاتو
وزن خط الحقل: خفيف
حجم نص الحقل: 3.5vw
تباعد الحروف الميدانية: 0.1em
ارتفاع خط الحقل: 1.3em
تباعد حروف الجسم: 0.5em
حجم نص الزر: 4vw
نصف قطر حدود الزر: 0 بكسل
تباعد حرف الزر: 0.1em
خط الزر: Lato
وزن الخط: خفيف
الحشو المخصص: 10vw top ، 10vw bottom ، 10vw left ، 10vw right
لاحظ استخدام وحدة طول vw لحجم الخط جنبًا إلى جنب مع وحدة طول em لارتفاع السطر وتباعد الأحرف. يتيح ذلك إمكانية تغيير حجم النص والتصميم بسلاسة عند ضبط متصفحك.
تتضمن الخطوة الأخيرة بضع مقتطفات من CSS المخصص لتحسين التصميم. انتقل إلى علامة التبويب خيارات متقدمة وأضف CSS المخصص التالي ضمن حقول نموذج الاشتراك:
font-size: 3.5vw;
سيسمح هذا بحجم النص عند الكتابة لمطابقة نص العنصر النائب في حقول النموذج.
ثم دعونا نضيف بعض الهامش المخصص فوق الزر لمنحه مساحة صغيرة للتنفس. أضف ما يلي ضمن زر الاشتراك:
margin-top: 3.5vw;
الآن دعنا نتحقق من التصميم النهائي.
# 3 نحيل Opt-in
من المؤكد أن هذا التصميم التالي سيكون حلاً شائعًا للشركات والمدونات التي تتطلع إلى توفير بعض المساحة الرأسية في منشوراتها أو صفحاتها المقصودة. على الرغم من أن وحدة Divi Email Opt-in هي الأفضل للأشكال الرأسية التقليدية ، يمكنك في الواقع تحويل النموذج إلى شكل أفقي نحيف باستخدام مقتطف صغير من CSS.
هيريس كيفية القيام بذلك.
أنشئ قسمًا جديدًا به صف من عمود واحد وأضف وحدة الاشتراك في البريد الإلكتروني إلى الصف.
افتح إعدادات الاشتراك في البريد الإلكتروني وقم بتحديث المحتوى ليشمل عنوانًا ولكن لا شيء آخر.
ثم قم بتحديث التصميم بخلفية ولون زر كما يلي:
لون الخلفية: # 54677d
التخطيط: الجسم في الأعلى ، النموذج في الأسفل
اتجاه النص: الوسط
لون خلفية الزر: # b0c94f
عرض حد الزر: 0 بكسل
حان الآن وقت استخدام CSS المخصص. نظرًا لأننا نريد تصميم النموذج النحيف فقط على سطح المكتب (وليس على الهاتف المحمول) ، فسنضيف CSS إلى الصفحة (ضمن إعدادات الصفحة) باستخدام معرف CSS مخصص لاستهداف نمط النموذج.
للقيام بذلك ، انتقل إلى علامة التبويب "خيارات متقدمة" وامنح وحدة الاشتراك معرف CSS مخصصًا.
معرف CSS: نحيف
سيتم استخدام هذا لاستهداف هذا النموذج باستخدام CSS الخارجي الذي سنضيفه إلى الصفحة.
افتح الآن إعدادات صفحة Divi Builder وأضف CSS التالية ضمن علامة التبويب Advanced.
@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 يستخدم بالفعل المرن لتصميم النموذج على الواجهة الخلفية ، فإن CSS هذا يخرج خاصية الالتفاف المرن التي تتسبب في محاذاة حقول النموذج عموديًا. والنتيجة هي تخطيط أفقي لحقول النموذج. يؤدي ضبط خاصية الأساس المرن إلى 23٪ إلى تعيين عرض كل حقل من حقول النموذج بشكل أساسي. ونظرًا لأننا أضفنا CSS داخل استعلام وسائط ، فلن يحدث التصميم إلا على سطح المكتب مع عرض التخطيط الافتراضي للنموذج على الهاتف المحمول.
ها هو التصميم النهائي.
# 4 الاشتراك في عرض الكتاب
يشتمل هذا التصميم على بعض الصور داخل وحدة الاشتراك في البريد الإلكتروني لأغراض الترويج لعرض كتاب مجاني للتسجيل. للقيام بذلك ، كل ما عليك فعله هو إضافة صورة باستخدام محرر wysiwyg المدمج لإضافة الوصف ومحتوى التذييل. صحيح أنه يمكنك إنجاز هذا التصميم نفسه من خلال الجمع بين وحدة الاشتراك في البريد الإلكتروني والوحدات النمطية الأخرى في صف من عمودين ، لكنني اعتقدت أنه سيكون من المفيد إظهار كيفية القيام بكل ذلك في نفس الوحدة النمطية.
هيريس كيفية القيام بذلك.
أنشئ قسمًا جديدًا به صف من عمود واحد وأضف وحدة الاشتراك في البريد الإلكتروني إلى الصف.
افتح إعدادات الاشتراك في البريد الإلكتروني وابق في علامة تبويب المحتوى.
تحت الوصف ، قم بتقصير النص الافتراضي إلى جملتين فقط. ثم أضف صورة من مكتبة الوسائط الخاصة بك عن طريق النقر فوق الزر "إضافة وسائط".
تريد التأكد من أن عرض الصورة لا يزيد عن 200 بكسل. في هذا المثال ، أستخدم الحجم المتوسط للصورة.
ضمن التذييل ، أضف بضع جمل لمحتوى نص التذييل ثم انقر فوق الزر إضافة وسائط لإضافة صورة شعار أسفل النص (هذا اختياري بالطبع).
للتأكد من توسيط الصورة ، اضبط خيار المحاذاة على المركز عند إضافة الصورة من مكتبة الوسائط.
أنت الآن جاهز لتحديث باقي التصميم. ابدأ بإعطاء الوحدة صورة خلفية وتدرج خلفية أعلى الصورة لجعل النص أكثر قابلية للقراءة.
صورة الخلفية: [إضافة صورة]
تدرج الخلفية اللون الأيسر: rgba (0،0،0،0.5)
تدرج الخلفية اللون الأيمن: rgba (0،0،0،0.5)
وضع التدرج فوق صورة الخلفية: نعم
ثم قم بتحديث باقي التصميم على النحو التالي:
لون نص الزر: # 333333
لون خلفية الزر: # ffcb7a
عرض حد الزر: 0 بكسل
تباعد حرف الزر: 5 بكسل
وزن الخط: عريض للغاية
نمط الخط: TT
العرض: 700 بكسل
محاذاة الوحدة: مركز
الحشو المخصص: 3vw top ، 3vw bottom ، 3vw left ، 3vw right
ها هو التصميم النهائي.
# 5 قطع الإطار التقيد في
يعد أسلوب التصميم البسيط هذا طريقة رائعة لمنح اشتراك بريدك الإلكتروني مظهرًا فريدًا. الحيلة هي استخدام فواصل الأقسام التي لها نفس لون خلفية القسم. ثم عن طريق ضبط ارتفاع الفواصل ، يمكنك تداخل نموذج الاشتراك في البريد الإلكتروني من أجل قطع الحواف بطريقة فريدة للحصول على تأثير تأطير جميل.
إليك كيفية القيام بذلك.
أنشئ قسمًا جديدًا به صف من عمود واحد وأضف وحدة الاشتراك في البريد الإلكتروني إلى الصف.
افتح إعدادات الاشتراك في البريد الإلكتروني وامنح الوحدة النمطية الخاصة بك تدرجًا في الخلفية.
خلفية متدرجة اللون الأيسر: # 8300e9
تدرج الخلفية اللون الصحيح: # 06c8ff
نوع التدرج: شعاعي
اتجاه شعاعي: أعلى اليسار
ثم قم بتحديث باقي التصميم على النحو التالي:
وزن خط العنوان: غامق
حجم نص العنوان: 36 بكسل
العرض: 70٪ (كمبيوتر مكتبي) ، 100٪ (كمبيوتر لوحي وهاتف ذكي)
محاذاة الوحدة: مركز
الحشو المخصص: 6vw Top ، 6vw Bottom ، 6vw Left ، 6vw Right
الزوايا الدائرية: 50 بكسل أعلى اليسار ، 0 بكسل أعلى اليمين ، 50 بكسل أسفل اليمين ، 0 بكسل أسفل اليسار
احفظ إعداداتك.
ثم قم بتحديث إعدادات الصف الخاصة بك بعرض مخصص.
العرض المخصص: 100٪
نحن الآن جاهزون لتخصيص إعداد القسم لإضافة تأثير الإطار المقطوع مع فواصل الأقسام هذه.
افتح إعدادات القسم وقم بتحديث ما يلي:
لون الخلفية: # 222222
نمط الفاصل العلوي: انظر الصورة
لون الحاجز العلوي: # 222222 (تأكد من تطابق لون خلفية القسم)
ارتفاع الحاجز العلوي: 12vw (سطح المكتب) ، 150 بكسل (الكمبيوتر اللوحي والهاتف الذكي)
ترتيب الفاصل العلوي: فوق محتوى القسم
نمط الحاجز السفلي: انظر الصورة
لون الحاجز السفلي: # 222222 (تأكد من تطابق لون خلفية القسم)
ارتفاع الحاجز السفلي: 12vw (سطح المكتب) ، 150 بكسل (الكمبيوتر اللوحي والهاتف الذكي)
تكرار المقسم السفلي الأفقي: 0.8x
قلب الحاجز السفلي: رأسي وأفقي
ترتيب الحاجز السفلي: فوق محتوى القسم
الآن دعنا نتحقق من التصميم النهائي.
تحقق من المنشور حول إنشاء تصميمات إطارات فريدة لمزيد من المعلومات حول تقنية التصميم هذه.
افكار اخيرة
إن تصميمات الاشتراك في البريد الإلكتروني هذه هي في الحقيقة مجرد غيض من فيض عندما تفكر في جميع خيارات الأنماط المتاحة داخل Divi. عن قصد ، أبقيت التصميمات بسيطة بما يكفي لمنحك الخطوط العريضة لما يمكنك القيام به. لا تتردد في استكشاف المزيد من التصميمات المصقولة بنفسك عن طريق إضافة خطوط وألوان وتأثيرات تحوم جديدة. ولا تنس أن تحصل على بعض المرح في هذه العملية.
أتطلع إلى الاستماع منك في التعليقات.
هتافات!