كيفية تصميم قسم اشتراك جذاب لأي نوع من أنواع المواقع باستخدام Divi

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

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

دعنا نذهب اليها!

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

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة على النتيجة على أحجام الشاشات المختلفة.

لوحة الألوان # 1

• اللون # 1: rgba (79،35،255،0.88)
• اللون # 2: # e09900
• اللون # 3: # 4f23ff

لوحة الألوان # 2

• اللون # 1: rgba (255،35،97،0.75)
• اللون # 2: # e09900
• اللون # 3: # d80e00

لوحة الألوان # 3

• اللون # 1: rgba (41،17،147،0.75)
• اللون # 2: # 00ffd8
• اللون # 3: # 291193

مقاربة

اختر إحدى لوحات الألوان أعلاه (أو قم بإنشاء واحدة خاصة بك) واستخدم هذه الألوان خلال البرنامج التعليمي. سنشير إلى اللون # 1 أو # 2 أو # 3 عندما نستخدم لونًا في إعداداتنا. نحن أيضًا نجعل وحدة الاشتراك تتداخل مع عمودين ونؤكد على فوائد الاشتراك في قائمة البريد الإلكتروني.

إعادة إنشاء قسم الاشتراك

إضافة قسم جديد

أعلى الحاجز

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

• نمط الحاجز: البحث في القائمة
• لون الفاصل: #FFFFFF
• ارتفاع الحاجز: 200 بكسل
• فاصل الفاصل: عمودي

مقسم سفلي

أضف نفس نوع الحاجز إلى أسفل القسم الخاص بك:

• نمط الحاجز: البحث في القائمة
• لون الفاصل: #FFFFFF
• ارتفاع الحاجز: 200 بكسل
• فاصل الفاصل: عمودي

تباعد

افتح إعدادات التباعد بعد ذلك وقم بإزالة كل المساحة المتروكة الافتراضية للقسم الخاص بك عن طريق إضافة "0 بكسل" إلى الحشوة العلوية والسفلية.

أضف صفًا جديدًا

هيكل العمود

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

خلفية متدرجة

افتح إعدادات صفك وتابع بإضافة الخلفية المتدرجة التالية:

• لون التدرج الأول: اللون # 1
• لون التدرج الثاني: اللون # 2
• اتجاه التدرج: 123 درجة
• وضع التدرج فوق صورة الخلفية: نعم

الصورة الخلفية

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

لون الخلفية العمود 2

بعد ذلك ، أضف "rgba (255،255،255،0.87)" كلون خلفية العمود 2.

تحجيم

سنقوم أيضًا بتقليل المسافة بين كلا العمودين وجعل الصف يشغل عرض الشاشة بالكامل من خلال تطبيق إعدادات التحجيم التالية:

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم

تباعد

آخر شيء عليك القيام به ضمن إعدادات الصف هو إضافة بعض المساحة المتروكة المخصصة:

• الحشوة العلوية والسفلية: 0 بكسل
• الحشوة العلوية للعمود 1: 200 بكسل
• الحشوة السفلية للعمود 1: 100 بكسل
• الحشوة العلوية للعمود 2: 300 بكسل (سطح المكتب) 50 بكسل (الكمبيوتر اللوحي والهاتف)
• الحشوة السفلية للعمود 2: 100 بكسل (الكمبيوتر اللوحي والهاتف)
• العمود 2 الحشوة اليسرى واليمنى: 50 بكسل

قم بإضافة الوحدة النمطية للدعاية والإعلان رقم 1 إلى العمود 1

إضافة عنوان دعاية

لنبدأ الآن في إضافة وحداتنا! سنبدأ بالعمود الأول بإضافة نموذج Blurb Module. بمجرد أن ننتهي من تعديل وحدة Blurb النمطية هذه ، سنعيد استخدام إعداداتها للاثنين الآخرين أيضًا. بعد إضافة نموذج Blurb Module ، قم بتسميته بعنوان.

إضافة رمز دعاية مغالى فيها

أضف رمزًا إلى وحدة Blurb Module الخاصة بك بعد ذلك. لقد استخدمنا الرمز التالي للوحدة الأولى:

إعدادات الرمز

قم بتغيير مظهر الرمز عن طريق إضافة الإعدادات التالية:

• لون الأيقونة: #FFFFFF
• وضع الرمز: الأعلى
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 43 بكسل

