الفرق بين وحدات CSS المطلقة والنسبية

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

في هذا المنشور ، سنشرح الفرق بين الوحدات المطلقة والنسبية ، ونوضح كيف يساعدك Divi 5 في استخدامها بشكل أكثر فعالية من البداية.

أوضحت وحدات CSS: لماذا يهم موقع الويب الخاص بك؟

تتحكم وحدات CSS في حجم كل شيء على موقعك. اختر خطأ ، ويكسر التصميم على أجهزة مختلفة.

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

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

تحطيم الوحدات المطلقة: عندما تعمل الأحجام الثابتة بشكل أفضل

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

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

لماذا تعمل وحدات البكسل بشكل رائع للحصول على تفاصيل صغيرة

بعض عناصر التصميم تحتاج إلى التحكم الدقيق. يجب أن تبدو الحدود 1 بكسل هش ورقيقة في كل مكان. تسقط الظلال بحاجة إلى الدقة لتبدو بشكل صحيح. تعمل الرموز الصغيرة بشكل أفضل عندما تظل متسقة عبر الأجهزة.

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

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

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

جعل البيكسلات مستجيبة مع استفسارات الوسائط

وحدات البكسل ليست صلبة تماما. يتيح لك استعلامات الوسائط مبادلة قيم البكسل المختلفة بأحجام شاشة مختلفة. قد يستخدم عنوانك نص 32 بكسل على سطح المكتب ، ثم القفز إلى 28 بكسل على الأجهزة اللوحية و 24 على الهواتف.

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

يعمل هذا النهج بشكل جيد عندما تريد تحكمًا محددًا في كل حجم شاشة. تقرر بالضبط كيف ينظر نصك على الهواتف مقابل الأجهزة اللوحية مقابل أجهزة الكمبيوتر المكتبية بأبعاد محددة. لا مفاجآت.

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

فهم الوحدات النسبية: النهج المرن لتصميم الويب

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

هذه الوحدات تحل المشكلات التي تنشئها وحدات البكسل. يعمل الزر 75 بكسل على نطاق واسع على سطح المكتب ولكنه يصبح مهيمنًا على الهاتف المحمول. الوحدات النسبية تلقائيًا ، مما يوفر لك من كتابة أنماط منفصلة لكل حجم شاشة.

كيف تبني وحدات EM على بعضها البعض

وحدات EM تتعلق بحجم الخط لعنصر الوالدين المباشر. إذا كان حجم الخط الأساسي هو 16 بكسل وقمت بتعيين حاوية على حجم الخط: 1.25EM ، يصبح 20 بكسل. سيكون عنصر الطفل الموجود داخله على 1.5EM الآن 30 بكسل (1.5 × 20 بكسل) ، وليس 24 بكسل ، لأنه يعتمد على الوالد ، وليس الجذر.

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

وحدات REM تبقي الأمور بسيطة

ينظر REM دائمًا إلى عنصر الجذر HTML. اضبط شيئًا على 2Rem وهو بنفس الحجم في كل مكان على صفحتك.

معظم المتصفحات الافتراضية إلى 16 بكسل للجذر. لذلك 1Rem = 16px ، 2rem = 32px. قم بتغيير حجم الجذر ، وكل شيء على مقاييس REM معًا.

Viewport Units اتبع شاشتك

عرض وحدات Viewport مع نافذة المتصفح. 50vw = نصف عرض الشاشة ، و 100 فولت = ارتفاع شاشة ملء الشاشة. هذا رائع لأقسام البطل التي تملأ الشاشة.

عادةً ما لا تلعب متصفحات الهاتف المحمول بشكل جيد مع وحدات Viewport. يختبئ شريط العناوين ويظهر عند التمرير ، وقد يتم قطع قسم 100VH الخاص بك عند ظهور شريط العناوين.

يقارن Vmin و Vmax عرض الشاشة وارتفاعها ، ثم اختر واحدة. يستخدم Vmin أيهما أصغر. على الهاتف المستقيم ، يكون العرض أصغر ، لذلك 50VMIN = 50 ٪ من العرض. تدوير إلى المناظر الطبيعية ويصبح الارتفاع أصغر ، لذلك يتحول 50 فولت إلى 50 ٪ من الارتفاع. يقوم VMAX بالعكس: إنه يختار دائمًا البعد الأكبر. هذا مفيد للعناصر التي تحتاج إلى توسيع نطاق القياس الأكبر.

