كيفية استخدام Divi Gradient Builder لمزج ألوان متدرجة متعددة بسهولة

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

معاينة ألوان متدرجة متعددة

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

نتائج المثال الأول

نتائج المثال الثاني

نتائج المثال الثالث

نتائج المثال الرابع

أفضل الممارسات لدمج ألوان متدرجة متعددة

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

التركيز على عائلات اللون

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

جرب الألوان المتدرجة

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

إعطاء الأولوية للوضوح

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

استخدم تدرجات متقاطعة ومختلطة

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

استخدم أنواع مختلفة من التدرجات

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

لا تستخدم الكثير من الألوان

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

لا تختار الألوان عشوائيا

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

تذكر تجربة المستخدم

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

اختبر تدرجاتك

جرب أنواعًا وألوانًا متعددة من التدرجات اللونية باستخدام اختبار أ / ب لمعرفة ما الذي يحصل على أفضل النتائج.

أمثلة على ألوان متدرجة متعددة

الآن ، دعنا نلقي نظرة على بعض أمثلة Gradient Builder. بالنسبة لهذه الأمثلة ، قمت بتعديل البطل من صفحة "حول" من حزمة تخطيط الأرضيات المجانية المتوفرة داخل Divi. لقد منحته لونًا جديدًا للخلفية ، # 6294d1 ، ولون زر جديدًا ، # c1fff4.

• لون الخلفية: # 6294d1
• لون الزر: # c1fff4

كيفية إنشاء ألوان متدرجة متعددة باستخدام Divi Gradient Builder

أولاً ، دعنا نرى كيفية إجراء التعديلات داخل Divi Gradient Builder. سنضيف التدرج اللوني إلى خلفية القسم. للبدء ، انقر فوق رمز إعدادات القسم .

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

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

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

للحصول على نظرة عامة مفصلة عن Divi Gradient Builder ، راجع المقالة تقديم منشئ التدرج المتقدم لـ Divi.

ألوان متدرجة متعددة ، مثال واحد

في مثالنا الأول ، سننشئ أربع نقاط توقف متدرجة. افتح علامة التبويب تدرج الخلفية وحدد التدرج الأول . اترك موضع التدرج عند 0٪ وغير لون التدرج إلى # 6294d1.

• مركز أول نقطة توقف متدرج: 0٪
• اللون: # 6294d1

بعد ذلك ، أضف نقطة توقف لونية جديدة بالنقر فوق شريط إيقاف التدرج. انقل موضع التدرج إلى 29٪ وغير لونه إلى # b5bfd1 ،

• موقف النقطة الثانية من توقف متدرج: 29٪
• اللون: # b5bfd1

بعد ذلك ، أضف وقف التدرج الثالث وحرك موضعه إلى 84٪. غيّر لونه إلى # 8eacd1.

• توقف التدرج اللوني موقف النقطة الثالثة: 84٪
• اللون: # 8eacd1

أخيرًا ، قم بتغيير لون توقف التدرج الرابع إلى # b5bfd1. سنترك موضع التدرج هذا عند 100٪.

• مركز توقف التدرج الرابع: 100٪
• اللون: # b5bfd1

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

• النوع: خطي
• الاتجاه: 225 درجة
• كرر التدرج: لا
• وحدة التدرج: النسبة المئوية
• وضع التدرج فوق صورة الخلفية: لا

ألوان متدرجة متعددة ، المثال الثاني

في المثال الثاني ، سننشئ ثلاث نقاط توقف متدرجة. افتح إعدادات تدرج الخلفية وقم بتغيير لون أول توقف متدرج إلى #bffffc. اترك مركزها عند 0٪.

• موضع توقف التدرج الأول: 0٪
• اللون: #bffffc

أضف نقطة توقف متدرجة جديدة وانقل موضعها إلى 42٪. غيّر لونه إلى # bbc7f9.

• موقف وقف التدرج الثاني: 42٪
• اللون: # bbc7f9

بعد ذلك ، قم بتغيير لون توقف التدرج الثالث إلى # adbdd1. سنترك موضع التدرج عند 100٪.

• موضع توقف التدرج الثالث: 100٪
• اللون: # adbdd1

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

• نوع التدرج: دائري

ألوان متدرجة متعددة ، المثال الثالث

في المثال الثالث ، سنستخدم ثلاث نقاط توقف متدرجة لبناء التدرج اللوني. انقل موضع التدرج الأول إلى 15٪ وغير لونه إلى # afc3ed.

• موضع توقف التدرج الأول: 15٪
• اللون: # afc3ed

بعد ذلك ، انقل نقطة توقف التدرج اللوني الثانية إلى 33٪ وقم بتغيير لونها إلى # adbdd1.

• موقف وقف التدرج الثاني: 33٪
• اللون: #bffffc

بعد ذلك ، انقل نقطة توقف التدرج اللوني الثالثة إلى 33٪ ، أعلى نقطة توقف التدرج الثانية مباشرةً ، وقم بتغيير لونها إلى # adbdd1. سيبدو أن لديك تدرجين لونيين على شريط إيقاف التدرج.

• موقف توقف التدرج الثالث: 33٪
• اللون: # adbdd1

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

• النوع: دائري
• الموقف: حق

ألوان متدرجة متعددة ، المثال الرابع

يتضمن المثال الرابع لدينا خمس نقاط توقف متدرجة. بالنسبة إلى نقطة توقف التدرج اللوني الأولى ، قم بتغيير اللون إلى # 878ebc. اترك هذا عند 0٪ لهذا المنصب.

• موضع توقف التدرج الأول: 0٪
• اللون: # 878ebc

أضف نقطة توقف التدرج الثاني عند موضع 22٪. غيّر لونه إلى # a0c1d6.

• موقف وقف التدرج الثاني: 22٪
• اللون: # a0c1d6

بعد ذلك ، أضف نقطة توقف التدرج الثالث عند موضع 48٪. غيّر لونه إلى #bffffc.

• موضع توقف التدرج الثالث: 48٪
• اللون: #bffffc

بالنسبة إلى نقطة توقف التدرج الرابعة ، ضعها عند 73٪ وقم بتغيير لونها إلى # d3d8ff.

• موقف توقف التدرج الرابع: 73٪
• اللون: # d3d8ff

بالنسبة إلى نقطة التوقف الخامسة للتدرج اللوني ، انقلها إلى الموضع 77٪ وقم بتغيير اللون إلى # c6dfff.

• موقف وقف التدرج الخامس: 77٪
• اللون: # c6dfff

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

• النوع: مخروطي الشكل
• الاتجاه: 233 درجة

نتائج ألوان متدرجة متعددة

نتائج المثال الأول

نتائج المثال الثاني

نتائج المثال الثالث

نتائج المثال الرابع

أفكار ختامية على ألوان متدرجة متعددة

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

نريد أن نسمع منك. هل استخدمت هذه الأساليب لإنشاء ألوان متدرجة متعددة باستخدام منشئ التدرج الجديد من Divi؟ أخبرنا عن تجربتك في التعليقات.