تحتاج إلى الجمع بين الحقول المضمنة وحقول النطاق الكامل للوحدة النمطية معلومات الاتصال de Divi ?
Le نموذج الاتصال عنصر مهم يجب تضمينه في موقع الويب الخاص بك إذا كنت ترغب في التقاط رسائل البريد الإلكتروني وتحويل زوارك إلى عملاء.
الوحدة معلومات الاتصال de Divi يمكن تخصيصها بسهولة لإنشاء أشكال بطاقات اتصال جذابة وآسرة لجميع أنواع المواقع. تأتي هذه الوحدة مع خيارين للعرض يمكن تطبيقهما على كل حقل نموذج: ان ligne ou العرض الكامل.
في هذا البرنامج التعليمي ، سنقدم أربعة إمكانيات تخطيط فريدة لملف نموذج الاتصال Divi باستخدام الحقول المضمنة والعرض الكامل.
دعونا نبدأ!
مسح
إليك معاينة لما سنصممه.
التخطيط الأول
التخطيط الثاني
التخطيط الثالث
التخطيط الرابع
ما تحتاجه للبدء
قبل البدء، تثبيت وتفعيل موضوع ديفي وتأكد من أن لديك أحدث إصدار من Divi على موقع الويب الخاص بك.
أنت الآن جاهز للبدء!
4 نماذج تخطيطات لوحدة نموذج الاتصال لديفي باستخدام الحقول المضمنة والعرض الكامل
حدد التخطيط المحدد مسبقًا
يتم تعديل كل قالب من القوالب الأربعة من تخطيط صفحة جهات الاتصال الخاصة بإصلاح الأحذية حزمة تخطيط إصلاح الأحذية، والتي يمكنك العثور عليها في مكتبة Divi.
أضف صفحة جديدة إلى موقع الويب الخاص بك وأعطها عنوانًا ، ثم حدد الخيار استخدم Divi Builder.
سنستخدم تخطيطًا معد مسبقًا من مكتبة Divi لهذا المثال ، لذا حدد تصفح التخطيطات.
ابحث عن تخطيط صفحة جهات اتصال إصلاح الأحذية وحدده.
اختر استخدم هذا التخطيط لإضافة التنسيق إلى صفحتك.
نحن الآن جاهزون لتصميم أمثلتنا.
التخطيط الأول
أولاً، قم بتحريك السطر الذي يحتوي على الوحدة النمطية معلومات الاتصال إلى القسم أعلاه، أسفل السطر مباشرةً مع وحدات Blurb. ثم يمكنك حذف القسم الفارغ المتبقي.
افتح إعدادات الخط وأضف المساحة المتروكة اليمنى واليسرى ،
- الحشو (يسار ويمين): 15٪
حدد خيارات سريعة الاستجابة واضبط المساحة المتروكة للجوال.
- الحشو (يسار ويمين): 5٪
تم تغيير تخطيط نموذج الاتصال مع الحقول المضمنة والحقول كاملة العرض
بالنسبة لهذا التخطيط ، سننشئ حقلين منفصلين للاسم الأول واسم العائلة.
افتح إعدادات الوحدة النمطية لنموذج جهة الاتصال وقم بتغيير حقل المعرف والعنوان لحقل اسم العائلة إلى الاسم الأول.
أضف حقلاً جديدًا أسفل حقل الاسم الأول. قم بتعيين حقل المعرف والعنوان على الاسم.
في إعدادات حقل الاسم ، افتح إعدادات التخطيط واضبط Make Fullwidth على No.
- جعل العرض الكامل:
ثم ضمن الإعدادات نموذج الاتصال، قم بتغيير ترتيب الموضوع والهاتف بحيث يتم إدراج الهاتف قبل الموضوع.
افتح إعدادات تخطيط حقل الموضوع وقم بتعيين الحقل إلى العرض الكامل.
- عمل عرض كامل: نعم
تخصيص تصميم نموذج الاتصال
الآن دعنا نغير بعض الإعدادات لإكمال التصميم. انتقل إلى علامة التبويب تصميم في إعدادات الوحدة النمطية لنموذج جهة الاتصال.
أولاً ، قم بتغيير لون خلفية الزر.
- خلفية الزر: # DBC2B3
أضف هامشًا علويًا إلى الزر.
- هامش الزر (أعلى): 10 بكسل
أخيرًا ، انتقل إلى إعدادات الحدود وأضف الزوايا الدائرية إلى الحقول.
- زوايا مدورة المدخلات: 30 بكسل
أنظر أيضا: Divi: كيفية إضافة شعار سريع الاستجابة إلى وحدة "Fullwidth Menu"
النتيجة النهائية للمثال 1
هذه هي النتيجة النهائية على سطح المكتب والجوال.
المثال الثاني
في المثال الثاني ، سننقل وحدات Blurb النمطية إلى الجانب الأيسر من الصفحة ونضع نموذج الاتصال على الجانب الأيمن من الصفحة. نقل وحدات Blurb النمطية إلى عمود.
قم بتغيير تخطيط الصف.
افتح إعدادات تصميم الخط وأوقف تشغيله استخدم عرض مزراب مخصص.
- استخدام عرض مزراب مخصص: NO
أضف رمزًا إلى CSS المخصص للعنصر الرئيسي لمحاذاة وحدتي Blurb ونموذج الاتصال بشكل رأسي.
align-items:center;
الآن نحن بحاجة إلى إزالة الحد الرفيع بين الأعمدة. افتح إعدادات الصف ، ثم افتح إعدادات العمود 1. ضمن علامة التبويب تصميم ، انتقل إلى إعدادات الحدود وقم بإزالة الحد.
- عرض الحد الأيمن: 0 بكسل
بعد ذلك ، افتح إعدادات العمود 2 وكرر الخطوات لإزالة الحدود.
- عرض الحد الأيمن: 0 بكسل
قم بتعيين نص "اتصل بنا" ليتم توسيطه.
انقل نموذج الاتصال إلى العمود الأيمن. احذف القسم الفارغ المتبقي.
تم تغيير تخطيط نموذج الاتصال مع الحقول المضمنة والحقول كاملة العرض
سيحتوي هذا التخطيط أيضًا على حقلين منفصلين للاسم الأول واسم العائلة. افتح إعدادات الوحدة النمطية لنموذج جهة الاتصال وقم بتغيير حقل المعرف والعنوان لحقل اسم العائلة إلى الاسم الأول.
أضف حقلاً جديدًا أسفل حقل الاسم الأول. قم بتعيين حقل المعرف والعنوان على الاسم.
في إعدادات حقل الاسم ، افتح إعدادات التخطيط واضبط Make Fullwidth على No.
- جعل العرض الكامل:
قم بتغيير ترتيب الهاتف وحقول الموضوع بحيث يأتي الهاتف قبل الموضوع.
افتح الإعدادات الميدانية للبريد الإلكتروني ، والهاتف ، والموضوع ، واضبط التخطيط على العرض الكامل.
- عمل عرض كامل: نعم
تخصيص تصميم نموذج الاتصال
افتح إعدادات الصف ، ثم افتح إعدادات العمود 2. اضبط لون الخلفية.
- الخلفية: # DBC2B3
في إعدادات العمود 2 ، انتقل إلى علامة التبويب "تصميم" وأضف المساحة المتروكة.
- المساحة المتروكة (أعلى ، أسفل ، يسار ويمين: 50 بكسل
حدد رمز الهاتف المحمول لتغيير الإعدادات سريعة الاستجابة. ضبط المساحة المتروكة للجوال.
- الحشو (أعلى ، أسفل ، يسار ويمين): 30 بكسل
ثم أضف ظل الصندوق إلى العمود.
أخيرًا ، افتح إعدادات وحدة نموذج الاتصال وقم بتغيير لون نص الحقل.
- لون نص الحقول: # 000000
النتيجة النهائية للمثال 2
ها هي النتيجة النهائية للتخطيط الثاني.
المثال الثالث
بالنسبة للتخطيط الثالث ، سيكون لدينا نموذج الاتصال على اليسار والوحدات النمطية Blurb على اليمين. لنبدأ بتغيير هيكل العمود للصف الذي يحتوي على وحدات Blurb النمطية.
انقل وحدة العنوان إلى العمود الأيمن.
بعد ذلك ، انقل وحدة النص "Contact US" إلى العمود الأيسر ، ثم احذف السطر الفارغ المتبقي.
انقل وحدة نموذج جهة الاتصال إلى العمود الأيسر ، ضمن وحدة نص "اتصل بنا". احذف الجزء الفارغ المتبقي.
افتح إعدادات الخط ، ضمن علامة التبويب تصميم ، ثم أوقف التشغيل استخدم عرض مزراب مخصص
- استخدام عرض مزراب مخصص: NO
أضف رمزًا إلى CSS المخصص للعنصر الرئيسي لمحاذاة وحدتي Blurb ونموذج الاتصال بشكل رأسي.
align-items:center;
افتح إعدادات الصف ، ثم افتح إعدادات العمود 1. ضمن علامة التبويب تصميم ، انتقل إلى إعدادات الحدود وقم بإزالة الحد. كرر الخطوات لإزالة الحد من العمود 2.
- عرض الحد الأيمن: 0 بكسل
تغيير شكل نموذج الاتصال
سنترك عرض الحقل كما هو للتصميم الثالث ، ومع ذلك ، افتح إعدادات نموذج الاتصال وقم بتغيير ترتيب رقم الهاتف وحقل الموضوع بحيث يأتي هذا الهاتف أولاً.
النتيجة النهائية للمثال 3
ها هي النتيجة النهائية للتخطيط الثالث.
اقرأ أيضا: Divi: كيفية عرض وحدة Fullwidth Header في وضع ملء الشاشة
المثال الرابع
بالنسبة إلى التخطيط الرابع والأخير ، ستكون وحدة نموذج جهة الاتصال على اليسار والوحدات النمطية Blurb على اليمين. مرة أخرى ، سنبدأ بتغيير بنية العمود للصف الذي يحتوي على وحدات Blurb النمطية.
انقل وحدة العنوان إلى العمود الأيمن.
بعد ذلك ، انقل وحدة نموذج جهة الاتصال إلى العمود الأيسر. احذف الجزء الفارغ المتبقي.
افتح إعدادات الخط ، في علامة التبويب تصميم وقم بتعطيلها استخدم عرض مزراب مخصص.
- استخدام عرض مزراب مخصص: NO
أضف رمزًا إلى CSS المخصص للعنصر الرئيسي لمحاذاة وحدتي Blurb ونموذج الاتصال بشكل رأسي.
align-items:center;
افتح إعدادات الصف ، ثم افتح إعدادات العمود 1. ضمن علامة التبويب تصميم ، انتقل إلى إعدادات الحدود وقم بإزالة الحد.
- عرض الحد الأيمن: 0 بكسل
بعد ذلك ، افتح إعدادات العمود 2 وكرر الخطوات لإزالة الحدود.
- عرض الحد الأيمن: 0 بكسل
افتح إعدادات وحدة النص لنص "اتصل بنا" وقم بتوسيط النص.
- محاذاة النص: توسيط
تم تغيير تخطيط نموذج الاتصال مع الحقول المضمنة والحقول كاملة العرض
بالنسبة لهذا التصميم ، ستكون جميع حقولنا كاملة العرض. افتح إعدادات وحدة نموذج الاتصال ، ثم افتح الإعدادات لكل حقل. في علامة التبويب تصميم ، حدد تصميم وتحديد جعل عرض كامل في نعم.
بمجرد إنشاء كل حقل كامل العرض ، يجب أن يبدو النموذج على هذا النحو.
الآن قم بتغيير حقل المعرف والعنوان لحقل الاسم الأخير إلى الاسم الأول.
أضف حقلاً جديدًا أسفل حقل الاسم الأول. قم بتعيين حقل المعرف والعنوان على الاسم.
قم بتغيير ترتيب الهاتف وحقول الموضوع بحيث يأتي الهاتف قبل الموضوع.
تخصيص تصميم وحدة نموذج الاتصال
في إعدادات الوحدة النمطية ، في علامة التبويب تصميم ، اضبط لون نص الحقل على الأسود.
- لون نص الحقول: # 000000
افتح إعدادات القسم وأضف لون الخلفية.
- الخلفية: # DBC2B3
أخيرًا ، أضف قناع خلفية.
- قناع الخلفية: القوس
- تحويل القناع: أفقي
لجعل قناع الخلفية يعمل بشكل أفضل على الهاتف المحمول ، دعنا نستخدم الإعدادات سريعة الاستجابة.
- تحويل القناع (الهاتف): أفقي ودوران
نتيجة نهائية
ها هي النتيجة النهائية للتخطيط الرابع.
النتائج النهائية
دعنا نلقي نظرة على جميع الأمثلة لدينا مرة أخرى.
المثال الأول
المثال الثاني
المثال الثالث
المثال الرابع
تحميل DIVI الآن !!!
وفي الختام
يمكن أن يؤدي وجود نموذج اتصال جذاب إلى زيادة تحويلاتك والسماح للزائرين بالاتصال بك مباشرة.
كما أوضحنا في هذه المقالة ، يمكنك استخدام خيارات الحقل المضمنة والعرض الكامل لإنشاء مظاهر وتخطيطات مختلفة لنموذجك ، وتتيح لك خيارات التصميم المدمجة في Divi إنشاء تصميمات فريدة وجذابة لمساعدة النموذج على التميز.
نأمل أن تضيف هذه التقنية مهارة تصميم مفيدة أخرى للمشاريع المستقبلية.
نأمل أن يلهمك هذا البرنامج التعليمي لمشاريع Divi التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى المزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت.
لا تتردد في الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
