كيفية إنشاء نظام ألوان مع Divi 5

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

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

ما هو نظام الألوان؟

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

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

تنطبق قاعدة 60-30-10 على اللون في تصميم الويب. بشكل عام ، سيتم استخدام الألوان المحايدة (مثل خلفيات القسم والمساحة السلبية) ل 60 ٪ من التصميم ، ولون أساسي بنسبة 30 ٪ ، وألوان ثانوية/لهجة للبقاء 10 ٪ المتبقية.

كيفية اختيار ألوان الموقع

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

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

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

بناء نظام الألوان الخاص بك في Divi 5

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

1. اللون الأساسي
2. لون ثانوي
3. العنوان لون النص
4. لون نص الجسم

الخطوة 1: تحديد ألوانك الأساسية كمتغيرات

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

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

أصبحت هذه المتغيرات متاحة على الفور في كل مكان في منشئ Divi المرئي ، وهو مفيد للغاية. ولكن تأكد من حفظهم!

الخطوة 2: إنشاء ظلال وصبغات بألوان HSL

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

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

الآن ، نحتاج إلى تطبيق مرشح على هذا اللون الأساسي لإنشاء تباين. انقر على شريحة اللون ثم حدد "Filter Color" ، أو انقر فوق حامل اللون لمتغير الألوان النسبي الجديد.

افعل هذا لكل من اختلافات الألوان الخاصة بك. تأكد من إعطاء اختلافات الألوان الخاصة بك أسماء معروفة وحفظها.

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

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

تطبيق ألوانك في التصميمات مع Divi

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

الخطوة 1. إنشاء إطار سلكي لصفحتك

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

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

الخطوة 2. الطباعة واللون

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

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

يمكنك تخصيص اللون الذي تحصل عليه الروابط لجعلها أكثر ملحوظًا وجذب النقرات.

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

الخطوة 3. أزرار التصميم

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

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

قم بإنشاء حالات تحوم مع صبغات و/أو ظلال

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

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

الخطوة 4. إنشاء أقسام مع مسبقات ملونة والتدرجات

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

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

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

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

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

اختتام نظام ألوان Divi 5 الخاص بك

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

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

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