إعدادات نص العنوان

نحن نستخدم فقط عنوان دعاية مغالى فيها. لهذا السبب سنحتاج إلى تعديل إعدادات النص الخاصة بـ H4 فقط:

• خط العنوان: Yeseva One
• محاذاة نص العنوان: الوسط
• لون نص العنوان: #FFFFFF
• تباعد حرف العنوان: -1 بكسل

تحجيم

سنقوم أيضًا بتعديل عرض الوحدة النمطية Blurb وفقًا لأحجام الشاشة المختلفة:

• عرض المحتوى: 150 بكسل
• العرض: 33٪ (كمبيوتر مكتبي) ، 40٪ (جهاز لوحي) ، 60٪ (هاتف)
• محاذاة الوحدة: المركز

تباعد

أخيرًا ، أضف الحشو المخصص التالي إلى الوحدة النمطية Blurb أيضًا:

• الحشوة العلوية والسفلية: 50 بكسل

استنساخ وحدة Blurb مرتين وتعديل وحدة Blurb المميزة

تغيير الرمز والمحتوى

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

أضف لون الخلفية

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

تغيير رمز ولون نص العنوان

سنقوم أيضًا بتغيير لون الرمز وعنوان H4 إلى "# 000000".

أضف الزوايا الدائرية

بعد ذلك ، سنضيف "5 بكسل" إلى كل ركن من أركان إعدادات الحدود.

مربع الظل

أخيرًا وليس آخرًا ، سنضيف القليل من العمق باستخدام خيار ظل الصندوق الأول.

أضف وحدة النص رقم 1 إلى العمود 2

إعدادات النص

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

• خط النص: Yeseva One
• لون النص: # 000000
• حجم النص: 54 بكسل
• ارتفاع خط النص: 1em

أضف وحدة النص رقم 2 إلى العمود 2

تباعد

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

أضف وحدة اختيار البريد الإلكتروني إلى العمود 2

لون الخلفية

الوحدة التالية التي سنحتاج إلى إضافتها هي وحدة البريد الإلكتروني Optin Module. بمجرد إضافته ، امض قدمًا وقم بتغيير لون الخلفية إلى "rgba (255،255،255،0)."

حساب البريد الإلكتروني

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

مجالات

تابع عن طريق فتح إعدادات الحقل وتعطيل حقلي الاسم الأول واسم العائلة.

الإعدادات الميدانية

سنقوم أيضًا بتعديل إعدادات الحقل. قم بإزالة الزوايا الدائرية بإضافة "0px" لكل زاوية. أضف خيار ظل المربع الأول أيضًا.

إعدادات الزر

بعد ذلك ، قم بتغيير مظهر الزر الخاص بك:

• لون نص الزر: #FFFFFF
• لون خلفية الزر: اللون # 3
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل
• خط الزر: Yeseva One
• إظهار رمز الزر: نعم
• لون رمز الزر: #FFFFFF
• وضع رمز الزر: يسار
• فقط إظهار الرمز عند التمرير للزر: لا
• Box Shadow: حدد الخيار الأول

تباعد

أخيرًا ، اجعل وحدة الاشتراك تتداخل مع كلا العمودين باستخدام إعدادات التباعد التالية:

• الهامش العلوي: 20 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
• الهامش الأيسر: -60٪ (سطح المكتب والكمبيوتر اللوحي) ، 0 بكسل (الهاتف)
• الهامش الأيمن: 60٪ (كمبيوتر مكتبي) ، 50٪ (جهاز لوحي) ، 0 بكسل (هاتف)

أضف وحدة متابعة الوسائط الاجتماعية إلى Colum 2

أضف العديد من الشبكات الاجتماعية حسب الرغبة

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

زوايا مدورة

بمجرد إضافة جميع الشبكات الاجتماعية ، أضف "50 بكسل" إلى كل ركن من أركان إعدادات الحدود.

تباعد

سنقوم أيضًا بدفع الوحدة لأسفل بإضافة "50 بكسل" إلى الهامش العلوي.

تغيير لون الخلفية لكل شبكة اجتماعية على حدة

أخيرًا وليس آخرًا ، قم بتغيير لون الخلفية لكل شبكة من الشبكات الاجتماعية على حدة إلى "# 000000".

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة على أحجام الشاشات المختلفة.

افكار اخيرة

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