Divi: كيفية تخصيص وحدة "نموذج الاتصال"

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

ال أشكال تفاصيل الاتصال جزء أساسي من العديد من مواقع الويب. هدفهم الرئيسي هو أن يكونوا بديهيًا ومساعدة الزوار على التواصل بسهولة. 

لكن هذا لا يعني أن كل شيء أشكال يجب أن يكون لجهات الاتصال مظهر دقيق ومحدّد مسبقًا. يمكنك بسهولة الجمع بين تجربة بديهية وتصميم جميل. هذا هو بالضبط ما سنفعله في هذا البرنامج التعليمي. 

سوف نشارك 3 تصميم فريد للوحدة معلومات الاتصال de Divi التي يمكنك إنشاؤها باستخدام خيارات Divi المضمنة فقط.

دعونا نذهب!

نظرة عامة على تصميمات وحدة Divi Contact Form

إصدارات سطح المكتب

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

إصدارات المحمول

وإليك ما تبدو عليه أحجام الشاشات الأصغر:

تحميل DIVI الآن !!!

كيفية تخصيص وحدة نموذج الاتصال Divi: 3 أمثلة

اقرأ أيضا: Divi: كيفية إنشاء قسم لأعضاء الفريق كمنصة دائرية

إنشاء نموذج الاتصال # 1

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

خلفية التدرج

لنبدأ بالمثال الأول! أضف قسمًا جديدًا ، وانتقل إلى إعدادات الخلفية وأضف خلفية متدرجة.

• توقف متدرج
  • 34٪: # 4c00ff
  • 34٪: # ffd400
• النوع: دائري
• اتجاه التدرج: أسفل اليسار

مباعدة

بعد ذلك ، انتقل إلى خيار Spacing في علامة التبويب Design وقم بتغيير الإعدادات على النحو التالي.

• المساحة المتروكة (أعلى وأسفل): 200 بكسل

أضف سطرًا جديدًا

هيكل العمود

أضف صفًا جديدًا باستخدام بنية العمود التالية:

العمود 1: لون الخلفية

بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف ، ثم إعدادات العمود 1 وأضف لون الخلفية أدناه

• الخلفية: rgba (255,255,255,0.55،XNUMX،XNUMX،XNUMX)

العمود 1: صورة الخلفية

أضف أيضًا صورة خلفية إلى العمود الأول.

• تكرار صورة الخلفية: بدون تكرار
• مزيج صورة الخلفية: شاشة

العمود 2: صورة الخلفية

ولون خلفية بيضاء للعمود الثاني.

• الخلفية: #ffffff

التحجيم

ثم قم بتعديل معلمات التحجيم.

• معادلة ارتفاعات العمود: نعم

مباعدة

قم أيضًا بإزالة جميع الحشوات الافتراضية المخصصة.

• المساحة المتروكة (أعلى وأسفل): 0 بكسل

نصف قطر حد العمود

أضف نصف قطر حد لكلا العمودين في علامة التبويب المتقدمة.

border-radius: 10px;

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

إضافة محتوى

حان الوقت لبدء إضافة الوحدات المختلفة! أضف وحدة نصية إلى العمود الأول بمحتوى من اختيارك.

إعدادات النص

بعد ذلك ، انتقل إلى علامة التبويب تصميم في وحدة النص وقم بإجراء بعض التغييرات.

• النص:
  • الخط: إرضاء
  • لون النص: # 333333
  • الحجم: 100 بكسل
  • ارتفاع الخط: 1 م
  • المحاذاة: المركز

مباعدة

إضافة أيضا قيم التعبئة المخصصة.

• الحشو (أعلى): 600 بكسل
• الحشوة (أسفل): 100 بكسل

صندوق الظل

لإضافة عمق إلى التصميم ، استخدم ظل الصندوق الخفيف.

