تحويل ألوان العلامة التجارية لعميلك إلى نظام ألوان Divi 5

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

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

فهم نظام ألوان Divi 5

إذا كنت قد عملت مع ألوان عالمية في Divi 4 ، فأنت تعرف بالفعل مدى فائدة اللون مرة واحدة وتطبيقه عبر موقعك. يعتمد Divi 5 على نفس الفكرة ، ولكن هذه المرة ، يتحول اللون إلى نظام كامل يقيس معك.

اشترك في قناتنا على YouTube

فيما يلي الترقيات الرئيسية الثلاث:

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

الترقية الثانية هي مرشح لون HSL. تتيح لك المتزلجون ضبط اللون والتشبع والخفة ، مما يتيح لك المزيد من التحكم عند العمل مع النغمة والتباين.

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

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

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

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

تعلم كل شيء عن نظام ألوان Divi الجديد

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

تحويل ألوان العلامة التجارية لعميلك إلى نظام ألوان Divi 5

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

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

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

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

1. احفظ لون عميلك الأساسي كمتغير تصميم

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

إضافة لون أساسي

للبدء ، افتح المدير المتغير وتبول إلى علامة التبويب Colors .

قد تتضمن اللوحة بالفعل القيم الافتراضية للمنصات الأولية والثانوية والعنوان ونص الجسم. في حقل اللون الأساسي ، أدخل رمز Hex للون العلامة التجارية الرئيسية وانقر فوق حفظ المتغيرات.

إضافة لون ثانوي

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

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

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

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

حدده. هذا يجلب اللون الأساسي كنقطة انطلاق.

الآن ، انقر فوق Swatch مرة أخرى لإعادة فتح النافذة ، ثم افتح منسدلة Color Filters . هذا يكشف عن شرائح HSL ، حيث يمكنك ضبط اللون والتشبع والخفة.

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

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

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

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

2. بناء الألوان الداعمة باستخدام تعديلات HSL

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

لإنشاء هذه الاختلافات ، افتح لوحة HSL وضبط Sliders:

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

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

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

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

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

3. استبدل الألوان الثابتة الموجودة بالمتغيرات

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

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

للقيام بذلك ، يمنحك Divi خيارين: تمديد السمات والعثور والاستبدال. يتيح لك كلاهما تحديث عناصر متعددة بسرعة ، لكن كل منهما يضيء في موقف مختلف قليلاً.

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

لنبدأ بسمات التمديد.

باستخدام سمات تمديد

في هذا المثال ، نريد تعيين اللون الثانوي الجديد لجميع H2S في التصميم. سنبدأ بتطبيقه على واحد منهم فقط.

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

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

باستخدام Find and Replive

الآن دعنا نحاول البحث والاستبدال ، والتي تعمل بشكل جيد بشكل خاص عندما تريد تبديل قيمة لون محددة عبر الموقع.

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

هذا كل ما يتطلبه الأمر. يتم الآن تحديث كل مثيل من هذا اللون القديم مع متغيرك الجديد.

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

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

اختبار نظام الألوان الجديد الخاص بك

كل ما فعلته كان حول الإعداد. الآن عندما يبدأ الإعداد بأكمله في إظهار قيمته.

مع وجود نظامك في مكانه ، حاول تغيير اللون الأساسي. سوف يستجيب التصميم بأكمله في ثوانٍ - سيتم تحديث الخلفيات والأزرار وتأثيرات التحويم وأي عناصر متصلة أخرى على الفور.

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

تبدو مؤلمة ، ولكن ليس لك. يمكنك فقط تحديث اللون الأساسي ، ويتبع بقية الموقع.

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

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

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

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

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

Divi يجعل سير العمل الخاص بك مضاد في المستقبل

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

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

وهذا مجرد واحد من العديد من الأشياء التي صنعناها خلال الأشهر القليلة الماضية ، بما في ذلك Loop Builder و Flexbox Layout وواجهة معاد تصورها بالكامل لمصممي الويب الحديثة. إذا لم تكن قد استكشفتها بعد ، فقد حان الوقت الآن.