ما هو HSL ولماذا يجب على المصممين إتقانه

نشرت: 2025-08-23

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

هذا هو المكان الذي يأتي فيه Hue و Sitring و Laffness (HSL). يجعل تعديلات الألوان أكثر بصرية ويمكن التنبؤ بها ، ويدعمها Divi 5 الآن بفضل إصدار ألوانها النسبية وإصدار ميزة HSL. دعونا نستكشف كيف يعمل ولماذا تريد إتقانه.

جدول المحتويات
  • 1 لماذا يكافح معظم المصممين مع خيارات الألوان
    • 1.1 مشكلة قيم RGB ثابتة
  • 2 ما هو نظام اللون والتشبع والخفة (HSL)؟
    • 2.1 كيف تعمل المكونات الثلاثة معًا
    • 2.2 لماذا عادة ما يتجنب بناة الصفحات HSL
  • 3 قم بإنشاء اختلافات ألوان مثالية مع عناصر التحكم في HSL الجديدة من Divi 5
    • 3.1 ما هو Divi؟
    • 3.2 ما الجديد في Divi 5؟
  • 4 كيفية إنشاء ألوان HSL مع Divi 5
    • 4.1 1. بناء الألوان النسبية من الألوان العالمية
    • 4.2 2. إدارة العلاقات المتغيرة للتصميم متعدد الطبقات
    • 4.3 3. تطبيق ألوان HSL على موقعك
    • 4.4 4. احفظ ألوان HSL الخاصة بك كإعدادات مسبقة قابلة لإعادة الاستخدام
  • 5 بناء أنظمة الألوان لمواقع الويب الخاصة بك مع Divi 5

لماذا يكافح معظم المصممين مع خيارات الألوان

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

يتم صنع ألوان Hex عن طريق خلط القيم الحمراء والأخضر والأزرق. يوضح كل زوج (مثل 4A ، 90 ، E2) مقدار كل لون يستخدم ، من 0 إلى 255. معًا ، يخلق اللون النهائي #4A90E2

يتم صنع ألوان Hex عن طريق خلط القيم الحمراء والأخضر والأزرق. يوضح كل زوج (مثل 4A ، 90 ، E2) مقدار كل لون يستخدم ، من 0 إلى 255. معًا ، يقومون بإنشاء اللون النهائي #4A90E2.

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

تخلق أنظمة الألوان التقليدية مشاكل أكبر عند العمل عبر سياقات مختلفة. يصبح إنشاء اختلافات الألوان تخمينًا خالصًا. تريد خمس ظلال تعمل معًا ، ولكن لا يوجد نظام لذلك. قد يبدو Lightening #4A90E2 إلى #6BA3E8 بشكل صحيح ، أو قد يبدو غسلًا. لن تعرف حتى تراه.

A-visual-resentation-of-how-hard-to-to-get-for-a-a-us-code-code-code-code-code