• مربع قوة طمس الظل: 80 بكسل
• قوة انتشار الظل المربع: -16 بكسل
• لون الظل: rgba (0,0,0,0.3،XNUMX،XNUMX،XNUMX)

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

تحميل صورة

تابع بإضافة وحدة صورة إلى العمود الثاني. قم بتحميل صورة من اختيارك.

التحجيم

قم بتغيير إعدادات التحجيم لهذه الوحدة.

• العرض: 25٪ (كمبيوتر مكتبي) ، 50٪ (كمبيوتر لوحي) ، 60٪ (هاتف)
• محاذاة الوحدة: المركز

مباعدة

قم بإنشاء تداخل باستخدام هامش علوي سلبي.

• الهامش (الأعلى): -60٪

الحدود

قم بتعديل حدود الصورة كما يلي:

• الزوايا الدائرية: 100 بكسل (جميع الزوايا)

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

إضافة محتوى

أسفل وحدة الصورة مباشرةً ، أضف وحدة نصية تحتوي على محتوى.

إعدادات النص

قم بتحرير إعدادات النص لهذه الوحدة.

• النص:
  • الخط: إرضاء
  • لون النص: # 333333
  • حجم النص: 44 بكسل
  • التوجه: المركز

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

إضافة محتوى

ثم أضف وحدة نصية أخرى.

إعدادات النص

قم أيضًا بتغيير إعدادات النص لهذه الوحدة.

• النص:
  • الخط: Arial
  • لون النص: # ffd400
  • لون النص: 18 بكسل
  • تباعد الأحرف: 2 بكسل
  • التوجه: المركز

مباعدة

ثم أضف الهامش السفلي.

• الهامش (السفلي): 100 بكسل

أضف وحدة نموذج جهة الاتصال إلى العمود 2

قم بتنشيط خيار "Make Fullwidth" في حقل الاسم والبريد الإلكتروني

آخر وحدة مطلوبة هي وحدة نموذج الاتصال. قبل القيام بأي شيء آخر ، افتح حقلي الاسم والبريد الإلكتروني وغيّر التخطيط.

• جعل العرض الكامل: نعم

أضف حقل الموضوع

لإنشاء هذا التصميم ، أضفنا حقلاً آخر للموضوع.

الحماية من البريد المزعج

ثم قم بتعطيل خيار captcha.

• استخدام Basic Captcha: NO

إعدادات نص حقل النموذج

قم بإجراء بعض التغييرات على إعدادات نص حقل النموذج لوحدة نموذج جهة الاتصال هذه

• مجالات:
  • لون الخلفية: rgba (255,255,255,0،XNUMX،XNUMX)
  • الخط: Arial
  • وزن الخط: خفيف
  • حجم النص: 16 بكسل
  • تباعد الأحرف: 2 بكسل

إعدادات زر

نقوم أيضًا بتغيير مظهر الأزرار.

• استخدام حجم مخصص للزر: نعم
• زر:
  • لون النص: # ffd400
  • عرض الحدود: 0 بكسل
  • تباعد الأحرف: 2 بكسل
  • الخط: Arial
  • نوع الخط: U
  • لون التسطير: # 4c00ff

مباعدة

ثم أضف بعض قيم الحشو المخصصة.

• الحشوة (أسفل): 100 بكسل
• الحشو (يسار ويمين): 50 بكسل

الحدود

وأضف حدًا سفليًا دقيقًا لكل حقل من الحقول.

• عرض المدخلات السفلي: 2 بكسل
• مدخلات لون الحد السفلي: #efefef

التباعد بين الحقول الفردية

أخيرًا ، أضف هامشًا سفليًا لكل حقل من الحقول الفردية باستثناء حقل الرسالة.

• الهامش (السفلي): 20 بكسل

إنشاء نموذج الاتصال # 2

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

خلفية التدرج

دعنا ننتقل إلى المثال التالي! أضف قسمًا جديدًا بخلفية متدرجة.