النسب المئوية تتكيف مع الحاويات

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

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

الفرق

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

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

اختيار الوحدات المناسبة لتصميمك

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

فكر في المستخدمين أولاً

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

يحتاج الملاحة الرئيسية إلى تحجيم ثابت عبر الصفحات. وحدات REM تربطها بحجم الخط الأساسي الخاص بك. يحتاج شعارك إلى أبعاد دقيقة لاتساق العلامة التجارية. وحدات البكسل تبقيها هش.

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

طرق سريعة لاختيار الوحدة الصحيحة

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

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

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

أخطاء وحدة CSS الشائعة لتجنب

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

1. اختيار وحدات البكسل لكل شيء

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

عندما يزيد شخص ما من حجم خط المتصفح ، لا يتكيف تخطيطك المستند إلى البكسل. يفيض النص الحاويات. أزرار تختفي وراء العناصر الأخرى. تعطل الشريط الجانبي الخاص بك في المحتوى الرئيسي الخاص بك.

احفظ وحدات البكسل للأشياء التي تحتاج حقًا إلى التحكم الدقيق: حدود رقيقة ، أيقونات صغيرة ، وتسقط الظلال. لكل شيء آخر ، حاول استخدام الوحدات النسبية.

2. وحدات EM التي تتضاعف خارج نطاق السيطرة

مقياس وحدات EM بناءً على حجم خط الوالدين. هذا يبدو مرنًا ، حتى تبدأ في التعشيش. قل الحاوية الخاصة بك تستخدم 1.2EM ، ويستخدم عنوانك داخلها 1.5em. يصبح هذا العنوان 1.8em بالنسبة للجذر لأن 1.2 × 1.5 = 1.8. الحفاظ على التعشيش ، والأحجام يمكن أن تساقط الثلج. قم بتغيير حجم خط الوالدين ، وكل شيء يتحول في اتجاه مجرى النهر.

REM Units إصلاح هذا. إنهم يشيرون دائمًا إلى عنصر الجذر ، لذلك يعني 2rem نفس الشيء بغض النظر عن مكان استخدامه. وهذا يجعل الطباعة الخاصة بك أسهل في التوسع والتحكم.

3. وحدات الرؤية التي تقفز على الهاتف المحمول

اضبط قسم Hero على 100VH ، ويملأ الشاشة تمامًا. باستثناء المستعرضات المحمولة تختبئ وإظهار أشرطة عناوينها عند التمرير. Safari على iOS و Chrome على Android كل ذلك. عندما يختفي شريط العناوين ، يصبح قسم 100VH طويلًا طويلًا جدًا. عندما يظهر مرة أخرى ، يتم قطع المحتوى الخاص بك.

تتكيف وحدة DVH الأحدث مع حجم منفذ العرض المتغير. دعم المتصفح لا يزال يلحق بالركب. كإعداد ، يعمل حل JavaScript باستخدام CSS Custom Properties.

كسر إمكانية الوصول بأحجام ثابتة

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

يُنصح أن تكون أهداف اللمس ما لا يقل عن 44 × 44 بكسل ، وفقًا لإرشادات إمكانية الوصول مثل WCAG ومعايير Apple. يمكن أن تكون الأهداف الأصغر تحديًا للمستخدمين الذين يعانون من إعاقات محرك للاستفادة بدقة.

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

5. نص صغير على شاشات عالية الكثافة

أجهزة مختلفة حزمة وحدات البكسل بشكل مختلف. قد تحتوي شاشة هاتفك على 400 بكسل في البوصة بينما تحتوي شاشتك على 100. نفس عدد البكسل يبدو مختلفًا تمامًا على كل جهاز.

يبدو نصك المكون من 14 بكسل جيدًا على شاشة سطح المكتب. على شاشة هاتف عالية الكثافة ، تصبح تلك البكسل الـ 14 نفسها مجهرية. محول المستخدمين ويقرصون للتكبير.

تعالج أنظمة التشغيل والمتصفحات التوسع تلقائيًا عند استخدام الوحدات النسبية. يصبح نصك 1REM أكبر على شاشات عالية الكثافة وأصغر على شاشات منخفضة الكثافة.

6. خلط الوحدات بدون خطة

