كيفية استخدام وحدات الطول vw و vh لتصميم نموذج اتصال متجاوب في Divi

نشرت: 2019-06-12

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

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

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

هيا بنا نبدأ.

نظرة خاطفة

سطح المكتب

لوح

الهاتف (عمودي)

الهاتف (أفقي)

قم بتنزيل تنسيق نموذج الاتصال المتجاوب مجانًا (يتضمن أيضًا نموذج التقيد بالبريد الإلكتروني المتجاوب!)

لتضع يديك على التصميمات من هذا البرنامج التعليمي ، ستحتاج أولاً إلى تنزيلها باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني Divi Daily الخاصة بنا باستخدام النموذج أدناه. بصفتك مشتركًا جديدًا ، ستتلقى المزيد من مزايا Divi وحزمة Divi Layout المجانية كل يوم اثنين! إذا كنت موجودًا بالفعل في القائمة ، فما عليك سوى إدخال عنوان بريدك الإلكتروني أدناه والنقر فوق تنزيل. لن يتم "إعادة اشتراكك" ولن تتلقى رسائل بريد إلكتروني إضافية.

قم بتنزيل الملفات

تنزيل مجاني

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

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

ما تحتاجه للبدء

للبدء ، ستحتاج إلى الإعداد التالي:

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

بعد ذلك ، سيكون لديك لوحة فارغة لبدء بناء النماذج سريعة الاستجابة في Divi.

لماذا استخدام وحدات الطول vw و vh للتصميم سريع الاستجابة

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

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

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

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

للحصول على شرح أكثر تفصيلاً لوحدات الطول ، راجع هذا الدليل حول استخدام وحدات الطول في Divi.

الجزء 1: تصميم نموذج اتصال متجاوب في Divi

إنشاء القسم والصف

قم بإنشاء قسم عادي بصف من عمود واحد. قبل إضافة أي وحدات ، قم بتحديث إعدادات القسم على النحو التالي:

تدرج الخلفية اللون الأيسر: # fd7b5b
تدرج الخلفية اللون الصحيح: # a92200

ثم افتح إعدادات الصف واعطها تدرج الخلفية.

تدرج الخلفية اللون الأيسر: # ffdb8b
تدرج الخلفية اللون الصحيح: # fdb15b

بعد ذلك ، لنحدد حجم الصف باستخدام وحدة الطول vw بحيث يتناسب مع المتصفح.

العرض: 66vw (سطح المكتب) ، 66vw (كمبيوتر لوحي) ، 100٪ (هاتف)
العرض الأقصى: 66vw (سطح المكتب) ، 66vw (الكمبيوتر اللوحي) ، 100٪ (الهاتف)
ارتفاع الحد الأدنى: 100vh (هاتف)

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

ستتأكد قيمة 66vw من أن الصف سيظل ثلثي عرض إطار عرض المتصفح تقريبًا. ستعمل قيمة 100vh على شاشة الهاتف على التأكد من أن ارتفاع الصف يساوي ارتفاع منفذ عرض الهاتف (اختياري ، ولكنه لمسة لطيفة لعرض مثالي لمنطقة محتوى الصف على الهواتف).

لاحظ أن عرض الصف مضبوط على 100٪ (وليس 100vw). هذا لأن 100vw لن يأخذ في الحسبان عرض شريط التمرير أثناء التمرير لأسفل الصفحة. لذلك من الأفضل دائمًا استخدام النسبة المئوية لشاشات العرض الكامل.

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

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

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

العنوان: اتصل بنا
إظهار كلمة التحقق: NO

صنع الحقول بعرض كامل

بالنسبة لهذا التصميم ، سأستخدم الحقول ذات العرض الكامل. سيسمح لي ذلك بإضافة مسافات متسقة بين الحقول (نظرًا لعدم استخدام أي عوامات) وسيسمح لي بإعطاء عرض مخصص لكل حقل لتصميم فريد لاحقًا. في الوقت الحالي ، افتح الإعدادات لكل من حقول الاسم والبريد الإلكتروني واضبط خيار "Make Fullwidth" على "YES".

تحسين الحقول للتصميم سريع الاستجابة

عد الآن إلى إعدادات نموذج الاتصال. الآن يمكننا تخصيص حقول النموذج باستخدام وحدات الطول vw و vh. قم بتحديث ما يلي:

لون نص الحقل: # 333333
هامش الحقول (سطح المكتب والجهاز اللوحي): 2vw أعلى ، 2vw أسفل
هامش الحقول (الهاتف): 2vh أعلى ، 2vh أسفل

تعبئة الحقول (سطح المكتب والجهاز اللوحي): 1vw أعلى ، 1vw أسفل ، 2vw يسار ، 2vw يمين
تعبئة الحقول (الهاتف): 2vh أعلى ، 2vh أسفل ، 2vh يسار ، 2vh يمين

حجم نص الحقول: 2.5vw (سطح المكتب) ، 4vh (الهاتف)

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

تصميم نص العنوان

بالنسبة لنص العنوان ، قم بتخصيص ما يلي:

مستوى عنوان العنوان: H2
خط العنوان: Karla
وزن خط العنوان: غامق
لون نص العنوان: # f56845
حجم نص العنوان: 7vw (سطح المكتب) ، 8vh (الهاتف)
تباعد حرف العنوان: 1vw
ارتفاع خط العنوان: 0.6em

تحسين الزر للتصميم سريع الاستجابة

بالنسبة لزر نموذج الاتصال ، سنقوم بإضافة مسافات وتحجيم نص مشابه للحقول التي صممناها سابقًا.

انقر لاستخدام أنماط الأزرار المخصصة وتحديث ما يلي:

حجم نص الزر: 2.5vw (سطح المكتب) ، 4vh (الهاتف)
لون نص الزر: #ffffff
لون خلفية الزر: # 333333
عرض حد الزر: 0 بكسل
نصف قطر حدود الزر: 0 بكسل
زر الخط: مونتسيرات
هامش الزر (سطح المكتب): 1vw أعلى ، 0 بكسل يسار ، 0 بكسل يمين
هامش الزر (الهاتف): 1vh أعلى
حشوة الزر (سطح المكتب): 3vw أعلى ، 3vw أسفل
حشوة الزر (الهاتف): 3vh أعلى ، 3vh أسفل

ظل مربع الزر: انظر لقطة الشاشة
مربع الظل الأفقي: 2em
مربع الظل الوضع الرأسي: 0.4em
لون الظل: rgba (245،104،69،0.29)

إضافة مسافات إلى نموذج الاتصال

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

الحشو (سطح المكتب): 3vw أعلى ، 3vw أسفل ، 5vw يسار ، 5vw يمين
الحشوة (الهاتف): 5vh أعلى ، 5vh أسفل ، 3vh يسار ، 3vh يمين

ظل مربع الزر: انظر لقطة الشاشة
مربع الظل الأفقي: 2em
مربع الظل الوضع الرأسي: 0.4em
لون الظل: rgba (245،104،69،0.29)