• توقفات متدرجة:
  • 50٪: # 562fef
  • 50٪: #ffffff
• نوع التدرج: خطي

مباعدة

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

• المساحة المتروكة (أعلى وأسفل): 200 بكسل

أضف سطرًا جديدًا

هيكل العمود

أضف صفًا جديدًا باستخدام بنية العمود التالية:

لون الخلفية

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وأضف لونًا للخلفية إلى الصف.

• لون الخلفية: #ffffff

2 عمود خلفية متدرجة

أضف خلفية متدرجة إلى العمود الثاني في الصف.

• توقفات متدرجة:
  • 0٪: # 9932ff
  • 100٪: # 562fef
  • النوع: خطي
  • التوجيه: 160 درجة

التحجيم

قم أيضًا بتعديل معلمات تحجيم الخط.

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

مباعدة

بعد ذلك ، أضف قيم التباعد المخصصة.

• خط :
  • المساحة المتروكة (أعلى وأسفل): 0 بكسل

• العمود 1:
  • المساحة المتروكة: 100 بكسل (أعلى) ، 50 بكسل (أسفل)
  • الحشو (يسار ويمين): 50 بكسل

• العمود 2:
  • المساحة المتروكة (أعلى وأسفل): 100 بكسل
  • الحشو (يسار ويمين): 50 بكسل

الحدود

أضف "20 بكسل" إلى كل حد من حدود الخط.

صندوق الظل

أخيرًا ، أضف ظل مربع دقيقًا إلى الخط.

• مربع قوة طمس الظل: 45 بكسل
• قوة انتشار الظل المربع: -11 بكسل
• لون حزين: rgba (0,0,0,0.3،XNUMX،XNUMX،XNUMX)

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

إضافة محتوى

حان الوقت لبدء إضافة الوحدات! ابدأ بوحدة نصية في العمود الأول.

إعدادات النص

قم بتحرير إعدادات النص لهذه الوحدة.

• النص:
  • وزن الخط: عريض للغاية
  • نمط الخط: TT
  • اللون: # 562fef
  • الحجم: 100 بكسل (سطح المكتب) ، 80 بكسل (جهاز لوحي) ، 60 بكسل (هاتف)
  • تباعد الأحرف: -10 بكسل
  • ارتفاع الخط: 1 م

مباعدة

أضف أيضًا هامشًا سفليًا.

• الهامش (السفلي): 50 بكسل

أضف وحدة نموذج جهة الاتصال إلى العمود 1

عناصر

الوحدة الثانية التي سنحتاجها في العمود الأول هي وحدة نموذج الاتصال بمجرد إضافة الوحدة ، قم بإيقاف تشغيل خيار "Use Basic Captcha".

• استخدام Basic Captcha: NO

إعدادات نص حقل النموذج

ثم قم بتغيير لون الخلفية لحقول النموذج.

• لون خلفية الحقول: #ffffff

إعدادات زر

قم أيضًا بالتجول باستخدام إعدادات الزر لإنشاء زر رمز بدلاً من زر نص.

• استخدام الأنماط المخصصة للزر: نعم
• زر:
  • حجم النص: 73 بكسل
  • لون النص: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX) (افتراضي) ،
  • لون الخلفية: rgba (255,255,255,0،XNUMX،XNUMX،XNUMX) (Hover)
  • عرض الحدود: 0 بكسل
  • لون الأيقونة: # 9932ff
• إظهار الرمز فقط عند التمرير فوق الزر: لا

صندوق الظل

أخيرًا ، أضف ظل مربع دقيقًا إلى كل حقل من الحقول.

• مربع قوة طمس الظل: 36 بكسل
• قوة انتشار الظل المربع: -14 بكسل
• لون الظل: rgba (0,0,0,0.3،XNUMX،XNUMX،XNUMX)

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

إضافة محتوى

الوحدة الأولى التي سنحتاجها في العمود الثاني هي وحدة نصية أخرى.

