2.3الألوان والخطوط العامّة (Site Settings)
الأساسي في 30 ثانية
- إعدادات الموقع (Site Settings) تُعرّف ألوانًا وخطوطًا عامّة مُطبَّقة في كل مكان.
- عرّف لوحة (رئيسيّ، ثانويّ، نصّ، لمسة) وأنماط نصّ نمطية (عنوان، متن).
- عرّف مبكّرًا، طبّق في كل مكان: تغيير دليل الأسلوب يتمّ في مكان واحد.
الخيط الناظم — نادية تضع دليل الأسلوب
حتى الآن كانت نادية تضبط الألوان حالة بحالة — فتسلّلت درجات وردي مختلفة قليلًا في كل مكان. تعيد كل شيء عبر إعدادات الموقع: لوحة نظيفة، نمطا نصّ. من الآن، حين يريد النجّار ضبط «ورديّه»، سيكون إعدادًا واحدًا، يُنشَر على كل الموقع.
تكملة 1.4 (لمحة عن العامّ) — هنا، التنفيذ الكامل.
1. دليل الأسلوب العامّ
إعدادات الموقع (Site Settings) — المتاحة من قائمة المحرّر — تُمركِز التصميم العامّ. تُعرّف فيها لوحة ألوان (رئيسيّ، ثانويّ، نصّ، لمسة) وأنماط نصّ عامّة (عنوان رئيسيّ، عنوان فرعيّ، متن…). تصير هذه القيم قابلة لإعادة الاستخدام: بدل كتابة رمز لون، تختار «اللون الرئيسيّ».
تنشئ نادية لوحتها (وردي العلامة، رمادي داكن للنص، لمسة) ونمطَي نصّ. يتشارك كل الموقع حينها الهويّة نفسها.
2. الاتّساق والصيانة
الفائدة مزدوجة: اتّساق (كل الموقع متناغم) وصيانة مُمركَزة (تغيير لوحة يُنشَر في كل مكان تلقائيًا). الممارسة الجيّدة: عرّف دليل أسلوبك منذ البداية، ثم طبّق الألوان/الأنماط العامّة على كل عنصر — لا قيمًا «ثابتة» أبدًا.
هكذا، حين يتردّد الزبون في «ورديّه»، تُعدّل نادية اللون الرئيسيّ مرّة واحدة، فتتحدّث الأزرار والعناوين والروابط دفعة واحدة.
🔎 مثال ملموس — وضع دليل الأسلوب وتطبيقه (حالة نادية)
Site Settings → ألوان عامّة:
رئيسيّ = #b4005a (وردي) · نصّ = #333 · لمسة = #e0218a
Site Settings → أنماط نصّ:
عنوان = خطّ A، 2.2rem · متن = خطّ B، 1rem، تباعد أسطر 1.6
→ طبّق «اللون الرئيسيّ» على الأزرار (لا رمزًا ثابتًا).
→ الزبون يُغيّر رأيه في الوردي: إعداد واحد، يتحدّث كل شيء.النتيجة: هويّة متّسقة، قابلة للتعديل بنقرة.
الدرس: طبّق العامّ، لا قيمًا ثابتة أبدًا.
مفردات القسم
- إعدادات الموقع (Site Settings)
- الإعدادات العامّة المُطبَّقة على كل الموقع (من قائمة المحرّر).
مثال بسيط: تُعرّف نادية فيها اللوحة وأنماط النص.
ما ليس كذلك: ضبط كل صفحة على حدة.
رد فعل: الهويّة العامّة تُدار هنا.
- الألوان العامّة
- لوحة مُعرَّفة على مستوى الموقع (رئيسيّ، ثانويّ، نصّ، لمسة).
مثال بسيط: اختيار «اللون الرئيسيّ» بدل رمز لون.
ما ليس كذلك: كتابة رمز لون مختلف لكل زر.
رد فعل: طبّق لونًا عامًّا، لا ثابتًا أبدًا.
- أنماط النصّ العامّة
- طباعات نمطية مُعرَّفة عامّةً (عنوان، عنوان فرعيّ، متن).
مثال بسيط: نمط «عنوان» مُعاد في كل مكان.
ما ليس كذلك: ضبط خطّ كل عنوان يدويًا.
رد فعل: نمط نصّ عامّ واحد لكل دور.
- الاتّساق / الصيانة
- كل الموقع يتشارك دليل الأسلوب نفسه؛ تغيير يُنشَر في كل مكان.
مثال بسيط: تغيير الوردي مرّة يُحدّث كل الموقع.
ما ليس كذلك: درجات متباعدة لغياب دليل أسلوب.
رد فعل: اتّساق = دليل أسلوب مُمركَز.
- عرّف مبكّرًا وطبّق في كل مكان
- ضَع دليل أسلوبك منذ البداية، ثم طبّقه على كل عنصر.
مثال بسيط: دليل أسلوب مُنشأ قبل بناء الصفحات.
ما ليس كذلك: ابتكار الألوان على الطريق.
رد فعل: دليل الأسلوب أولًا، البناء بعده.
في التطبيق — وضع دليل أسلوب عامّ
- افتح إعدادات الموقع (Site Settings).
- عرّف لوحة: رئيسيّ، ثانويّ، نصّ، لمسة.
- عرّف 2-3 أنماط نصّ عامّة (عنوان، متن).
- طبّق هذه الألوان/الأنماط العامّة على أزرارك وعناوينك (بلا رمز ثابت).
نصّ جاهز للقول — بيع الاتّساق للزبون (20 ث)
«أنشأتُ دليل أسلوب لموقعك: ألوانك وخطوطك، مُعرَّفة مرّة واحدة للأبد. النتيجة: كل شيء متناغم، وإن أردتَ ضبط ورديّك أو تغيير خطّ، أفعله في إعداد واحد، يُنشَر في كل مكان. بلا تعديلات صفحة بصفحة.»
دليل الأسلوب = اتّساق بصريّ + سرعة استجابة للطلبات.
قالب للنسخ واللصق — دليل أسلوب الموقع
ألوان عامّة:
رئيسيّ #______ ثانويّ #______ نصّ #______ لمسة #______
أنماط نصّ:
عنوان: خطّ ______ حجم ______
متن: خطّ ______ حجم ______ تباعد أسطر ______
مُطبَّقة عامّةً (لا ثابتة): نعم / لا
دليل الأسلوب مُعرَّف قبل البناء: نعم / لاموقع جديد
دليل أسلوب منذ البداية: يُبنى مباشرة بالألوان/الأنماط العامّة.
موقع للمواءمة
استعِد العناصر «الثابتة» لربطها بدليل الأسلوب العامّ.
زبون متردّد
دليل أسلوب عامّ = تُغيَّر «ورديّه» بنقرة، بقدر ما يشاء.
فريق
دليل أسلوب مُشترَك يمنع أن يبتكر كلٌّ ألوانه الخاصّة.
✓ ممارسات جيدة
- عرّف دليل الأسلوب قبل البناء.
- طبّق الألوان/الأنماط العامّة، لا ثابتة أبدًا.
- أبقِ قليلًا من الألوان والأنماط، متّسقة.
✗ أخطاء شائعة
- ضبط الألوان حالة بحالة (درجات متباعدة).
- نسيان تطبيق العامّ (قيم ثابتة).
- تكثير الألوان والخطوط.
النقاط الأساسية
- Site Settings = دليل الأسلوب العامّ للموقع.
- لوحة + أنماط نصّ قابلة لإعادة الاستخدام في كل مكان.
- تغيير يُنشَر من مكان واحد.
- عرّف مبكّرًا، طبّق في كل مكان.
تحدّي 48 ساعة — طبّق غدًا
أنشئ لوحة (4 ألوان) ونمطَي نصّ في إعدادات الموقع، ثم طبّقها على أزرارك وعناوينك. غيّر اللون الرئيسيّ ولاحظ التحديث العامّ. 20 دقيقة.
- عرّفتُ لوحة وأنماط نصّ عامّة.
- أُطبّقها في كل مكان (بلا قيم ثابتة).
- أعرف تغيير دليل الأسلوب في مكان واحد.
أسئلة شائعة
أين تُعرَّف الألوان العامّة؟
في إعدادات الموقع (Site Settings)، المتاحة من قائمة المحرّر. تُنشأ فيها لوحة (رئيسيّ، ثانويّ، نصّ، لمسة) قابلة لإعادة الاستخدام في كل مكان.
ماذا يُربَح بدليل أسلوب عامّ؟
الاتّساق (كل الموقع متناغم) والصيانة المُمركَزة: تغيير لون أو خطّ يُنشَر في كل مكان تلقائيًا، دون لمس كل صفحة.
هل يمكنني وضع لون «ثابت» عرضيًا؟
ممكن لكن غير مُستحبّ: يخلق لااتّساقًا ويُعقّد التغييرات. فضّل دائمًا تطبيق لون عامّ.
النجّار قد يُغيّر رأيه مرّات في «ورديّه». كيف تُنظّم نادية نفسها؟