استخدام ألوان علامتكم.
طبّقوا ألوان علامتكم على المقاطع والنصوص والأزرار لتبدو كل صفحة جزءًا من الموقع نفسه. يعرض كل حقل لون في DXPR Builder لوحة قالبكم كعيّنات، فتختارون ألوان العلامة بدل تخمين الرموز. يمنح المثال مقطعًا لون علامتكم الأساسي مع نص أبيض.
يتبع الفيديو الخطوات أدناه: فيلوّن مقطعًا بعيّنة علامتكم ويجعل نصّه أبيض.
قبل أن تبدؤوا
- تعيش ألوان علامتكم في القالب. ومع قالب DXPR، اضبطوها ضمن المظهر > الإعدادات > قالب DXPR (
/admin/appearance/settings/dxpr_theme)، في لوحة الألوان. - يعرض DXPR Builder أول عشرة ألوان مختلفة من تلك اللوحة كعيّنات.
تلوين مقطع
- حوّموا فوق المقطع وافتحوا المزيد واختاروا الإعدادات.
- افتحوا لوحة النمط.
- انقروا زر اللون الخاص بـ الخلفية. فيُفتَح منتقي الألوان مع عيّناتكم.
- انقروا عيّنة علامتكم الأساسية.
- انقروا زر اللون الخاص بـ لون الخط واختاروا الأبيض.
- انقروا حفظ. فيتحول نص الفقرة إلى الأبيض؛ وتبقى العناوين بلون عناوين القالب.
- لجعل عنوان أبيض أيضًا، افتحوا الإعدادات الخاصة بعنصر النص التابع له، واختاروا الأبيض لـ لون الخط في لوحة النمط الخاصة به وانقروا حفظ.
ما الذي ترونه
يمتلئ المقطع بلون علامتكم، ويتحول نص فقرته وعنوانه إلى الأبيض. وتظهر العيّنات نفسها في كل حقل لون. ويشمل ذلك لوحتي النمط ونمط التحويم، ولون البداية ولون النهاية لخلفية التدرج اللوني الخاصة بمقطع.
لاستخدام لون خارج اللوحة، اكتبوا رمزه في حقل نص المنتقي، مثلًا #2196F3. حرّكوا منزلق الشفافية للون شفاف. ويزيل مسح اللون.
إبقاء الألوان مرتبطة بالقالب
تنسخ العيّنة رمز اللون إلى العنصر. فإذا غيّرتم لوحة القالب لاحقًا، يحتفظ ذلك العنصر باللون القديم.
لجعل عنصر يتبع اللوحة، استخدموا فئة ألوان بدل ذلك. افتحوا إعدادات العنصر واختاروا رقاقة ضمن فئات HTML:
| الرقاقة | ما تفعله |
|---|---|
| خلفية أساسية وخلفية ثانوية وغيرهما | ألوان Bootstrap من قالبكم |
| لون النص الأساسي ولون النص الثانوي وغيرهما | ألوان نصوص Bootstrap من قالبكم |
| لون الخلفية: الأساسي في قالب DXPR | اللون الأساسي في قالب DXPR، مع لون النص المطابق له |
| لون النص: التمييز 1 في قالب DXPR | اللون الثانوي في قالب DXPR للنصوص |
لا تظهر رقاقات قالب DXPR إلا عندما يكون قالب DXPR مفعّلًا.
حقول الألوان لكل عنصر
| أين | ما يلوّنه |
|---|---|
| النمط في اللوحة: لون الخط ولون الحد والخلفية | العنصر نفسه |
| نمط التحويم في اللوحة: الحقول نفسها | العنصر بينما المؤشر عليه |
| الزر: النوع | نظام ألوان زر جاهز |
| البطاقة: النوع | خلفية البطاقة كلها ونصّها |
| التنبيه: النوع | نجاح أو معلومات أو تحذير أو خطر |
| المقطع: مؤثرات الخلفية > التدرج اللوني | مزيج لونين |
لون مقروء
- حافظوا على تباين كافٍ بين النص والخلفية. يطلب WCAG 2.1 المستوى AA ما لا يقل عن 4.5 إلى 1 للنص العادي.
- لا تستخدموا اللون وحده لحمل المعنى؛ واقرنوه بتسمية أو أيقونة.
- نوّعوا خلفيات المقاطع، مثل الأبيض والرمادي الفاتح ولون علامتكم، لمنح الصفحات الطويلة إيقاعًا.
إذا لم تروا ألوانكم
- منتقي الألوان لا يعرض عيّنات. لا يقدّم القالب الافتراضي لموقعكم لوحة ألوان. اكتبوا رموز ألوانكم، أو استخدموا قالبًا ذا لوحة، مثل قالب DXPR.
- يحتفظ عنصر بلونه القديم بعد تغيير لوحة القالب. تخزّن العيّنة رمز لون ثابتًا. اختاروا العيّنة الجديدة، أو تحوّلوا إلى رقاقة ألوان ضمن فئات HTML التي تتبع اللوحة.
- الخلفية أو لون الخط دون أثر على بطاقة. يضبط النوع في البطاقة غير الافتراضي ألوانها بفئات قالب تتغلب. اضبطوا النوع على الافتراضي أولًا.
ما الخطوة التالية؟
- جعل العناصر تتفاعل عند التحويم: تغيير الألوان عندما يشير الزوار إلى عنصر.
- تنسيق بطاقاتكم: تطبيق ألوانكم على البطاقات.
- CSS مخصص: ضبط قواعد العلامة التي لا تغطيها اللوحات.