إعدادات النص

بمجرد إضافة المحتوى ، قم بتحرير إعدادات النص لهذه الوحدة.

• النص:
  • وزن الخط: عريض للغاية
  • نمط الخط: TT
  • اللون: #ffffff
  • الحجم: 23 بكسل
  • تباعد الأحرف: -1 بكسل

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

إضافة محتوى

الوحدة الثانية التي سنحتاجها هي وحدة Blurb. انطلق وادخل بعض معلومات الاتصال.

حدد الرمز

ثم اختر الرمز المقابل.

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

قم بتغيير إعدادات هذا الرمز.

• لون الأيقونة: #ffffff
• وضع الصورة / الرمز: صحيح

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

تابع عن طريق إجراء بعض التغييرات على إعدادات نص العنوان بعد ذلك.

• حجم نص العنوان: 15 بكسل
• تباعد حروف العنوان: -0,5 بكسل

مباعدة

وأضف هامشًا علويًا.

• الهامش (أعلى): 120 بكسل

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

بمجرد الانتهاء من تحرير أول وحدة Blurb ، يمكنك المضي قدمًا واستنساخ الوحدة مرتين.

قم بتعديل المحتوى ورمز النسختين المكررة

قم بتحرير محتوى ورموز النسختين المكررة لمشاركة أنواع مختلفة من معلومات الاتصال مع الزوار.

قم بتغيير التباعد بين النسختين المكررتين

يجب أيضًا تغيير الهامش العلوي للنسختين المكررة.

• الهامش (أعلى): 30 بكسل

إنشاء نموذج الاتصال # 3

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

لون الخلفية

دعنا ننتقل إلى المثال الثالث! أضف قسمًا جديدًا بلون الخلفية التالي:

• لون الخلفية: # 3491CE

مباعدة

تابع بإضافة قيم حشو مخصصة في إعدادات التباعد.

• المساحة المتروكة (أعلى وأسفل): 200 بكسل

أضف السطر رقم 1

هيكل العمود

بعد ذلك ، أضف صفًا جديدًا باستخدام بنية العمود التالية:

أضف وحدة نصية

إضافة محتوى

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

إعدادات النص

بعد ذلك ، قم بتغيير إعدادات النص.

• النص:
  • وزن الخط: عريض للغاية
  • لون النص: rgba (255,255,255,0.24،XNUMX،XNUMX،XNUMX)
  • حجم النص: 100 بكسل (سطح المكتب) ، 70 بكسل (جهاز لوحي) ، 36 بكسل (هاتف)
  • ارتفاع الخط: 1 م
  • التوجه: المركز

مباعدة

أضف أيضًا هامشًا سفليًا سلبيًا.

• الهامش (السفلي): -100 بكسل

أضف السطر 2

هيكل العمود

يحتوي الصف الثاني الذي نحتاجه لإكمال هذا المثال على بنية العمود التالية:

خلفية متدرجة

بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الخط وأضف خلفية متدرجة.

• توقفات متدرجة:
  • 50٪: # 11CE84
  • 50٪: # 10C77F
• نوع التدرج: خطي
• التوجيه: 160 درجة

التحجيم

أيضا تغيير المعلمات التحجيم.

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

مباعدة

ثم أضف بعض قيم المساحة المتروكة.

• المساحة المتروكة: 150 بكسل (أعلى) ، 100 بكسل (أسفل)
• المساحة المتروكة: 50 بكسل (يسار ويمين)

الحدود

ثم انتقل إلى إعدادات الحدود وأضف "20 بكسل" إلى كل زاوية. استخدم أيضًا الحد السفلي.

• الزوايا الدائرية: 20 بكسل
• عرض الحد السفلي: 10 بكسل
• لون الحد السفلي: # 1ba35a

صندوق الظل

أكمل إعدادات الخط بإضافة ظل مربع دقيق.

