فهم الألوان النسبية في تصميم الويب

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

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

مشاكل إدارة الألوان المشتركة

يمكن أن يتضاعف لون العلامة التجارية المثالي الذي تختاره بسرعة في عشرات الاختلافات المنتشرة عبر موقعك. فيما يلي بعض المشكلات التي تساهم في هذه القضية:

إدارة الاختلافات لون واحد

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

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

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

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

مشكلة التعتيم

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

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

تختلف المحاولات 1 و 2 و 3 في الظل والشفافية لأن مقاطع العين لا تعطي نتائج دقيقة حتى مع وجود عناصر تحكم دقيقة.

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

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

إنشاء المتغيرات يدويا

يقدم معظم بناة الصفحات شكلاً من أشكال توفير الألوان ، لكنه سرعان ما يصبح غير قابل للإدارة. يمكنك حفظ الألوان بأسماء عامة مثل "Yellow 1" و "Yellow 2" و "Yellow Light".

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

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

يضيف أعضاء الفريق اختلافات الألوان الخاصة بهم ، مما يخلق ظلال مكررة بأسماء مختلفة. توجد علامتك التجارية Orange كـ "Orange" و "Brand Orange" و "Primary Orange" و "Orange Main". لا أحد يعرف أي واحد لاستخدامه.

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

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

ما هي الألوان النسبية في CSS (ولماذا تحتاج إليها)

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

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

تدفقات العمل التقليدية تتطلب المزيد من الجهد اليدوي. صنع المصممون مجموعات الألوان في Photoshop. استخدم المبرمجون أدوات مثل Sass. كان على بناة الموقع تخمين في مطابقة الألوان. CSS الآن يتعامل مع هذا تلقائيا.

كيف يخلق CSS ألوانًا من الألوان

تخبر كلمة "From" CSS باستخدام لون موجود كنقطة انطلاق. يمكنك إعطاء CSS لونًا ، ويكسر هذا اللون إلى قطع يمكنه استخدامه.

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

يمكنك البدء بأي تنسيق لون. استخدم لون سداسي مثل #e91e63. أخبر CSS بالعمل معها كـ HSL لتغييرات سطوع سهلة. إخراجها كـ RGB إذا كان الرمز الخاص بك يحتاج إلى ذلك. CSS يحول كل شيء تلقائيا.

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

تقسيم الألوان إلى أجزاء

تنسيقات الألوان المختلفة تمنحك أدوات مختلفة. يتيح لك RGB تغيير اللون الأحمر والأخضر والأزرق بشكل منفصل. يمنحك HSL ضوابط تشبع ، وتشبع ، وخفة.