يمكنك استخدام REM لبعض العناوين ، EM للآخرين ، والبكسل لنص الجسم. يفتقر تصميمك إلى الإيقاع لأن العناصر المختلفة تتسع بمعدلات مختلفة. اختر نظامًا للعناصر ذات الصلة. إذا كانت عناوينك تستخدم REM ، فيجب أن تستخدم جميع عناوينك REM. إذا كان التباعد الخاص بك يستخدم EM ، فاستمر في استخدام EM للتباعد ذي الصلة.

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

كيف تبسط الوحدات المتقدمة لـ Divi 5 إدارة CSS

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

ما هو ديفي؟

Divi هو منشئ موقع الويب الذي يحول WordPress إلى شيء من المنطقي في الواقع للأشخاص الذين يريدون أن تبدو مواقعهم جيدة.

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

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

يتيح لك منشئ السمة التحكم في كل شيء. قم بإنشاء رؤوس لا تبدو عامة ، وبناء صفحات مدونة بارزة ، وقم بتحويل صفحات 404 إلى شيء قد يرغب الناس في رؤيته بالفعل.

بناء مواقع الويب باستخدام الذكاء الاصطناعي

يعمل Divi AI مباشرة داخل منطقة التصميم الخاصة بك. هل تحتاج إلى نص؟ يكتبها.

تريد الصور؟ يجعلهم. يمكنك حتى وصف تعديلات الصور ، ويتولى العمل.

وبالمثل ، للرمز والأقسام الجديدة.

يحل Divi Quick Sites تلك اللحظة الرهيبة عندما تحدق في صفحة فارغة دون أدنى فكرة عن مكان البدء. اختر من مواقع المبتدئين التي صممها فريقنا بالفعل ، مع الصور الأصلية والأعمال الفنية.

أو صف عملك لـ Divi Quick Sites + Divi AI واتركه يبني شيئًا من الصفر.

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

ما الجديد في Divi 5

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

لكن ما الجديد؟ إلقاء نظرة:

نظام تخطيط Flexbox

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

خيار مجموعة الإعدادات المسبقة

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

متغيرات التصميم

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

وحدات متقدمة

الآن ، يمكنك استخدام جميع وحدات CSS المتقدمة مع Divi 5: من PX إلى VW/VH. تعمل وظائف CSS أيضًا في المنشئ الآن. هل تريد قسمًا يضم 80 ٪ من ارتفاع الشاشة ناقص رأسك؟ اكتب CALC (80VH - 100px) وأنت تم تعيينك. تعامل الواجهة Clamp () ، min () ، max (): كل تلك الحيل المستجيبة.

صفوف متداخلة

تدخل الصفوف داخل صفوف أخرى الآن ، عميقة كما تحتاج. بناء تخطيطات مجلة معقدة أو صفحات منتجات مفصلة دون محاربة الهيكل. يمنحك كل مستوى التحكم الكامل في التباعد وسلوك الجهاز.

نقرة واحدة التحرير

أشر وانقر في أي مكان على صفحتك لبدء التحرير. أيام البحث عن أزرار التحرير الصغيرة أو التنقل عبر قوائم متعددة تقف وراءنا.

نقاط التوقف القابلة للتخصيص

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

مساحة عمل متعددة الألواح

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

إدارة السمة

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

تحجيم قماش

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

تحسينات الأداء

كل شيء يشعر بالقلق الآن. يتم تحميل الصفحات بشكل أسرع ، ويستجيب المنشئ بشكل أسرع ، ولا تخطط معقدة لا تنحني عن الواجهة كما اعتادوا.

مجموعات الوحدة النمطية

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

نظام الألوان HSL

قم ببناء أنظمة الألوان مع الضوابط الصلبة والتشبع والخفة. إنشاء اختلافات ألوان العلامة التجارية التي تبدو احترافية. تقوم الرياضيات بإنشاء مجموعات ممتعة تلقائيًا.

المزيد في الطريق ...

• Loop Builder: بناء قوالب لتكرار المحتوى مثل شبكات المدونة أو قوائم المنتجات. صممه مرة واحدة ، دع النظام يملأه بمحتوىك الفعلي.
• وحدات WooCommerce: وحدات خاصة بالمخزن لشبكات المنتج ، وصفحات المنتج الفردية ، ووظائف العربة. كل ما تحتاجه المتاجر عبر الإنترنت ، مصممة خصيصًا للبيع.

باستخدام متغيرات CSS في Divi 5

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

