كل ما تحتاج لمعرفته حول الوحدات المتقدمة لـ Divi 5

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

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

دعنا نغوص.

ما هي الوحدات المتقدمة في Divi 5؟

تتيح لك الوحدات المتقدمة في Divi 5 التحكم في عناصر التصميم مع حقل الوحدة متعددة الوظائف. إنه حقل إدخال واحد قوي يقبل الطيف الكامل من وحدات CSS والوظائف والمتغيرات.

إنه تغيير بسيط في الباني البصري الذي يدعم جميع وحدات CSS بدعم جديد لمتغيرات الملاءمة ، unset ، calc () ، clamp () ، و css.

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

استكشاف الوحدات المتقدمة في Divi 5

توفر ميزة Divi 5 Advanced Units خيارات تصميم مختلفة ، ولكل منها طرق فريدة لتشكيل التخطيطات. دعنا نفحص اللاعبين الرئيسيين ونرى كيف يعملون.

وحدات CSS في Divi 5

تفتح الوحدات المتقدمة لوحة كاملة من وحدات CSS ، تتجاوز البكسل والنسب المئوية. Take Viewport Width (VW) ، على سبيل المثال - قم بتعيين عرض القسم على 80VW ، وسوف يستغرق دائمًا 80 ٪ من عرض منفذ العرض (أفقيًا) ، ويتوسع تمامًا من سطح المكتب إلى الهاتف المحمول.

يرتبط Root EM (REM) بأحجام خط الجذر للموقع - فكرة للطباعة المتسقة ، مثل 4.5rem للمادة.

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

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

Calc () هي آلة حاسبة ديناميكية

وظيفة CACL () تشبه آلة حاسبة صغيرة مدمجة في DIVI. يتيح لك مزج الوحدات مع العمليات - الإضافة ، الطرح ، الضرب ، والانقسام - للحصول على النتائج الديناميكية. مثال كلاسيكي هو CALC (100 ٪ - 50 بكسل) ، والذي يحدد عرض قسم إلى 100 ٪ ويطرح 50 بكسل. إذا تم محاذاة عنصرك مركزيًا ، فسيتم تقليل 25 بكسل من كلا الجانبين.

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

المشبك () للتحكم في السوائل

تساعدك وظيفة المشبك () على التحكم في الأحجام التي تتكيف بسلاسة عبر أحجام الشاشة. يستخدم ثلاث قيم: الحد الأدنى للحجم ، والحجم المفضل ، والحجم القصوى. مثال جيد هو المشبك (36px ، 4vw ، 48px) .

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

متغيرات CSS للمرونة العالمية

تتيح لك متغيرات CSS (أو خصائص مخصصة) تحديد القيم القابلة لإعادة الاستخدام ، مثل الحجم-5EM : في خيارات موضوع Divi أو حقل CSS إعدادات الصفحة. عند إضافة متغيرات CSS في Divi 5 ، تأكد من إرفاقها في العنصر الأصل مثل هذا:

:root {
--font-size:5em;
}

بمجرد تحديدها ، يمكنك إسقاط VAR (-حجم الحجم) في حقل حجم نص العنوان لتطبيقه.

إنه المنقذ الزمني الذي يبقي تصميمك متسقًا وقابل للتحرير أثناء الطيران.

قيم الوحدة

تتضمن الوحدات المتقدمة لـ DIVI 5 أيضًا قيمًا أولية وخلفية وذاتية. تقوم الخاصية الأولية بإعادة تعيين خاصية CSS إلى القيمة الافتراضية كما هو محدد في مواصفات CSS. على سبيل المثال ، يعود اللون الأولي في الفقرة إلى الأسود ، متجاهلاً أي نمط مخصص أو ورث. تقوم شركة UNSET بمسح خاصية مرة أخرى إلى حالتها الطبيعية ، تتصرف مثل الأولي للخصائص غير المخصصة أو العودة إلى القيم الموروثة عند الاقتضاء. وفي الوقت نفسه ، يتيح Auto للمتصفح تحديد قيمة تعتمد على السياق ، مثل ارتفاع ارتفاع القسم لتناسب محتواه.

كيف تعمل الوحدات المتقدمة في Divi 5

تجلب الوحدات المتقدمة في Divi 5 مستوى جديدًا من التحكم مباشرة إلى البناء المرئي ، مما يجعل من السهل إنشاء تصميمات ديناميكية مستجيبة. يمكنك الكتابة على الفور في أي وحدة أو وظيفة أو متغير - مثل VW أو CALC () أو clamp () - ومعرفة النتائج. إليك كيفية عمل الوحدات المتقدمة في Divi.

عرض القسم المستجيب مع calc ()

دعنا نقول أنك تريد قسمًا يمتد 80 ٪ من ارتفاع إطارات العرض ولكنه يزيل بعض الحشو من الأعلى والسفلي. انتقل إلى علامة تبويب تصميم القسم ، وتحديد موقع حقل الارتفاع ، وأضف Calc (80vh - 60px) إلى الحقل.

يسمح هذا الحساب للقسم بتوسيع نطاق سائل مع منفذ العرض ، مع الحفاظ على 80 ٪ من ارتفاع منفذ العرض مع طرح 30 بكسل من الأعلى والأسفل.

طباعة السوائل مع المشبك ()

يمكن أن تكون Clamp () مفيدة إذا كنت بحاجة إلى عناوين تنمو بحجم الشاشة ولكن تظل قابلة للقراءة. في علامة تبويب تصميم وحدة العنوان ، قم بتعيين حجم نص العنوان على المشبك (52px ، 2vw ، 36px) .

