مقارنة ديفي 4 و Divi 5 ملتزمات الألوان

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

لهذا السبب قام Divi 5 بإعادة تصور نظام الألوان تمامًا. في هذا المنشور ، سنقارنه مباشرة بمنتقي ألوان Divi 4 وإظهار مدى قوة ومرونة.

قارن ملتمي الألوان

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

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

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

حيث أصبح Divi 4 محدودًا

ومع ذلك ، لم يكن كل شيء مثاليًا. كل شيء يستخدم رموز السداسي أو RGBA فقط. إن الحصول على نسخة أخف من الأزرق الخاص بك يعني تخمين أو استخدام تطبيق آخر لمعرفة ذلك. إذا كانت علامتك التجارية تحتاج غالبًا إلى 20 ٪ من ألوان أغمق أو 40 ٪ أخف من لون العلامة التجارية الرئيسية ، فلن يتمكن Divi 4 من القيام بذلك نيابة عنك.

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

ما هي التغييرات البصرية الخمسة لـ Divi

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

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

ما تراه هو أن Divi ينتقل من اختيار الألوان الفردية إلى نظام الألوان. تم بناء Divi 4 لـ "أحتاج إلى هذا اللون الأزرق المحدد". تم تصميم Divi 5 لـ "أحتاج إلى اللون الأزرق أخف بنسبة 20 ٪ من اللون الأساسي والتحديثات تلقائيًا عندما أقوم بتغيير ألوان علامتي التجارية تمامًا."

كان على الواجهة أن تتغير لأن ما تغير.

منتقي ألوان Divi 5 الجديد

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

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

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

كيف يعمل النظام الجديد بالفعل

تبدأ الألوان النسبية بمتغير لون أساسي وتسمح لك بتطبيق الاختلافات. اختر المتغير الأزرق الأساسي الخاص بك ، قلل الخفيف بنسبة 20 ٪ ، وحفظه كمتغير "Royal Deep Blue".

Divi 5's HSL Color Picker vs Divi 4's Color Picker

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

كيف تعمل ألوان Divi 4 العالمية

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

قام معظم الأشخاص بإعداد ثلاثة أو أربعة ألوان ماركة رئيسية بهذه الطريقة. إنه يتفوق على الصيد من خلال رموز سداسية أو تحاول أن تتذكر ما إذا كنت تستخدم #2E86C1 أو #3498db للروابط الخاصة بك.

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

لماذا انتقل Divi 5 إلى متغيرات التصميم

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

يحصل كل متغير على اسم ووصف مناسب. بدلاً من "Global Color 3" ، يمكنك تسميته "نص الرأس الرمادي" أو "تراكب الخلفية الدقيقة". بعد ستة أشهر ، ستعرف بالضبط ما هو عليه.

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

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

الفرق الرئيسي في الممارسة

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

إعداد نظام الألوان الخاص بك في Divi 4 مقابل Divi 5

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

إعداد الألوان في Divi 4

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

1. أضف ألوانك العالمية

اعتمد إعداد ألوان Divi 4 على نظام الألوان العالمي والتنظيم اليدوي. ستبدأ بالانتقال إلى خيارات ألوان أي عنصر ، ثم إنشاء ألوان عالمية من خلال التنقل إلى علامة التبويب "العالمية" ، أو النقر فوق أيقونة Plus بجوار منتقي الألوان ، أو تحرير لون عالمي موجود بالنقر عليها. تتيح لك الواجهة إدخال رموز Hex مباشرة أو استخدام منتقي Visual لتحديد الألوان.

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

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

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

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

2. تطبيق ألوانك العالمية

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

انقر على Global لمشاهدة لوحة الألوان العالمية الخاصة بك. انقر فوق أي حوامل ألوان عالمي ، وينطبق على الوحدة النمطية على الفور.

3. تعديل ألوانك العالمية

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

إعداد ألوانك في Divi 5

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

1. قم بإنشاء متغير اللون الأساسي الخاص بك

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

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

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

استخدم Sliders HSL لضبطه: الخفة المنخفضة بنسبة 25 ٪ للأسنان ، 20 ٪ لنص الجسم ؛ رفع الخفة بنسبة 20 ٪ لحالات التحويم ، أو تغيير التشبع للخلفيات الصامتة. امنح هذه الاختلافات أسماء واضحة مثل "Deep Orange" و "Bright Crimson" أو "Hover State (PRIMAL LOLING)" ، "Muted Background (Coll -Secondary).

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

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

3. تطبيق المتغيرات على عناصرك

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

اختر من نظام الألوان المنظم بدلاً من إنشاء ألوان لمرة واحدة عشوائية تكسر الاتساق.

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

4. بناء الإعدادات المسبقة التي تشير إلى متغيرات لون HSL

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

احفظ الظل كجماعة خيارات مسبقًا باستخدام متغير لون الظل بناءً على لونك الأساسي.

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

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

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

5. طرح الألوان عبر موقعك

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

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

Divi 5's Find واستبدال الميزة يسرع عملية التحويل للمواقع الموجودة بألوان ثابتة متناثرة. انقر بزر الماوس الأيمن فوق أي حقل لون وحدد "البحث والاستبدال".

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

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

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

سوف يناسب منتقي الألوان الجديد سير العمل الخاص بك

يعمل نظام ألوان Divi 5 على إصلاح مشاكل سير العمل التي تباطأت المشاريع لسنوات. لم يعد عليك استخدام أدوات خارجية للعثور على الظل الصحيح. يمنحك Sliders HSL تحكمًا دقيقًا دون مغادرة المنشئ.

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

جرب نظام الألوان الجديد في Divi 5 اليوم!