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

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

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

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

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

دعونا نذهب!

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

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

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

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

وهذه هي صورها على الشاشات الأصغر حجماً:

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

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

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

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

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

خلفية التدرج

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

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

مباعدة

بعد ذلك، قم بالوصول إلى خيار التباعد في علامة التبويب (التصميم) وقم بتعديل الإعدادات على النحو التالي.

• المساحة المتروكة (أعلى وأسفل): 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

قم بتفعيل خيار "جعل العرض كاملاً" في حقل الاسم والبريد الإلكتروني

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

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

أضف حقل كائن

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

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

بعد ذلك، قم بتعطيل خيار التحقق من الكابتشا.

• استخدام 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 بكسل

الحدود

أضف '20px' إلى حدود كل سطر.

صندوق الظل

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

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

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

إضافة محتوى

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

إعدادات النص

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

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

مباعدة

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

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

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

عناصر

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

• استخدام 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

قم بتفعيل خيار "جعل العرض كاملاً" في حقل الاسم والبريد الإلكتروني

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

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

عناصر

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

• استخدام 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 على سطح المكتب.

الهاتف

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

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

الخاتمة

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

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

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

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

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

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

...