كيفية إنشاء نموذج اتصال مضمن مع Divi

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

سأوضح لك اليوم كيفية إنشاء نموذج اتصال مضمن لموقع الويب الخاص بك باستخدام Divi's Visual Builder. إن العمل المطلوب لسحب هذا الأمر يتعلق حقًا بضبط كل من العرض ومحاذاة حقول النموذج. لتحقيق ذلك ، سنستفيد من ميزات تصميم وحدة الاتصال بالإضافة إلى إضافة بعض CSS المخصصة ضمن علامة التبويب خيارات متقدمة.

إذا كنت جديدًا في Divi ، فلا تدع علامة التبويب Advanced تمنعك من معالجة هذا البرنامج التعليمي. لقد بذلت قصارى جهدي لإبقاء الأمور بسيطة وواضحة.

يتمتع.

فيما يلي مثال لما سيبدو عليه نموذج الاتصال المضمن

المفهوم والإلهام

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

تنفيذ التصميم مع Divi

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

نبدأ بإضافة قسم عادي بصف هيكل عمود واحد.

نظرًا لأنه سيكون من الصعب رؤية باقي العناصر على خلفية بيضاء ، فلنبدأ ونضيف لون الخلفية إلى قسمنا بالانتقال إلى إعدادات القسم وتحديث ما يلي:

خيارات المحتوى

لون الخلفية: # 006ea5

احفظ التغييرات

الآن يمكننا إضافة وحدة نموذج الاتصال الخاصة بنا إلى الصف.

قم بتحديث إعدادات نموذج الاتصال كما يلي:

خيارات المحتوى

إرسال نص الزر: "احصل على عرض أسعار"
البريد الإلكتروني: [أدخل عنوان البريد الإلكتروني حيث يجب إرسال الرسائل]
عرض كلمة التحقق: NO
لون خلفية النموذج: rgba (255،255،255،0)

خيارات التصميم

خط حقل النموذج: Lato
حجم خط حقل النموذج: 24 بكسل
لون نص حقل النموذج: #ffffff
نصف قطر حدود الإدخال: 3 بكسل
استخدام الحدود: نعم
لون الحدود: #ffffff
عرض الحدود: 1 بكسل
حجم نص الزر: سطح المكتب 24 بكسل ، قرص 20 بكسل ، هاتف ذكي 20 بكسل
لون نص الزر: # 0c71c3
لون خلفية الزر: # f4f11f
عرض حد الزر: 3 بكسل
نصف قطر حد الزر: 3

احفظ التغييرات

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

قم بتحديث إعدادات الحقل كما يلي:

خيارات المحتوى

معرف الحقل: "الهاتف"
العنوان: الهاتف

خيارات التصميم

عمل عرض كامل: NO
الرموز المسموح بها: أرقام فقط (0-9)

خيارات متقدمة

أدخل CSS المخصص التالي داخل مربع العنصر الرئيسي :

Max-width: 18%;
Float: left;
Margin-top: -1.5%;
Clear: none !important;

احفظ التغييرات

الآن نعود إلى علامة التبويب المحتوى من إعدادات نموذج الاتصال الخاصة بك وتكرارا مجال الهاتف الذي قمت بإنشائه وتحويله إلى حقل الرمز البريدي.

قم بتحديث إعدادات الحقل كما يلي:

خيارات المحتوى

معرّف الحقل: "Zip"
العنوان: الرمز البريدي

خيارات متقدمة

أدخل CSS المخصص التالي داخل مربع العنصر الرئيسي :

Max-width: 17%;
Margin-top: -1.5%;

احفظ التغييرات

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

انتقل إلى إعدادات حقل الاسم وقم بتحديث الخيارات المتقدمة باستخدام CSS المخصص التالي داخل مربع العنصر الرئيسي :

Max-width: 20%;
Margin-top: -1.5%;

احفظ التغييرات

انتقل بعد ذلك إلى إعدادات حقل البريد الإلكتروني وقم بتحديث الخيارات المتقدمة باستخدام CSS المخصص التالي داخل مربع العنصر الرئيسي :