الحصول على ظلال عن طريق تغيير رموز السداسي ليس بسيطًا. يتم اختيار قيم سداسية عشرية جديدة ( #6BA3E8) بعناية على اليسار لإنشاء ظل أخف من #4A90E2. على اليمين ، مجرد إجراء تغييرات اسمية (#3B99E5) لا يخفف اللون ولكنه يغيره تمامًا.

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

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

مشكلة قيم RGB ثابتة

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

تمثل البصري الذي يمارس العيون البصرية-من أجل التخلص من العيون البشرية

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

A-visual-resentation-of-how-how-rgb-perplexing-get-get-in-rgb-could-be-be-be-be-be-too

زاد لون العلامة التجارية الأزرق مع قيم RGB بالتساوي بمقدار +50 ، مما يؤدي إلى ظل مغسول ، وهو ليس لهجة أخف وزنا متوقعة. هذا يدل على أن إضافة نفس الكمية إلى كل قناة RGB لا تنتج دائمًا ظلال ألوان يمكن التنبؤ بها أو متوازنة.

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

مثال على ذلك من بين الأسماء والكولون-المبرمج والتحديد

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

يتحول العمل الملون إلى التجربة والخطأ بدلاً من التصميم المتعمد.

ما هو نظام اللون والتشبع والخفة (HSL)؟

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

عندما تفكر ، "أريد خضراء داكنة" ، فأنت تفكر بالفعل في مصطلحات HSL. أنت تعلم أنك تريد الأخضر (Hue) ، وربما غني إلى حد ما (التشبع) ، وعلى الجانب المظلم (الخفة).

كيف تعمل المكونات الثلاثة معًا

يعمل Hue مثل عجلة الألوان المقطوعة من طيف الضوء المرئي. تربط النهايات باللون الأحمر مع أرجواني ، مما يخلق حلقة سلسة من كل لون ممكن. تريد البرتقالي المثالي؟ ابدأ من اللون الأحمر (0 درجة) وانتقل نحو الأصفر حوالي 30 درجة.

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

A-3D-REPRESSATION-OF-HOW-HSL-COLORS-CONSPING-BY-GRAPHIC-ON-WIKIPEDIA-ABOUT-THE-SAME-TOPIC

كيف تعمل ألوان HSL ، مستوحاة من الرسم على ويكيبيديا حول نفس الموضوع

يتراوح الخفة من 0 ٪ (أسود نقي) إلى 50 ٪ (محايد) إلى 100 ٪ (أبيض نقي). تعيش معظم الألوان القابلة للاستخدام بين 20 ٪ و 80 ٪ من الخفة. هذا يطابق كيف تفكر بشكل طبيعي في جعل الألوان أخف وزنا أو أغمق.

لماذا عادة ما يتجنب بناة الصفحات HSL

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

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

قم بإنشاء اختلافات ألوان مثالية مع عناصر التحكم HSL الجديدة من Divi 5

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

ما هو ديفي؟

Divi هو منشئ صفحة يعمل بشكل مختلف عن بناة صفحات WordPress الأخرى. يمكنك الحصول على أدوات التصميم المرئي مختلطة مع عناصر التحكم في الطباعة الخطيرة. يُظهر المحرر المباشر تغييراتك على الفور. اضبط أحجام الخطوط ، وتباعد خط القرص ، وشاهد تحديث صفحتك هناك.

لقطة شاشة للصفحة الرئيسية الجديدة لـ Divi

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

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

لقطة شاشة لبعض التخطيطات المتاحة لـ Divi

كل تصميم يعرف صناعتك. الألوان والتباعد وتدفق المحتوى كلها منطقية لكيفية تفكير عملائك وتصفحهم.

خذ التحكم الكامل في الموقع

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

لقطة شاشة لما يمكن صنعه باستخدام منشئ موضوع Divi

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

إنه يبني أقسام صفحات كاملة تفهم عملك.

يكتب قصاصات الكود عندما تحتاج إليها.

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

حتى توليد صور جديدة تمامًا عند الطلب.

تخطي مشكلة الصفحة الفارغة مع مواقع Divi السريعة

تقوم Divi Quick Sites بإصلاح مشكلة الصفحة الفارغة التي توقف العديد من المشاريع قبل البدء. مواقع بداية المهنية تأتي مع الطباعة التي تم إعدادها بالفعل. يقوم فريق التصميم الخاص بنا ببناء هذه القوالب مع صور فريدة وأعمال فنية لن تراها في أي مكان آخر.

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

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

بعد ذلك ، يظل كل شيء قابلاً للتحرير بالكامل ، بحيث يمكنك تحسين الطباعة لتتناسب مع رؤيتك.

ما الجديد في Divi 5؟

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

لقطة شاشة للصفحة الرئيسية الجديدة لـ Divi 5

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

فيما يلي بعض النقاط البارزة:

  • إطار إطار عمل لإعادة بناء نظام الرمز القديم القديم. كل شيء يعمل على الهندسة المعمارية الحديثة القائمة على الكتل التي تتعامل متصفحات أفضل بكثير.
  • يمنحك نظام Divi 5 Flexbox تحكمًا مباشرًا لبناء تخطيطات حديثة ومستجيبة ، وإدارة المحاذاة والتباعد واللف بسهولة دون رمز مخصص.
  • يجلب نظام ألوان HSL عناصر التحكم في الألوان تتطابق مع كيفية تفكير المصممين. اضبط اللون والتشبع والخفة بدلاً من التخمين مع رموز السداسي.
  • سبع نقاط التوقف المخصصة تحل محل الحد الأقصى القديم بالحجم. تبدو الطباعة الخاصة بك مثالية على كل جهاز يستخدمه الزوار.
  • تعمل وظائف CSS المدمجة في CALC () و CLAMP () و MIN () و MAX () في المحرر المرئي. بناء نص مستجيب يتوافق بشكل طبيعي بدون رمز.
  • متغيرات التصميم العالمية تخزن الخطوط والألوان والتباعد في مكان واحد. قم بتغيير خط العنوان الرئيسي مرة واحدة. يتم تحديث كل H1 عبر موقعك تلقائيًا.
  • يتضمن نظام التصميم المستند إلى الإعداد المسبق المسبق عنصرًا مسبقًا للوحدات النمطية الفردية بالإضافة إلى مجموعة الخيارات المسبقة لأنماط الطباعة الكاملة. للحفاظ على الأمور متسقة ، استخدمها عبر وحدات مختلفة.
  • تحصل واجهة Visual Builder الجديدة على ألواح قابلة للرسو ، ونوافذ مبدعة ، واختصارات لوحة المفاتيح ، وطبقات أفضل مع فتات الخبز. يصبح التنقل أسهل بكثير.
  • وضعت الصفوف المتداخلة صفوفًا داخل صفوف أخرى للتخطيطات المعقدة. بناء ترتيبات التخطيط المتقدمة بدون أنواع الأقسام الخاصة.
  • تجمع مجموعات الوحدة النمطية بين عناصر مختلفة في وحدات واحدة. هذا يجعل إدارة تخطيطات النص المعقدة أسهل ، ويمكنك أيضًا إنشاء وحدات مخصصة.
  • تحرك مساحة العمل متعددة الألواح لوحات أينما تعمل بشكل أفضل. الحفاظ على عناصر التحكم في الطباعة مفتوحة أثناء ضبط أشياء التصميم الأخرى.
  • نسخ إدارة السمات والمعاجين وإعادة تعيين أنماط الطباعة بين العناصر. اختر سمات محددة للنقل بدلاً من نسخ كل شيء.
  • أوضاع الواجهة الخفيفة/المظلمة تقلل من إجهاد العين أثناء جلسات التصميم الطويلة.
  • يوضح تحجيم القماش كيف تبدو الطباعة على أحجام شاشة مختلفة دون مغادرة المحرر.

اكتشف جميع إصدارات ميزة Divi 5

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

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

  • تقبل Hue 0–360 درجة ، وتلتزم القيم السلبية حولها (على سبيل المثال ، -60 يصبح 300). تتصل عجلة الألوان في كلا الطرفين. صفر ، 360 ، و 360 السلبية كلها تمنحك نفس اللون الأحمر. هل تحتاج إلى لون تكميلي؟ اضبط Hue على 180 درجة من نقطة البداية الخاصة بك.
  • يمتد التشبع من 0 ٪ إلى 100 ٪ ويتحكم في مدى ظهور لونك. صفر في المئة يشرفون جميع شدة الألوان ، وترك الرمادي. مائة في المئة يعطي لون الكامل.
  • تعمل الخفة في نفس النطاق المئوي. صفر يجعل الأسود ، 100 ٪ يخلق أبيض ، و 50 ٪ يظهر الشكل النقي لأي لون اخترته.

HSL

تحديث عناصر التحكم مباشرة أثناء السحب. قم بتطبيق الأزرار أو عدم تحديث التأخير لن يقطع سير العمل الخاص بك.

1. بناء الألوان النسبية من الألوان العالمية

تتيح لك الألوان النسبية إنشاء ألوان جديدة تعتمد على الألوان العالمية الموجودة من خلال تعديل مكونات HSL الفردية. ابدأ في Manager Design Variable عن طريق إضافة لون جديد.

لقطة شاشة للمكان الذي يمكنك العثور فيه على متغيرات التصميم

باستخدام منتقي الألوان ، اضبط لونك الأساسي (قد يكون هذا اللون العلامة التجارية) لمطابقة اللون العالمي الأساسي الحالي.

دعنا نقوم بإعداد الألوان الثانوية باستخدام تحول Hue الأساسي لإنشاء ألوان تكميلية. خذ لونك الأساسي ، مع ضبط الخفة إلى 25 ٪.

يمكنك حتى اللعب مع اللون أو التشبع لإنشاء لون جديد مثل اللون الثانوي.

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

وبالمثل ، قم بإنشاء ظلال أغمق لألوان نص العنوان والألوان العالمية لألوان نص الجسم باستخدام اللون الأساسي كقاعدة.

لقطة شاشة لإعداد ألوان النص باستخدام اللون الأساسي كقاعدة

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

لقطة شاشة لإعداد ألوان إضافية مع إعدادات HSL

2. إدارة العلاقات المتغيرة للتصميم متعدد الطبقات

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

لقطة شاشة لكيفية إعداد الألوان والتعطيل الجديدة مع متغيرات تصميم الألوان القابلة للتكديس

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

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

3. تطبيق ألوان HSL على موقعك

اضغط على أي وحدة نصية وافتح منتقي الألوان. تظهر المتغيرات المحفوظة مع المؤشرات. انقر فوق "اللون الثانوي" ، وسوف يملأ خلفية القسم. نفس اللون يعمل للأزرار والخلفيات والحدود.

تعمل الطباعة عندما تلتزم بدواء واحد ولكن تغيير الخفة. يمكن أن تستخدم العناوين اللون الأساسي في الخفة -25 ٪. نص الجسم يسير أخف قليلاً عند -15 ٪. الروابط تجلس بنسبة -45 ٪. كل شيء يتعلق ولكن يبقى واضحا.

تحتاج الخلفيات إلى ألوان علامتك التجارية. دفع الخفة تصل إلى 95 ٪. انخفاض تشبع إلى 15 ٪. الآن لديك خلفيات ذات علامة تجارية لا تحارب المحتوى. تعمل الأزرار مع التشبع الكامل. تحوم دول دفع الخفة أسفل درجة. نفس اللون ، شدة مختلفة.

النص الضوء يحتاج إلى خلفيات مظلمة. تخبرك أرقام الخفة بما ينجح. نص عند 50 ٪ من أزواج الخفة مع خلفيات أقل من -30 ٪ من الخفة.

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

4. احفظ ألوان HSL الخاصة بك كإعدادات مسبقة قابلة لإعادة الاستخدام

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

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

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

للتقدم ، انتقل إلى الخيار المناسب وحدد الإعداد المسبق.

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

لقطة شاشة لكيفية إنشاء إعدادات مسبقة عناصر مع متغير تصميم Color HSL العلامة التجارية

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

لقطة شاشة لكيفية تعيين إعداد مسبق كإعداد افتراضي

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

بناء أنظمة الألوان لمواقع الويب الخاصة بك مع Divi 5

عمل الألوان المستخدمة لأخذ أيام. كنت تملأ مع رموز السداسي ، ونسخ القيم بين البرامج ، والصلاة تبدو لائقة.

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

هذا هو التحكم الحقيقي في التصميم. Divi 5 يجعل ذلك يحدث اليوم.

تنزيل Divi 5 تعرف على المزيد حول Divi 5