5 طرق فريدة لتصميم وحدة نموذج الاتصال لديفي
نشرت: 2018-11-05تعد نماذج الاتصال جزءًا حيويًا من العديد من مواقع الويب. هدفهم الأساسي هو أن تكون بديهيًا ومساعدة الزوار على التواصل بسهولة. لكن هذا لا يعني أن جميع نماذج الاتصال يجب أن تبدو بطريقة معينة ومحددة مسبقًا. يمكنك بسهولة الجمع بين تجربة بديهية وتصميم جميل. هذا بالضبط ما سنفعله في هذا المنشور. سنقوم بمشاركة 5 تصميمات فريدة لوحدة نموذج الاتصال الخاصة بـ Divi والتي يمكنك إنشاؤها باستخدام خيارات Divi المضمنة فقط.
دعنا نذهب اليها!
معاينة تصاميم وحدة نموذج الاتصال Divi
سطح المكتب
لنبدأ بإلقاء نظرة على تصميمات وحدة نموذج الاتصال Divi على سطح المكتب.
متحرك
وهذا ما تبدو عليه تصميمات وحدة نموذج الاتصال Divi على أحجام الشاشة الأصغر:
5 طرق فريدة لتصميم وحدة نموذج الاتصال لديفي
اشترك في قناتنا على اليوتيوب
إنشاء نموذج الاتصال رقم 1
إضافة قسم جديد
خلفية متدرجة
لنبدأ بالمثال الأول! أضف قسمًا جديدًا ، وانتقل إلى إعدادات الخلفية وأضف خلفية متدرجة.
- اللون 1: # 4c00ff
- اللون 2: # ffd400
- نوع التدرج: شعاعي
- اتجاه شعاعي: أسفل اليسار
- موقف البداية: 34٪
- موضع النهاية: 34٪
تباعد
بعد ذلك ، انتقل إلى إعدادات التباعد وأضف بعض قيم الحشو المخصصة.
- الحشوة العلوية: 200 بكسل
- الحشو السفلي: 200 بكسل
أضف صفًا جديدًا
هيكل العمود
أضف صفًا جديدًا باستخدام بنية العمود التالية:
لون خلفية العمود 1
بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وأضف خلفية متدرجة للعمود 1.
- العمود 1 لون الخلفية: rgba (255،255،255،0.55)
العمود 1 صورة الخلفية
أضف صورة خلفية إلى العمود الأول أيضًا.
- تكرار صورة الخلفية للعمود 1: لا يوجد تكرار
- مزيج صورة الخلفية العمود 1: الشاشة
لون خلفية العمود 2
ولون خلفية بيضاء للعمود الثاني.
- لون خلفية العمود 2: #ffffff
تحجيم
قم بتغيير إعدادات التحجيم بعد ذلك.
- معادلة ارتفاعات العمود: نعم
تباعد
قم بإزالة جميع الحشو المخصص الافتراضي أيضًا.
- الحشوة العلوية: 0 بكسل
- الحشو السفلي: 0 بكسل
نصف قطر حدود العمود
أضف بعض نصف قطر الحدود لكلا العمودين في علامة التبويب المتقدمة.
border-radius: 10px;
أضف وحدة نصية إلى العمود 1
إضافة محتوى
حان الوقت لبدء إضافة الوحدات المختلفة! أضف وحدة نصية إلى العمود الأول مع بعض المحتويات المختارة.
إعدادات النص
بعد ذلك ، انتقل إلى إعدادات النص وقم بإجراء بعض التغييرات.
- خط النص: إرضاء
- لون النص: # 333333
- حجم النص: 100 بكسل
- ارتفاع خط النص: 1em
- اتجاه النص: الوسط
تباعد
أضف بعض قيم المساحة المتروكة المخصصة أيضًا.
- الحشوة العلوية: 600 بكسل
- الحشو السفلي: 100 بكسل
مربع الظل
لإضافة عمق إلى التصميم ، استخدم ظل الصندوق الخفيف.
- مربع قوة طمس الظل: 80 بكسل
- قوة انتشار الظل المربع: -16 بكسل
- لون الظل: rgba (0،0،0،0.3)
أضف وحدة الصورة النمطية إلى العمود 2
تحميل صورة PNG
تابع بإضافة وحدة صورة إلى العمود الثاني. قم بتحميل صورة PNG المفضلة.
تحجيم
تغيير إعدادات التحجيم لهذه الوحدة.
- العرض: 25٪ (كمبيوتر مكتبي) ، 50٪ (كمبيوتر لوحي) ، 60٪ (هاتف)
- محاذاة الوحدة: المركز
تباعد
قم بإنشاء تداخل باستخدام بعض الهامش العلوي السلبي.
- الهامش الأعلى: -60٪
أضف وحدة النص رقم 1 إلى العمود 2
إضافة محتوى
أسفل وحدة الصورة مباشرةً ، أضف وحدة نصية مع بعض المحتوى.
إعدادات النص
قم بتغيير إعدادات النص لهذه الوحدة.
- خط النص: إرضاء
- لون النص: # 333333
- حجم النص: 44 بكسل
- اتجاه النص: الوسط
أضف وحدة النص رقم 2 إلى العمود 2
إضافة محتوى
أضف وحدة نصية أخرى بعد ذلك.
إعدادات النص
قم بتغيير إعدادات النص لهذه الوحدة أيضًا.
- خط النص: Arial
- لون النص: # ffd400
- حجم النص: 18 بكسل
- تباعد حروف النص: 2 بكسل
- اتجاه النص: الوسط
تباعد
أضف بعض الهامش السفلي بعد ذلك.
- الهامش السفلي: 100 بكسل
أضف وحدة نموذج الاتصال إلى العمود 2
قم بتمكين خيار "Make Fullwidth" في حقل الاسم والبريد الإلكتروني
آخر وحدة مطلوبة هي وحدة نموذج الاتصال. قبل أن تفعل أي شيء آخر ، افتح حقول الاسم والبريد الإلكتروني وقم بتغيير التخطيط.
- جعل العرض الكامل: نعم
أضف حقل الموضوع
لإنشاء هذا التصميم ، أضفنا حقلاً آخر للموضوع.
عناصر
قم بتعطيل خيار captcha بعد ذلك.
- عرض كلمة التحقق: لا
إعدادات نص حقل النموذج
قم بإجراء بعض التغييرات على إعدادات نص حقل النموذج لوحدة نموذج جهة الاتصال هذه.
- لون خلفية حقل النموذج: rgba (255،255،255،0)
- خط حقل النموذج: Arial
- وزن خط حقل النموذج: خفيف
- حجم نص حقل النموذج: 16 بكسل
- تباعد حروف حقل النموذج: 2 بكسل
إعدادات الزر
نحن نقوم بتعديل مظهر الزر أيضًا.
- استخدام الأنماط المخصصة للزر: نعم
- لون نص الزر: # ffd400
- عرض حد الزر: 0 بكسل
- تباعد حرف الزر: 2 بكسل
- خط الزر: Arial
- نمط الخط: تسطير
- لون التسطير: # 4c00ff
تباعد
أضف بعض قيم الحشو المخصصة بعد ذلك.
- الحشو السفلي: 100 بكسل
- الحشو الأيسر: 50 بكسل
- الحشوة اليمنى: 50 بكسل
الحدود
وأضف حدًا سفليًا دقيقًا لكل حقل من الحقول.
- عرض الحد السفلي: 2 بكسل
- لون الحد السفلي: #efefef
تباعد الحقول الفردية
أخيرًا وليس آخرًا ، أضف بعض الهامش السفلي لكل حقل من الحقول الفردية باستثناء الرسالة.
- الهامش السفلي: 20 بكسل
إنشاء نموذج الاتصال رقم 2
إضافة قسم جديد
خلفية متدرجة
إلى المثال التالي! أضف قسمًا جديدًا بخلفية متدرجة.
- اللون 1: # 562fef
- اللون 2: #ffffff
- نوع التدرج: خطي
- موقف البداية: 50٪
- موقف النهاية: 50٪
تباعد
أضف بعض قيم الحشو المخصصة إلى إعدادات التباعد في هذا القسم.
- الحشوة العلوية: 200 بكسل
- الحشو السفلي: 200 بكسل
أضف صفًا جديدًا
هيكل العمود
أضف صفًا جديدًا باستخدام بنية العمود التالية:
لون الخلفية
بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وأضف لونًا للخلفية إلى الصف.
- لون الخلفية: #ffffff
العمود 2 خلفية متدرجة
أضف خلفية متدرجة إلى العمود الثاني من الصف التالي.
- اللون 1: # 9932ff
- اللون 2: # 562fef
- العمود 2 نوع التدرج: خطي
- العمود 2 اتجاه التدرج: 160 درجة
تحجيم
قم بتغيير إعدادات تحجيم الصف أيضًا.
- استخدام عرض مزراب مخصص: نعم
- عرض الحضيض: 1
- معادلة ارتفاعات العمود: نعم
تباعد
ثم أضف بعض قيم التباعد المخصصة.
- الحشوة العلوية: 0 بكسل
- الحشو السفلي: 0 بكسل
- الحشوة العلوية للعمود 1: 100 بكسل
- الحشوة السفلية للعمود 1: 50 بكسل
- العمود 1 الحشوة اليسرى: 50 بكسل
- الحشوة اليمنى للعمود 1: 50 بكسل
- الحشوة العلوية للعمود 2: 100 بكسل
- الحشوة السفلية للعمود 2: 100 بكسل
- الحشوة اليسرى للعمود 2: 50 بكسل
- الحشوة اليمنى للعمود 2: 50 بكسل
الحدود
أضف "20 بكسل" لكل حد من حدود الصف.
مربع الظل
أخيرًا ، أضف ظل مربع دقيقًا إلى الصف.
- مربع قوة طمس الظل: 45 بكسل
- قوة انتشار الظل المربع: -11 بكسل
- لون الظل: rgba (0،0،0،0.3)
أضف وحدة نصية إلى العمود 1
إضافة محتوى
حان الوقت لبدء إضافة الوحدات! ابدأ بوحدة نصية في العمود الأول.
إعدادات النص
قم بتغيير إعدادات النص لهذه الوحدة.
- وزن خط النص: غامق للغاية
- نمط خط النص: أحرف كبيرة
- لون النص: # 562fef
- Text Suze: 100 بكسل (سطح المكتب) ، 80 بكسل (جهاز لوحي) ، 60 بكسل (هاتف)
- تباعد حروف النص: -10 بكسل
- ارتفاع خط النص: 1em
تباعد
أضف بعض الهامش السفلي أيضًا.
- الهامش السفلي: 50 بكسل
أضف وحدة نموذج الاتصال إلى العمود 1
عناصر
الوحدة الثانية التي سنحتاجها في العمود الأول هي وحدة نموذج الاتصال. بمجرد إضافة الوحدة ، قم بتعطيل خيار "Display Captcha".
- عرض كلمة التحقق: لا
إعدادات نص حقل النموذج
قم بتغيير لون خلفية حقل النموذج بعد ذلك.
- لون خلفية حقل النموذج: #ffffff
إعدادات الزر
العب مع إعدادات الزر أيضًا لإنشاء زر رمز بدلاً من زر يحتوي على نص.
- استخدام الأنماط المخصصة للزر: نعم
- حجم نص الزر: 73 بكسل
- لون نص بوتون: rgba (0،0،0،0)
- لون خلفية زر التحويم: rgba (255،255،255،0)
- عرض حد الزر: 0 بكسل
- لون أيقونة الزر: # 9932ff
- فقط إظهار الرمز عند التمرير للزر: لا
مربع الظل
أخيرًا ، أضف ظل مربع دقيقًا لكل حقل من الحقول.
- مربع قوة طمس الظل: 36 بكسل
- مربع قوة طمس الظل: -14 بكسل
- لون الظل: rgba (0،0،0،0.3)
أضف وحدة نصية إلى العمود 2
إضافة محتوى
الوحدة الأولى التي سنحتاجها في العمود الثاني هي وحدة نصية أخرى.
إعدادات النص
بمجرد إضافة المحتوى ، قم بتغيير إعدادات النص لهذه الوحدة.
- وزن خط النص: غامق للغاية
- لون النص: #ffffff
- حجم النص: 23 بكسل
- تباعد حروف النص: -1 بكسل
قم بإضافة الوحدة النمطية للدعاية والإعلان رقم 1 إلى العمود 2
إضافة محتوى
الوحدة الثانية التي سنحتاجها هي وحدة Blurb Module. انطلق وادخل بعض معلومات الاتصال.
حدد أيقونة
ثم اختر أيقونة مطابقة.
إعدادات الرمز
قم بتغيير إعدادات هذا الرمز.
- لون الأيقونة: #ffffff
- وضع الرمز: اليسار
إعدادات نص العنوان
تابع عن طريق إجراء بعض التغييرات على إعدادات نص العنوان بعد ذلك.
- حجم نص العنوان: 15 بكسل
- تباعد حروف العنوان: -0.5 بكسل
تباعد
وأضف بعض الهامش العلوي.
- الهامش الأعلى: 120 بكسل
استنساخ وحدة Blurb مرتين
بمجرد الانتهاء من تعديل أول وحدة Blurb Module ، يمكنك المضي قدمًا واستنساخ الوحدة مرتين.
تغيير المحتوى والرمز لكلا التكرارات
قم بتغيير المحتوى والرموز الخاصة بالنسختين المكررة لمشاركة أنواع مختلفة من معلومات الاتصال مع الزوار.
تغيير تباعد كلا التكرارات
يجب تغيير الهامش العلوي لكلا النسختين أيضًا.
- الهامش العلوي: 30 بكسل
إنشاء نموذج الاتصال # 3
إضافة قسم جديد
لون الخلفية
إلى المثال الثالث! أضف قسمًا جديدًا بلون الخلفية التالي:
- لون الخلفية: # 3491CE
تباعد
تابع بإضافة بعض قيم الحشو المخصصة في إعدادات التباعد.
- الحشوة العلوية: 200 بكسل
- الحشو السفلي: 200 بكسل
أضف الصف رقم 1
هيكل العمود
بعد ذلك ، أضف صفًا جديدًا باستخدام بنية العمود التالية:
أضف وحدة نصية
إضافة محتوى
حان الوقت لبدء إضافة الوحدات! الوحدة الأولى التي سنحتاج إلى إضافتها إلى العمود الأول هي وحدة نصية. أدخل بعض المحتوى المفضل.
إعدادات النص
ثم قم بتغيير إعدادات النص.
- وزن خط النص: غامق للغاية
- لون النص: rgba (255،255،255،0.24)
- حجم النص: 100 بكسل (سطح المكتب) ، 86 بكسل (جهاز لوحي) ، 60 بكسل (هاتف)
- ارتفاع خط النص: 1em
- اتجاه النص: الوسط
تباعد
أضف بعض الهامش السفلي السلبي أيضًا.
- الهامش السفلي: -100 بكسل
أضف الصف رقم 2
هيكل العمود
يحتوي الصف الثاني الذي نحتاجه لإكمال هذا المثال على بنية العمود التالية:
خلفية متدرجة
بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وأضف خلفية متدرجة.
- اللون 1: # 11CE84
- اللون 2: # 10C77F
- نوع التدرج: خطي
- اتجاه التدرج: 160 درجة
- موقف البداية: 50٪
- موقف النهاية: 50٪
تحجيم
قم بتغيير إعدادات التحجيم أيضًا.
- استخدام عرض مزراب مخصص: نعم
- عرض الحضيض: 1
- معادلة ارتفاعات العمود: نعم
تباعد
أضف بعض قيم الحشو المخصصة بعد ذلك.
- الحشوة العلوية: 150 بكسل
- الحشو السفلي: 100 بكسل
- الحشو الأيسر: 50 بكسل
- الحشوة اليمنى: 50 بكسل
الحدود
بعد ذلك ، انتقل إلى إعدادات الحدود وأضف "20 بكسل" لكل زاوية من الزوايا. استخدم حدًا سفليًا أيضًا.
- عرض الحد السفلي: 10 بكسل
- لون الحد السفلي: # 1ba35a
مربع الظل
أكمل إعدادات الصف بإضافة ظل مربع دقيق.
- مربع قوة طمس الظل: 80 بكسل
- قوة انتشار الظل المربع: -24 بكسل
- لون الظل: rgba (0،0،0،0.3)
أضف وحدة نموذج الاتصال إلى العمود 1
قم بتمكين خيار "Make Fullwidth" في حقل الاسم والبريد الإلكتروني
الوحدة الأولى التي نحتاجها في العمود الأول من الصف هي وحدة نموذج الاتصال. افتح حقل الاسم والبريد الإلكتروني وقم بتغيير إعدادات التخطيط.
- جعل العرض الكامل: نعم
عناصر
قم بتعطيل captcha بعد ذلك.
- عرض كلمة التحقق: لا
إعدادات الزر
وتغيير إعدادات الزر.
- استخدام الأنماط المخصصة للزر: نعم
- لون نص الزر: #ffffff
- اللون 1: # 3AA0E3
- اللون 2: # 3491CE
- نوع التدرج: خطي
- اتجاه التدرج: 155 درجة
- موقف البداية: 50٪
- موقف النهاية: 50٪
- عرض حد الزر: 0 بكسل
- نصف قطر حدود الزر: 10 بكسل
- قوة انتشار الظل المربع: -2 بكسل
- لون الظل: # 0a60af
الحدود
نضيف أيضًا "5 بكسل" من الزوايا الدائرية لكل حقل من الحقول.
أضف وحدة نصية إلى العمود 2
إضافة محتوى
في العمود الثاني ، الوحدة الأولى التي سنحتاجها هي وحدة نصية. انطلق وادخل بعض المحتوى.
لون الخلفية
ثم قم بتغيير لون الخلفية.
- لون الخلفية: rgba (255،255،255،0.13)
إعدادات النص
العب مع إعدادات النص أيضًا.
- وزن خط النص: خفيف
- لون النص: #ffffff
- حجم النص: 15 بكسل
- تباعد الحروف النصية: -0.5 بكسل
تباعد
وأضف بعض الحشو المخصص لمنح الوحدة مساحة للتنفس.
- الحشوة العلوية: 12 بكسل
- الحشو السفلي: 12 بكسل
- الحشو الأيسر: 10 بكسل
- الحشوة اليمنى: 10 بكسل
الحدود
نضيف أيضًا "20 بكسل" إلى الزاويتين العلويتين اليسرى والسفلى اليسرى. علاوة على ذلك ، سنضيف حدًا يسارًا.
- عرض الحد الأيسر: 34 بكسل
- لون الحد الأيسر: # edf000
الرؤية
لجعل هذا التصميم يتناسب مع أحجام الشاشة المختلفة ، سنقوم بتعطيل وحدة النص على الهاتف والجهاز اللوحي.
استنساخ وحدة النص مرتين
بمجرد الانتهاء من تعديل أول وحدة نصية ، انطلق واستنسخ الوحدة مرتين.
تغيير محتوى كلا التكرارات
غيّر محتوى النسختين إلى شيء آخر.
تغيير تباعد كلا التكرارات
وأضف بعض الهامش العلوي لإنشاء مسافة بين كل وحدة من الوحدات.
- الهامش العلوي: 20 بكسل
تغيير حدود كلا التكرارات
أخيرًا وليس آخرًا ، قم بتغيير لون الحد الأيسر لكل تكرار على حدة.
- اللون 1: # 00faff
- اللون 2: # 00f76f
إنشاء نموذج الاتصال رقم 4
إضافة قسم جديد
لون الخلفية
إلى المثال الرابع! أضف قسمًا جديدًا باستخدام لون الخلفية التالي:
- لون الخلفية: #FFBABD
تباعد
قم بإزالة المساحة المتروكة الافتراضية لهذا القسم.
- الحشوة العلوية: 0 بكسل
- الحشو السفلي: 0 بكسل
أضف صفًا جديدًا
هيكل العمود
تابع بإضافة صف جديد باستخدام بنية العمود التالية:
خلفية متدرجة
بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وأضف خلفية متدرجة.
- اللون 1: #ffffff
- اللون 2: rgba (41،196،169،0)
- نوع التدرج: شعاعي
- اتجاه شعاعي: المركز
- موقف البداية: 38٪
- موضع النهاية: 38٪
تحجيم
قم بتغيير إعدادات التحجيم بعد ذلك.
- جعل هذا الصف بعرض كامل: نعم
- استخدام عرض مزراب مخصص: نعم
- عرض الحضيض: 1
تباعد
وإضافة بعض الحشو المخصص.
- الحشوة العلوية: 160 بكسل
- الحشو السفلي: 160 بكسل
أضف وحدة نصية
إضافة محتوى
الوحدة الأولى التي نحتاجها هي وحدة نصية. انطلق وادخل بعض المحتوى.
إعدادات النص
قم بتغيير إعدادات النص وفقًا لذلك:
- خط النص: Abril Fatface
- لون النص: # 640076
- حجم النص: 45 بكسل (سطح المكتب) ، 34 بكسل (جهاز لوحي) ، 20 بكسل (هاتف)
- ارتفاع خط النص: 1em
- اتجاه النص: الوسط
تباعد
أضف بعض قيم التباعد المخصصة بعد ذلك.
- الهامش الأعلى: 300 بكسل
- الحشوة العلوية: 50 بكسل
- الحشو السفلي: 50 بكسل
إضافة وحدة نموذج الاتصال
قم بتمكين خيار "Make Fullwidth" في حقل الاسم والبريد الإلكتروني
الوحدة الثانية والأخيرة التي نحتاجها هي وحدة نموذج الاتصال. افتح كلاً من حقلي الاسم والبريد الإلكتروني وغيّر إعدادات التخطيط.
- جعل العرض الكامل: نعم
عناصر
ثم قم بتعطيل خيار captcha في إعدادات العناصر.
- عرض كلمة التحقق: لا
إعدادات نص حقل النموذج
قم بإجراء بعض التغييرات على إعدادات نص حقل النموذج أيضًا.
- لون خلفية حقل النموذج: # fff6f6
- لون نص حقل النموذج: # ff7c7c
إعدادات الزر
قم بتغيير الزر إلى زر رمز باستخدام الإعدادات التالية:
- استخدام الأنماط المخصصة للزر: نعم
- حجم نص الزر: 88 بكسل
- لون نص الزر: rgba (255،255،255،0)
- لون خلفية زر التحويم: rgba (255،255،255،0)
- عرض حد الزر: 0 بكسل
- لون أيقونة الزر: # e60085
- فقط إظهار الرمز عند التمرير للزر: نعم
تحجيم
والتلاعب بقيم التحجيم لجعل التصميم يتناسب مع جميع أحجام الشاشة.
- العرض: 42٪ (كمبيوتر مكتبي) ، 50٪ (جهاز لوحي) ، 77٪ (هاتف)
- محاذاة الوحدة: المركز
تباعد
تابع بإضافة بعض قيم التباعد المخصصة إلى الوحدة النمطية.
- الهامش السفلي: 200 بكسل
- الحشو الأيسر: 50 بكسل
- الحشوة اليمنى: 50 بكسل
الحدود
وأضف "10 بكسل" لكل زاوية.
هامش الزر
أخيرًا وليس آخرًا ، اضغط على زر الرمز إلى اليمين باستخدام السطر التالي من كود CSS في علامة التبويب المتقدمة:
margin-right: -100px;
إنشاء نموذج الاتصال رقم 5
إضافة قسم جديد
خلفية متدرجة
إلى المثال الأخير! أضف قسمًا جديدًا بخلفية التدرج التالية:
- اللون 1: # 4bf2d0
- اللون 2: #ffffff
- نوع التدرج: شعاعي
- اتجاه شعاعي: يسار
- موقف البداية: 36٪
- موضع النهاية: 36٪
تباعد
بعد ذلك ، انتقل إلى إعدادات التباعد وأضف بعض المساحة المتروكة المخصصة.
- الحشوة العلوية: 250 بكسل
- الحشو السفلي: 250 بكسل
أضف صفًا جديدًا
هيكل العمود
بمجرد الانتهاء من تعديل إعدادات القسم ، أضف صفًا جديدًا باستخدام بنية العمود التالية:
لون الخلفية
بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وأضف لونًا للخلفية.
- لون الخلفية: #ffffff
لون خلفية العمود 1
أضف لون خلفية آخر إلى العمود الأول.
- لون خلفية العمود 1: # f9f9f9
تحجيم
بعد ذلك ، قم بتغيير إعدادات تغيير حجم الصف.
- استخدام العرض المخصص: نعم
- الوحدة: PX
- العرض المخصص: 1730 بكسل
- استخدام عرض مزراب مخصص: نعم
- عرض الحضيض: 1
- معادلة ارتفاعات العمود: نعم
تباعد
وأضف بعض قيم التباعد المخصصة لمطابقة جميع أحجام الشاشات.
- الحشوة العلوية: 0 بكسل
- الحشو السفلي: 0 بكسل
- الحشوة العلوية للعمود 1: 200 بكسل (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)
- الحشوة السفلية للعمود 1: 150 بكسل (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)
- العمود 1 الحشوة اليسرى: 50 بكسل
- الحشوة اليمنى للعمود 1: 50 بكسل
- الحشوة العلوية للعمود 2: 200 بكسل (سطح المكتب) ، 100 بكسل (الكمبيوتر اللوحي والهاتف)
- الحشوة السفلية للعمود 2: 150 بكسل ، 100 بكسل (الكمبيوتر اللوحي والهاتف)
مربع الظل
آخر شيء ستحتاج إلى القيام به في إعدادات الصف هو إضافة ظل مربع دقيق.
- مربع قوة طمس الظل: 56 بكسل
- قوة انتشار الظل المربع: -17 بكسل
- لون الظل: rgba (0،0،0،0.3)
أضف وحدة نصية إلى العمود 1
إضافة محتوى
حان الوقت لبدء إضافة الوحدات! أضف وحدة نصية إلى العمود الأول.
إعدادات النص
بمجرد إضافة المحتوى ، انتقل إلى إعدادات النص وقم بإجراء بعض التغييرات.
- خط النص: Cambay
- لون النص: # 000000
- حجم النص: 26 بكسل
- تباعد الحروف النصية: -0.5 بكسل
- اتجاه النص: صحيح
تباعد
أضف بعض الهامش العلوي أيضًا.
- الهامش العلوي: 60 بكسل
الرؤية
وإخفاء الوحدة على كل من الهاتف والجهاز اللوحي.
استنساخ وحدة النص مرتين
تغيير محتوى كلا التكرارات
بمجرد الانتهاء من تعديل أول وحدة نصية ، انطلق واستنسخ الوحدة مرتين. غيّر محتوى النسختين.
تغيير تباعد كلا التكرارات
قم بتعديل الهامش العلوي لكلتا النسختين أيضًا.
- الهامش العلوي: 80 بكسل
أضف وحدة نموذج الاتصال إلى العمود 2
قم بتمكين خيار "Make Fullwidth" في حقل الاسم والبريد الإلكتروني
الوحدة الوحيدة التي نحتاجها في العمود الثاني هي وحدة نموذج الاتصال. افتح حقول الاسم والبريد الإلكتروني وغيّر إعدادات التخطيط.
- جعل العرض الكامل: نعم
عناصر
قم بتعطيل خيار captcha بعد ذلك.
- عرض كلمة التحقق: نعم
إعدادات نص حقل النموذج
بعد ذلك ، انتقل إلى إعدادات نص حقل النموذج وقم بإجراء بعض التعديلات.
- لون خلفية حقل النموذج: rgba (255،255،255،0)
- خط حقل النموذج: Cambay
إعدادات الزر
وأنشئ زرًا فريدًا باستخدام إعدادات الأزرار التالية:
- استخدام الأنماط المخصصة للزر: نعم
- حجم نص الزر: 64 بكسل (سطح المكتب) ، 50 بكسل (الجهاز اللوحي) ، 40 بكسل (الهاتف)
- لون نص الزر: # 000000
- اللون 1: # 4bf2d0
- اللون 2: rgba (41،196،169،0)
- نوع التدرج: شعاعي
- اتجاه شعاعي: المركز
- موقف البداية: 25٪
- موضع النهاية: 25٪
- عرض حد الزر: 0 بكسل
- فقط إظهار الزر عند التمرير للزر: لا
تباعد
أضف بعض الهامش العلوي إلى هذه الوحدة أيضًا.
- الهامش الأعلى: 50 بكسل
الحدود
واستخدم حدًا سفليًا دقيقًا لكل حقل من الحقول.
- عرض الحد السفلي: 0.5 بكسل
- لون الحد السفلي: # 000000
تباعد الحقول الفردية
أخيرًا وليس آخرًا ، أضف الهامش السفلي التالي لكل حقل على حدة ، وبذلك تكون قد انتهيت!
- الهامش السفلي: 50 بكسل
معاينة
سطح المكتب
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على تصميمات وحدة نموذج الاتصال Divi على سطح المكتب.
متحرك
وهذا ما يمكن أن تتوقعه من تصميمات نموذج الاتصال Divi على أحجام شاشة أصغر:
افكار اخيرة
في هذا المنشور ، شاركنا 5 تصميمات جميلة لوحدة نموذج الاتصال Divi يمكنك استخدامها بسهولة وتعديلها لأي موقع ويب تقوم بإنشائه. تعد نماذج الاتصال جزءًا حيويًا من العديد من مواقع الويب ، لذا من المهم التأكد من أن التصميم الخاص بك يقنع زوارك بالتواصل معك. إذا كان لديك أي أسئلة أو اقتراحات ، فتأكد من ترك تعليق في قسم التعليقات أدناه!