إليكم كيف يعمل. تكتب RGB (من #FF4081 RGB). يأخذ CSS رمز Hex الوردي ويقسمه إلى أرقام حمراء وخضراء وزرقاء. ثم يمكنك استخدام هذه الأرقام كما تريد. يبقى النمط كما هو: وظيفة ملونة (من قناة قناة 2).

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

يتم تحويل كل جزء لمطابقة ما اخترته. إن تحويل هذا السداسي الوردي يمنحك r = 255 ، g = 64 ، b = 129. استخدمها كما هي أو تغييرها باستخدام calc ().

يمكنك مزج القنوات ومطابقتها أيضًا. تريد أن تكون جميع وحدات البكسل الحمراء هي نفسها؟ استخدم RGB (من VAR (-COLOR) GGG). هذا يأخذ القيمة الخضراء ويستخدمها للأحمر والأخضر والأزرق ، مما يخلق نغمة رمادية من لونك الأصلي.

دعم المتصفح والاعتبارات الأخرى

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

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

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

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

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

كيف يجعل Divi 5 ألوانًا نسبية سهلة

الآن ، أنت تعرف قوة الألوان النسبية ؛ ومع ذلك ، ربما تكون قد أدركت أنه ليس من السهل تنفيذها. اتخذ Divi 5 نهجًا مختلفًا وبناء مرونة ملونة مباشرة في الواجهة البصرية. ولكن دعونا نكتشف ما هو Divi بالضبط.

ما هو ديفي؟

Divi هو منشئ صفحة WordPress الأكثر شعبية. يعطي الأولوية للتصميم المرئي ويمنحك تحكمًا كاملاً في التصميم الخاص بك.

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

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

تخطي الصفحة الفارغة البلوز مع مواقع Divi السريعة

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

إذا كنت تريد شيئًا أكثر تخصيصًا ، فإن Divi Quick Sites تعمل مع Divi AI لبناء تخطيطات مخصصة بناءً على تفاصيل عملك. صف شركة الاستشارات أو المطعم الخاص بك ، وينتج الصفحات ذات الصلة بمحتوى خاص بالصناعة.

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

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

التحكم الكامل في تصميم موقعك ، الآن مع الذكاء الاصطناعي

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

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

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

هل تحتاج إلى صور جديدة؟ يخلق هؤلاء أيضًا.

أكمل أقسام الصفحات التي تناسب عملك تمامًا.

Plus Code Snippets عندما تحتاجها.

Divi 5: التطور التالي

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

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

قمنا بإعادة بناء المؤسسة باستخدام معايير الويب اليوم. وهذا يعني عدد أقل من الأخطاء الغريبة والأداء الأكثر سلاسة بشكل عام.

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

إصدار Alpha جاهز لاستخدامه على مواقع الويب الجديدة ، على الرغم من أننا لا نوصي بتحويل مواقع Divi 4 الحالية إلى Divi 5.

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

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

فيما يلي بعض التحديثات الرئيسية:

• تسرع قاعدة الكود الحديثة الأمور عن طريق تحميل الوحدات النمطية التي تحتاجها بالفعل ، مما يؤدي إلى إزالة الكود الذي تباطأ Divi 4.
• يتضمن نظام تخطيط Flexbox الكامل الآن قوالب صف جديدة ، وتركيز رأسي تلقائي ، ولف المحتوى ، وتوزيع التباعد من خلال عناصر التحكم البصرية.
• منشئ حلقة جديد تمامًا يكرر الوحدات أو المجموعات أو الأقسام ذات المحتوى الديناميكي ويدعم حلقات متداخلة لهياكل البيانات المعقدة.
• توفر الألوان النسبية مع HSL تحكمًا ديناميكيًا للألوان استنادًا إلى قيم اللون والتشبع والخفة.
• يحل النظام المستند إلى HTML-5 محل الرموز المختصرة تمامًا ، مما يعني وجود عدد أقل من الأخطاء وتوافق WordPress الأفضل.
• حصلت واجهة البناء المرئي على ترتيبات كاملة ، مع أوضاع خفيفة ومظلمة ، وألواح قابلة للرسو ، ونوافذ مبدعة ، واختصارات لوحة المفاتيح ، وعرض محسّن مع فتات الخبز.
• تحل نقاط التوقف المستجيبة القابلة للتخصيص محل نقاط Divi 4 الثابتة الثلاثة ، مما يتيح لك المزيد من التحكم في تحجيم القماش لمعرفة كيف تنظر التصميمات إلى أحجام الشاشة المختلفة.
• تعمل مجموعات الوحدات النمطية مثل الحاويات متعددة الاستخدامات التي تجمع العناصر ذات الصلة معًا حتى تتمكن من تصميمها كوحدات أو تحريكها دون فقدان العلاقات.
• تتيح لك متغيرات التصميم تعيين الألوان والخطوط والأرقام والصور والنص وعناوين URL على مستوى العالم عبر موقعك بالكامل.
• تحفظ خيار مجموعة الإعدادات المسبقة لخصائص تصميم محددة مثل الطباعة أو الظلال التي تعمل عبر أنواع الوحدات النمطية المختلفة.
• تدعم وحدات CSS المتقدمة الآن المشبك () و calc () و min () و max () من خلال الواجهة المرئية دون كتابة رمز.
• يقوم نظام التفاعلات بإنشاء النوافذ المنبثقة ، والتبديل ، وتأثيرات التمرير ، وتأثيرات حركة الماوس دون ملحقات خارجية.

ما الذي سيأتي ...

• وحدات WooCommerce أعيد بناؤها من نقطة الصفر باستخدام بنية Divi 5 مع توافق كامل وتوافق متغير.
• سيقدم مفتش العنصر أدوات تصحيح جديدة وتطوير للمستخدمين المتقدمين.
• وبالمثل ، يمكن أن تساعدك Group Carousel Module في إنشاء Carousel مكونة من مجموعات ، ثم تطوير المحتوى لكل شريحة من خلال استخدام مجموعة Divi الكاملة من العناصر لتصميم أي نمط من carousel التي تريدها.

بناء لوحات توسع نفسها مع Divi 5

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

1. إعداد أساس اللون الأساسي الخاص بك

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

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

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

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

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

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

2. إنشاء ظلال ملونة مع عناصر تحكم HSL

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

الآن ترى ثلاثة منزلقات: Hue ، التشبع ، وخفة. هذه تتحكم في كيفية تغير لونك الأساسي.

يتحرك Hue حول عجلة الألوان من 0 إلى 360 درجة. اترك هذا بمفرده عند جعل ظلال من نفس اللون. يمتد التشبع من 0 ٪ إلى 100 ٪ ويتحكم في مدى ظهور لونك. في 0 ٪ ، يصبح أي لون رمادي. في 100 ٪ ، تحصل على شدة كاملة.

يمتد الخفة من 0 ٪ إلى 100 ٪. هذا شريط التمرير يخلق ظلالك الفعلية. في 0 ، تحصل على الشكل النقي من لونك. انقلها إلى 50 ٪ للظلال الأخف. إسقاطها إلى -20 ٪ للظلال الداكنة.

يمكنك مزج هذه الألوان HSL ومطابقتها لإنشاء ألوان وتغيرات جديدة حسب الحاجة.

دعنا ننشئ اختلافين من لوننا الأساسي. أضف متغيرًا ، وقم بتسمية ظلالك الجديد شيئًا واضحًا مثل "الضوء الأساسي" أو "الظلام الأساسي". كرر هذه العملية لإنشاء ظلال متعددة. يستخدم الإعداد النموذجي الأساسي الخاص بك في الخفة بنسبة 30 ٪ للخلفيات وما شابه ، وظلام بنسبة -15 ٪.

يمكنك أيضًا إضافة مثل هذه الظلال الأخف والأغمق لونك الثانوي.

3. بناء متغيرات الألوان المتداخلة

لقد جعلت الضوء الأساسي والظلام الأساسي في الخطوة 2. الآن يمكنك بناء المزيد من الألوان من تلك الظلال.

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

يمكنك بناء ألوان مخصصة من ظلالك أيضًا. اجعل "Shade Shadow" عن طريق اختيار الزر يحوم. ضبط العتامة على 15 ٪. الآن يتصل ظل النص الخاص بك بحوم الزر ، والذي يتصل بـ Primary Dark ، والذي يتصل بـ Primary.

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

أضف ظلال مماثلة لونك الثانوي للحصول على مجموعة رائعة من الألوان للاختيار من بينها.

4. تطبيق الألوان النسبية على موقعك

لقد قمت ببناء أساس اللون الخاص بك وإنشاء كل تلك الظلال. الآن يأتي الجزء العملي: تنفيذها عبر موقع الويب الخاص بك.

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

اختر لونك الأساسي للأزرار الرئيسية. اختر الضوء الأساسي لخلفيات القسم. استخدم الظلام الأساسي للحدود واللكنات الدقيقة مثل أزرار CTA. كل اختيار يتصل بنظام الألوان الأساسي الخاص بك.

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

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

5. تحديث الألوان عند الحاجة

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

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

كان ظل خلفية البطاقة الخاص بك عتامة 15 ٪ من الضوء الأساسي. يصبح 15 ٪ عتامة الضوء الأخضر الجديد بدون لمسه. يتصل ظل النص الخاص بك بحوم الزر ، والذي يتصل بـ Dark الأساسي ، والذي يتصل بـ Primary.

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

ألوانك ، قواعدك

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

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

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