كيفية إنشاء وحدة السوائل المستجيبة Divi

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

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

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي.

وإليك رمز الشفرة الذي يوضح وظيفة وحدة السوائل هذه.

قم بتنزيل Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

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

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

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

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

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

كيفية إنشاء وحدة السوائل المستجيبة Divi

الصف

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

افتح إعدادات الصف ، وقم بتحديث ما يلي:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: تلقائي
• العرض الأقصى: 100٪
• الحشو: 5vw أعلى ، 5vw أسفل

تصميم وحدة دعوة مرنة للعمل

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

أضف وحدة دعوة إلى العمل جديدة داخل العمود / الصف.

إعدادات المحتوى

ضمن إعدادات المحتوى ، أضف عنوان URL لرابط زر وهمي وقم بتحديث لون الخلفية على النحو التالي:

• URL ارتباط الزر: #
• لون الخلفية: # 5e6472

إضافة حجم خط الجذر المرن إلى الوحدة النمطية

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

لإضافة حجم خط الجذر السائل إلى الوحدة النمطية ، انتقل إلى علامة التبويب خيارات متقدمة وأضف CSS المخصص التالي إلى العنصر الرئيسي:

font-size: clamp(16px, 2vw, 24px);

بالنسبة لحجم الخط هذا ، نستخدم وظيفة CSS Clamp () من أجل تعيين حجم الخط الأدنى ، وحجم الخط المرن (عند الحاجة) ، والحد الأقصى لحجم الخط.

تجاوز أي عناصر بمسافات افتراضية بقيم وحدة الطول

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

تحديث التصميم بوحدات الطول

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

نص أساسي

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

• حجم النص الأساسي: 1em
• ارتفاع خط الجسم: 1.8em

نص العنوان

بالنسبة لعنصر نص العنوان للوحدة ، يمكننا إعطائها حجمًا أكبر باستخدام وحدة طول em. قم بتحديث ما يلي:

• حجم نص العنوان: 1.7em
• ارتفاع خط العنوان: 1.3em

لإعطائك فكرة عن حجم نص العنوان فعليًا ، نقوم ببساطة بضرب قيمة طول em في قيمة خط الجذر. تذكر أن حجم خط الجذر يستخدم clamp () لإنشاء حجم خط بحد أدنى (16 بكسل) وسوائل (2vw) وحد أقصى (24 بكسل). لذلك سيكون الحد الأدنى لحجم نص العنوان 1.7 مرة 16 بكسل وهو قريب من 27.2 بكسل. سيكون حجم الخط المرن 1.7 ضعف 2vw (2٪ من عرض منفذ العرض). وسيكون الحد الأقصى لحجم الخط 1.7 مرة 24 بكسل وهو قريب من 69.36 بكسل.

تصميم زر

العنصر الثالث للوحدة هو الزر. يمكننا تحديث إعدادات تصميم الزر باستخدام قيم وحدة الطول لدمج التصميم المرن أيضًا.
قم بتحديث إعدادات الزر التالية:

• حجم نص الزر: 1.3em
• عرض حد الزر: 0.12em
• نصف قطر حدود الزر: 1.5em
• تباعد حرف الزر: 0.1em
• حشوة الزر: 0.1em أعلى ، 0.1em أسفل ، 2em يسار ، 2em يمين

الحجم والتباعد

للتأكد من أن الوحدة تحتوي على حجم سائل وتباعد سوائل ، نحتاج إلى استخدام وحدات طول em لتلك القيم أيضًا.

قم بتحديث إعدادات الحجم والتباعد التالية:

• العرض الأقصى: 40em
• ارتفاع الحد الأدنى: 0vw
• الهامش: 0.5em من الأعلى ، 0.5em من الأسفل ، لليسار التلقائي ، واليمين التلقائي
• الحشو: 2.5em أعلى ، 2.5em أسفل ، 2em يسار ، 2em يمين

النتيجة

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

إضافة وحدات السوائل المتعددة على التوالي باستخدام شبكة CSS

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

ضبط حجم الوحدة والتباعد

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

افتح إعدادات الوحدة وقم بتحديث ما يلي:

• محاذاة النص: يسار
• العرض الأقصى: 24em
• الهامش: 0.5em يسار ، 0.5em يمين

وحدة مكررة

الآن قم بتكرار الوحدة لإنشاء وحدة أخرى في نفس العمود.

أضف شبكة CSS إلى العمود

يمكننا الآن إضافة CSS المخصص إلى العمود لإنشاء شبكة CSS للوحدات النمطية.

ضمن علامة التبويب خيارات متقدمة ، أضف CSS التالي إلى العنصر الرئيسي في عرض سطح المكتب:

display:grid;
grid-template-columns: auto auto;
justify-content:center;

ثم أضف CSS التالي إلى العنصر الرئيسي في عرض الهاتف:

display:grid;
grid-template-columns: auto;
justify-content:center;

سيؤدي ذلك إلى تعيين الوحدتين في شبكة من عمودين (لكل منهما عرض تلقائي) على سطح المكتب. ثم على الهاتف ، ستعود الوحدات النمطية إلى شبكة ذات عمود واحد (عرض تلقائي).

النتيجة

الآن تحقق من النتيجة.

النتائج النهائية

بمجرد اكتمال الوحدة (الوحدات) المرنة ، يمكنك تحديث أنماط الوحدة باستخدام إعدادات التصميم المضمنة لمنحها خطوطًا وألوانًا مخصصة وما إلى ذلك.

إليك نظرة على النتيجة النهائية باستخدام خط ولون خط ولون زر ولون مختلف مختلف.

افكار اخيرة

كما رأينا في هذا البرنامج التعليمي ، يمكن أن يكون دمج التصميم المرن في Divi Module طريقة ملائمة للتأكد من أن الوحدة تبدو جميلة ومتسقة في جميع أحجام المتصفح ، دون عناء تحديث التصميم عند نقاط توقف معينة.

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

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

هتافات!