هذا يضع النص على 52 بكسل ، ويعتمد على 2 ٪ من عرض منفذ العرض ، ويحدد الحجم عند 36 بكسل - مما يوفر طباعة مستجيبة ومتوازنة دون عناء.

أحجام الخطوط التي يحركها المتغير

تعد متغيرات CSS الخاصة بـ Divi 5 طريقة رائعة للحصول على التوحيد في التباعد والنص وغيرها من المناطق. يمكنك تعيين المتغيرات مرة واحدة ثم استخدامها مرارًا وتكرارًا خلال التصميمات الخاصة بك ببساطة عن طريق إضافتها إلى حقل وحدة أو عمود أو صف أو قسم. على سبيل المثال ، دعنا نقول أنك تريد أحجام العنوان المتسقة دون تعيينها يدويًا أو استخدام إعداد مجموعة خيارات لتحديدها.

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

:root{
--text-size-h1: 86px;
--text-size-h2: 60px;
--text-size-h3: 48px;
--text-size-h4: 36px;
--text-size-h5: 28px;
--text-size-h6: 20px;
}

من هناك ، ما عليك سوى إضافة متغير إلى حجم النص في أي وحدة عنوان. على سبيل المثال ، لهذا العنوان في قسم البطل الخاص بنا ، نضيف ببساطة VAR (-Text-Size-H1) . سوف يتعرف Divi على ذلك كمتغير ويعين النمط المناسب إلى عنوانك.

أفضل الممارسات للوحدات المتقدمة

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

ابدأ بسيطة

إذا كنت جديدًا في استخدام وظائف ومتغيرات CSS ، فاستفد من وحدات مألوفة مثل وحدات البكسل (PX) أو النسب المئوية (٪) ، ثم قم بتجربة calc () للتعديلات الديناميكية الأساسية. على سبيل المثال ، جرب CALC (100 ٪ - 40 بكسل) لعرض قسم قبل الغوص في متغيرات المشبك () أو CSS. هذا يبني الثقة دون أن تغمرك في وقت مبكر.

الاستفادة من المتغيرات للأساليب الشائعة

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

اختبار الاستجابة

يعد نظام العرض المستجيب لـ Divi طريقة رائعة لتصميم التصميم الخاص بك عبر أحجام شاشة متعددة. بعد تطبيق وحدات مثل VW أو Clamp () ، تبديل بين سطح المكتب والكمبيوتر اللوحي وعرض الهاتف المحمول لضمان تكييف التصميم بسلاسة. قد تبدو مجموعة العنوان على المشبك (20px ، 3vw ، 40px) مثالية على سطح المكتب ولكن قد تحتاج إلى ضبط للشاشات الأصغر ، لذلك اختبرها للتأكد.

لا تتعقيد للغاية

على الرغم من أنه يمكنك عش وظائف مثل calc (المشبك (20px ، 5vw ، 50px) - 10px) ، يجب أن تلتزم بالصيغ البسيطة ، على الأقل أثناء التعلم. يمكن أن يؤدي التعقيد المفرط إلى إبطاء الأداء ويجعل استكشاف الأخطاء وإصلاحها أكثر صعوبة عندما لا تظهر الأمور كما ينبغي. التزم بحسابات نظيفة وهادفة لجعل الحياة أسهل.

لماذا ترفع الوحدات المتقدمة Divi 5

الوحدات المتقدمة رائعة لتبسيط عملية التصميم. فيما يلي بعض المزايا الرئيسية التي تأتي مع هذه الميزة الجديدة:

• الحرية الإبداعية: خلط الوحدات والوظائف والمتغيرات تفتح التخطيطات التي كانت أكثر استهلاكًا للوقت لتحقيقها في الإصدارات السابقة من Divi. تتيح لك الصيغ البسيطة ضبط الارتفاعات والعرض وأحجام الخطوط والمزيد. تتيح لك هذه المرونة بناء بشكل أفضل وتنفيذ بشكل أسرع ، كل ذلك داخل البناء المرئي.
• تصاميم أفضل استجابة: الوحدات المتقدمة تحول Divi نحو تصميمات السوائل التي تتكيف دون عناء. يضمن استخدام VW أو CLAMP () أن موقعك طبيعيًا على أي جهاز ، مما يقلل من الحاجة إلى التجاوز اليدوي وتقديم تجربة مصقولة.
• إنه مقاوم للمستقبل: تتماشى الوحدات المتقدمة مع مهمة Divi 5 لتحديث المنشئ المرئي لشبكة اليوم. من خلال احتضان القوة الكاملة لـ CSS ، يربك Divi 5 بالأدوات اللازمة لبناء مواقع الويب الحديثة. الأمر لا يتعلق فقط بالمواكبة ؛ يتعلق الأمر بالبقاء في صدارة المنحنى مع الأدوات التي تعكس ما يستخدمه المطورون المحترفون.

قم بتنزيل أحدث Divi 5 Alpha

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

هل أنت مستعد لرؤيته بنفسك؟ قم بتنزيل Divi 5 Alpha الآن وابدأ في تجربة الوحدات المتقدمة. العب مع VW و VH لتباعد المنفذ ، واختبار المشبك () للطباعة ، أو إعداد المتغيرات لإعادة التفكير في كيفية بناء. إنها فرصة لدفع تصميماتك بشكل أكبر واكتشاف ما هو ممكن.