يقبل Divi 5 أي وحدة CSS مباشرة في حقول الإدخال الخاصة بها. اكتب قيم REM أو VW أو النسبة المئوية التي يمكنك من خلالها استخدام البكسلات فقط. يقوم المنشئ بمعالجة هذه الوحدات فورًا دون إعداد إضافي.

وظائف CSS تعمل بنفس الطريقة. أدخل المشبك (1REM ، 4VW ، 3REM) للطباعة السوائل أو دقيقة (500 بكسل ، 90 ٪) للعرض المستجيب. يعالج الباني المرئي هذه الحسابات في الوقت الفعلي أثناء تصميمه.

المتغيرات تتكامل بسلاسة مع هذا النظام. حدد متغير CSS مثل -Height-Height: 80px ، ثم الرجوع إليه باستخدام VAR (--Header-Height) في أي حقل. يتعرف Divi على بناء الجملة ويطبق قيمتك المخزنة تلقائيًا.

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

متغيرات التصميم: طريقة أفضل لتطبيق الوحدات المتقدمة

متغيرات التصميم هي بديل مدمج لـ DIVI 5 لمتغيرات CSS. إنهم يعملون بالكامل من خلال الواجهة المرئية دون الحاجة إلى أي معرفة رمز. يمكنك إنشاء هذه المتغيرات وإدارتها باستخدام لوحة Divi's Variable Manager.

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

يوفر Divi 5 العديد من أنواع المتغيرات للتعامل مع احتياجات المحتوى المختلفة:

• متغيرات الألوان تخزن رموز السداسي والتدرجات وألوان العلامة التجارية والألوان النصية والخلفيات والحدود.
• تقوم متغيرات الخطوط بإدارة الطباعة على مستوى العالم بما يتجاوز قيود مخصص السمة والعمل في أي مجالات نصية.
• تقبل متغيرات الأرقام أي وحدة CSS بالإضافة إلى وظائف CSS مثل المشبك () ، calc () ، min () ، و max () للتباعد ، التحجيم ، والرسوم المتحركة.
• متغيرات الصور تخزن الصور القابلة لإعادة الاستخدام مثل الشعارات والخلفيات والأنماط.
• المتغيرات النصية تخزين سلاسل نصية قابلة لإعادة الاستخدام مثل معلومات الاتصال ، و taglines ، وتفاصيل الأعمال.
• متغيرات URL متجر روابط قابلة لإعادة الاستخدام لوسائل التواصل الاجتماعي ، والشركات التابعة ، والترويجات ، واتصالات/Mailto روابط.

إعداد وحدات CSS مع متغيرات تصميم الأرقام

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

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

إنشاء مكتبتك المتغيرة

يمكنك إضافة متغيرات شائعة ، مثل:

• "ارتفاع الأزرار" في مقياس 3REM-أزرار مع حجم النص
• "قسم القسم" في 8VH-يتكيف التباعد لارتفاع الشاشة
• "الحدود الحدودية" في 0.5rem-زوايا مستديرة تبقى متناسبة
• "ارتفاع البطل" في 75VH-تملأ أقسام البطل معظم الشاشات
• "غرامة الحدود" في 1 بكسل-خطوط واضحة تبقى حادة
• "نص السائل" في المشبك (1Rem ، 2.5VW ، 2REM)-نصي نصي بسلاسة
• "عرض المحتوى" في Min (90 ٪ ، 1200px)-تبقى الحاويات قابلة للقراءة
• "الفجوة الديناميكية" في CALC (2REM + 2VW)-يزداد التباعد بحجم الشاشة

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

مقياس متغيرات REM مع حجم النص. تتكيف وحدات VH مع الشاشات الأصغر. المتغيرات مع المشبك () ضبط تلقائيا بين الحد الأدنى والحد الأقصى لقيم.

بناء المسبقة المتصلة

بعد تصميم العنصر الخاص بك مع المتغيرات ، احفظ التباعد كخيار إعداد مسبق. يحمل هذا الإعداد المسبق الآن إشارات إلى متغيرات الأرقام الخاصة بك.

عندما تقوم بتطبيق هذا الإعداد المسبق على وحدات أخرى ، فإنها ترث نفس التباعد القائم على المتغير. قم بتحديث "Card-Padding" من 2REM إلى 3REM في المدير المتغير ، وكل عنصر يستخدم هذا التحديثات المحددة مسبقًا تلقائيًا.

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

بناء مواقع ويب أفضل مع وحدات CSS و Divi 5

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

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

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