باستخدام متغيرات CSS في Divi 5 لإدارة الأنماط بشكل أسرع

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

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

تخيل أنك قمت ببناء موقع به عشرات العناوين والأزرار وقواعد التباعد - ثم يقول العميل ، "اجعل كل شيء أكبر بنسبة 10 ٪". بدون متغيرات ، أنت في ساعات من التحديثات اليدوية. مع متغيرات CSS أو متغيرات التصميم الأصلي لـ DIVI ، يتم إجراء تعديل واحد المهمة.

دعونا نستكشف كيف تعمل متغيرات CSS!

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

ما هي متغيرات CSS وكيف تعمل في Divi 5؟

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

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

لماذا تستخدم متغيرات CSS عندما يكون Divi 5 مسبقًا؟

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

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

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

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

فتح التحكم على مستوى الموقع مع متغيرات CSS

مع متغيرات CSS ، ستحصل على سيطرة عالمية يصعب التغلب عليها. تحديد شيء مثل - مسبق: 40 بكسل ؛ مرة واحدة ، استخدمه عبر موقعك ، وعندما يحين الوقت للتغيير ، قم بتحديث سطر الرمز المفرد ، ويتم ضبط كل مثيل على الفور. يمكن استخدامها أيضًا للتحكم في أحجام الخطوط. على سبيل المثال ، يمكنك تعيين متغير لكل مستوى عنوان (H1-H6) ثم ضبط القيم حسب الضرورة لتحديث جميع العناوين على موقعك على الفور.

لا تحل متغيرات CSS محل المسبقة أو متغيرات التصميم الجديدة لـ Divi 5 - فهي تعززها. تخيل استخدام المتغيرات داخل الإعدادات المسبقة الخاصة بك لإعداد هجين يمكن إعادة استخدامه وقابل للتعديل في واحدة.

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

إعداد متغيرات CSS في Divi 5

البدء بسيط. لتسهيل متابعته ، سنستخدم موقع بداية المستشار المالي لـ Divi.

كيفية تحديد متغيرات CSS

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

:root {
--text-size-h1: 72px;
--text-size-h2: 60px;
--text-size-h3: 48px;
--text-size-h4: 38px;
--text-size-h5: 30px;
--text-size-h6: 24px;
}

بدلاً من ذلك ، يمكنك وضع متغيرات CSS في إعدادات الصفحة في إعدادات الصفحة> متقدم> CSS المخصص . ستؤثر المتغيرات المحددة هنا فقط على العناصر في هذه الصفحة المحددة ما لم يتم تكرارها في مكان آخر.

تطبيق المتغيرات في Divi 5

لتطبيق هذه المتغيرات على عناوينك ، افتح البناء المرئي وانتقل إلى أول H1 يتجه على الصفحة في وحدة رأس FullWidth في قسم Hero.

بعد ذلك ، انتقل إلى علامة تبويب التصميم وتحديد إعدادات نص العنوان .

في حقل حجم نص العنوان ، أضف var (–Text-Size-H1) .

بمجرد إضافته ، سيتم تحديث النص إلى 72 بكسل ، كما هو محدد في متغيراتنا.

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

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

استخدم متغيرات CSS للتباعد

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

:root {
 --spacing: 40px;
}

مرة أخرى في Visual Builder على الصفحة الرئيسية ، سنقوم بتحديد صف ، وانقر فوق Blurb ، وتحديد موقع علامة تبويب التصميم ، ثم حقول المسار .

ضع var (-pating) في الحقول وشاهدها كما ينطبق Divi متغير التباعد على blurb.

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

الجمع بين متغيرات CSS مع الإعدادات المسبقة لتحقيق أقصى قدر من الكفاءة

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

دعنا نسير من خلال مثال سريع باستخدام موقع بداية المستشار المالي لـ Divi. ابدأ بتحديد متغير في Divi> خيارات السمة> CSS المخصصة :

:root {
--text-size: 18px;
}

بعد ذلك ، توجه إلى البناء المرئي ، افتح وحدة رأس FullWidth على الصفحة الرئيسية ، وحدد العنصر الأساسي للمستشار المالي لتحريره.

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

قم بالتبديل إلى علامة تبويب التصميم وحدد الزر إعدادات واحدة . في حقل حجم نص الزر ، أضف VAR (-حجم النص).

بمجرد إضافتها ، سترى الزر الموجود في تحديث وحدة رأس FullWidth إلى 18 بكسل.

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

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

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

تحقيق إدارة أسرع في Divi 5

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

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