• مربع قوة طمس الظل: 80 بكسل
• قوة انتشار الظل المربع: -24 بكسل
• لون الظل: rgba (0,0,0,0.3،XNUMX،XNUMX،XNUMX)

أضف وحدة نموذج جهة الاتصال إلى العمود 1

قم بتنشيط خيار "Make Fullwidth" في حقل الاسم والبريد الإلكتروني

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

• عمل عرض كامل: نعم

عناصر

ثم قم بتعطيل كلمة التحقق.

• استخدام Basic Captcha: NO

إعدادات زر

وتغيير إعدادات الزر.

• استخدام الأنماط المخصصة للزر: نعم
• لون نص الزر: #ffffff
• توقفات متدرجة:
  • 50٪: # 3AA0E3
  • 50٪: # 3491CE
• نوع التدرج: خطي
• اتجاه التدرج: 155 درجة -
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 10 بكسل
• قوة انتشار الظل المربع: -2 بكسل
• لون الظل: # 0a60af

أنظر أيضا: Divi: كيفية تخصيص السلة والبحث عن أيقونات وحدة "Fullwidth Menu"

الحدود

نضيف أيضًا "5 بكسل" من الزوايا الدائرية إلى كل حقل من الحقول.

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

إضافة محتوى

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

لون الخلفية

ثم قم بتغيير لون الخلفية.

• الخلفية: rgba (255,255,255,0.13،XNUMX،XNUMX،XNUMX)

إعدادات النص

قم أيضًا بالتحرير باستخدام إعدادات النص.

• النص:
  • وزن الخط: خفيف
  • لون النص: #ffffff
  • حجم النص: 15 بكسل
  • تباعد الأحرف: -0,5 بكسل

مباعدة

وأضف حشوة مخصصة لمنح الوحدة مساحة للتنفس.

• المساحة المتروكة (أعلى وأسفل): 12 بكسل
• الحشو (يسار ويمين): 10 بكسل

الحدود

نضيف أيضًا "20 بكسل" في الركنين العلوي الأيسر والسفلي الأيسر. علاوة على ذلك ، سنضيف حدًا يسارًا.

• الزوايا الدائرية: 20 بكسل (أعلى اليسار وأسفل اليسار)
• عرض الحد الأيسر: 34 بكسل
• لون الحد الأيسر: # edf000

رؤية

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

وحدة استنساخ النص مرتين

بمجرد الانتهاء من تحرير وحدة النص الأولى ، امض قدمًا واستنسخ الوحدة مرتين.

قم بتعديل محتويات النسختين

غيّر محتويات النسختين إلى شيء آخر.

قم بتغيير التباعد بين النسختين المكررتين

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

• الهامش (أعلى): 20 بكسل

قم بتعديل حدود نسختين مكررتين

أخيرًا ، قم بتغيير لون الحد الأيسر لكل نسخة مكررة على حدة.

• اللون 1: # 00faff
• اللون 2: # 00f76f

انظر أيضا مقالتنا على كيفية إنشاء شريط تمرير أكورديون سريع الاستجابة

مسح

نسخة سطح المكتب

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على تصميمات وحدة Divi Contact Form على سطح المكتب.

الجوال

وإليك ما يمكنك توقعه من تصميمات نموذج الاتصال من Divi بأحجام شاشة أصغر:

تحميل DIVI الآن !!!

وفي الختام

في هذا المنشور ، شاركنا 3 تصميمات رائعة لوحدة Divi Contact Form يمكنك استخدامها بسهولة وتعديلها لأي موقع ويب تقوم بإنشائه. 

ال أشكال تعد جهات الاتصال جزءًا أساسيًا من العديد من مواقع الويب، لذا من المهم التأكد من أن تصميمك يقنع زوار موقعك بالتواصل معك. 

نأمل أن يلهمك هذا البرنامج التعليمي لمشاريع Divi التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.

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

لا تتردد في الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...