Max-width: 20%;
Margin-top: -1.5%;

احفظ التغييرات

ملاحظة مهمة: لاحظ أن CSS المخصص المستخدم لكل حقل يحتوي على خاصية max-width محددة إلى نسبة معينة. تحدد هذه النسبة المئوية مدى ارتباط الحقول الخاصة بك بعرض منطقة المحتوى الخاصة بك. على سبيل المثال ، مساحة المحتوى الافتراضية لـ Divi هي 1080 بكسل ، لذا فإن حقل الاسم هو 20٪ من 1080 بكسل. من المهم معرفة ما إذا كنت تريد إنشاء مساحة أكبر للنموذج المضمن الخاص بك. كل ما عليك فعله هو ضبط قيمة النسبة المئوية لخاصية max-width حسب الحاجة.

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

الحشو المخصص: 12 بكسل للأعلى ، 14 بكسل للأسفل

احفظ التغييرات

انتقل الآن إلى إعدادات الصف ، ضمن علامة التبويب تصميم ، وقم بتحديث ما يلي:

الحشو المخصص: 48 بكسل أعلى ، 0 بكسل يمين ، 0 بكسل أسفل ، 0 بكسل يسار

احفظ التغييرات

جعلها مستجيبة

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

@media (max-width: 767px) {

p.et_pb_contact_field {
max-width: 100% !important;
}
}

إليك كيفية استجابة النموذج لأحجام الشاشات المختلفة.

إنشاء نموذج اتصال مضمّن ثلاثي الحقول

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

1. قم بتحرير النموذج المضمن الذي قمت بإنشائه للتو أو قم بتكرار النموذج.
2. حذف حقل الرمز البريدي (الآن لديك ثلاثة حقول فقط)
3. قم بتحديث إعدادات حقل الهاتف (أو أيًا كان الحقل الثالث) ، ضمن علامة التبويب خيارات متقدمة ، باستخدام CSS المخصص التالي في ملف

   Main Element box:max-width: 25%;
   float:left;
   margin-top: -1.5%;
   clear: none !important;

4. قم بتحديث إعدادات حقل البريد الإلكتروني (أو أيًا كان الحقل الثاني) ، ضمن علامة التبويب خيارات متقدمة ، باستخدام CSS المخصص التالي في مربع العنصر الرئيسي:

   max-width: 25%;
   margin-top: -1.5%;

5. قم بتحديث إعدادات حقل الاسم (أو أيًا كان الحقل الأول) ، ضمن علامة التبويب خيارات متقدمة ، باستخدام CSS المخصص التالي في مربع العنصر الرئيسي:

   max-width: 25%;
   margin-top: -1.5%;

ملاحظة: لاحظ أن خاصية max-width لكل حقل هي الآن 25٪ لزيادة عرض الحقول.

إنشاء نموذج اتصال مضمّن ذو حقلين

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

1. قم بتحرير النموذج المضمن الذي قمت بإنشائه للتو أو قم بتكرار النموذج.
2. احذف حقل الرمز البريدي وحقل الهاتف بحيث يكون لديك حقلين فقط (الاسم والبريد الإلكتروني)
3. قم بتحديث إعدادات حقل الاسم (أو أيًا كان الحقل الأول) ، ضمن علامة التبويب خيارات متقدمة ، باستخدام CSS المخصص التالي في مربع العنصر الرئيسي:

   max-width: 37%;
   margin-top: -1.5%;

4. قم بتحديث إعدادات حقل البريد الإلكتروني (أو أيًا كان الحقل الثاني) ، ضمن علامة التبويب خيارات متقدمة ، باستخدام CSS المخصص التالي في مربع العنصر الرئيسي:

   max-width: 37%;
   margin-top: -1.5%;
   clear: none !important;

إضافة أنواع أخرى من الحقول

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

هذا ما سيبدو عليه حقل القائمة المنسدلة ...

افكار اخيرة

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

نتطلع إلى الاستماع منك في التعليقات.