مقارنة أنواع التدرج في Divi's Gradient Builder

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

هيا بنا نبدأ.

ما هي أنواع التدرج Divi؟

يضيف منشئ التدرج الجديد من Divi العديد من ميزات التدرج اللوني الجديدة التي تتضمن أنواع التدرج اللوني. هناك أربعة أنواع من التدرجات اللونية للاختيار من بينها:

• خطي
• دائري
• بيضاوي الشكل
• مخروطي

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

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

يمكن أن يكون لكل تعديل تأثير صغير أو كبير على التدرج اللوني. يمكن أن يكون التدرج خفيًا ، أو يمكن أن يبرز. يمكن إجراء تغييرات صغيرة أو كبيرة بتعديل واحد.

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

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

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

لقد قمت بتخصيص نص العنوان ، وقمت بتغييره من الأسود إلى الأبيض.

نوع التدرج الخطي

تعرض التدرجات اللونية الخطية التدرج اللوني كما لو كان منتشراً عبر الصفحة.

أول مثال على التدرج الخطي

هذه نظرة على مثالنا الأول. يعرض لونًا أفتح على يسار الشاشة ولونًا أغمق على اليمين ، مع انتقال سلس بينهما.

لإنشاء هذا المثال ، أضف لونين. الأول هو rgba (92،158،82،0.76) عند موضع 0٪. والثاني هو rgba (0،10،4،0.76) في موقف 97 ٪.

• اللون 1: rgba (92،158،82،0.76) (في موضع 0٪)
• اللون 2: rgba (0،10،4،0.76) (في موضع 97٪)

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

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

مثال التدرج الخطي الثاني

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

لإنشاء هذا ، أضف ثلاث نقاط توقف متدرجة. الأول هو rgba (18،76،41،0.76) بنسبة 13٪. والثاني هو rgba (92،158،82،0.76) بنسبة 13٪. اللون 3 هو rgba (18،76،41،0.76) عند 34٪.

• اللون 1: rgba (18،76،41،0.76) (في موضع 13٪)
• اللون 2: rgba (92،158،82،0.76) (في موضع 13٪)
• اللون 3: rgba (18،76،41،0.76) (عند 34٪ ​​موضع)

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

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

مثال التدرج الخطي الثالث

يضع المثال الثالث خطًا فاتحًا من الألوان قطريًا في الزاوية اليمنى العليا ، ملامسًا خطًا داكنًا من الألوان.

هذا واحد له ثلاثة ألوان. اللون 1 هو rgba (92،158،82،0.76) في موضع 13٪. اللون 2 هو rgba (92،158،82،0.76) في موضع 23٪. اللون الثالث هو rgba (18،76،41،0.76) في وضع 32٪.

• اللون 1: rgba (92،158،82،0.76) (في موضع 13٪)
• اللون 2: rgba (92،158،82،0.76) (في موضع 23٪)
• اللون 3: rgba (18،76،41،0.76) (في موضع 32٪)

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

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

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

يُنشئ نوع التدرج الدائري دائرة تحتوي على الألوان.

أول مثال على التدرج الدائري

يضع مثالنا الأول للتدرج الدائري لونًا فاتحًا في الوسط ولونًا أغمق حول الحواف.

هذا واحد له لونان. الأول هو rgba (92،158،82،0.76) عند موضع 0٪. والثاني هو rgba (0،10،4،0.76) في موقف 62 ٪.

• اللون 1: rgba (92،158،82،0.76) (في موضع 0٪)
• اللون 2: rgba (0،10،4،0.76) (عند 62٪ موضع)

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

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

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

يضع هذا التدرج حافة دائرية واضحة في وسط الشاشة.

لها أربعة ألوان. يتم تكديس لونين. الأول هو rgba (18،76،41،0.76) بنسبة 13٪. والثاني هو rgba (92،158،82،0.76) بنسبة 33٪. اللون 3 هو rgba (92،158،82،0.76) في وضع 51٪. اللون 4 هو rgba (18،76،41،0.76). يتم وضعه في موضع 51٪ ، فوق اللون 3.

• اللون 1: rgba (18،76،41،0.76) (في موضع 13٪)
• اللون 2: rgba (92،158،82،0.76) (في موضع 33٪)
• اللون 3: rgba (92،158،82،0.76) (في موقف 51٪)
• اللون 4: rgba (18،76،41،0.76) (في المركز 51٪)

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

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

مثال التدرج الدائري الثالث

يضع هذا المثال عدة دوائر ضوئية داخل اللون الغامق ، بدءًا من منتصف الدائرة.

هذا اللون أيضًا يكدس لونين بترتيب معين للحصول على هذا التصميم. اللون الأول هو rgba (18،76،41،0.76) عند موضع 13٪. اللون 2 هو rgba (18،76،41،0.76) عند 44٪. يتراكم اللون الثالث فوق اللون الثاني. إنها rgba (92،158،82،0.76) في المركز 44٪. اللون 4 هو rgba (92،158،82،0.76) في وضع 51٪.

• اللون 1: rgba (18،76،41،0.76) (في موضع 13٪)
• اللون 2: rgba (18،76،41،0.76) (في 44٪ المركز)
• اللون 3: rgba (92،158،82،0.76) (في موضع 44٪)
• اللون 4: rgba (92،158،82،0.76) (في موقف 51٪)

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

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

نوع التدرج البيضاوي

التدرجات الإهليلجية تضع الألوان في شكل بيضاوي.

أول مثال على التدرج البيضاوي

يضع المثال البيضاوي الأول لدينا شكلًا بيضاويًا بلون فاتح في وسط الشاشة بلون أغمق حوله.

هذا واحد لونين. الأول هو rgba (92،158،82،0.76) عند موضع 0٪. والثاني هو rgba (0،10،4،0.76) في موقف 50 ٪.

• اللون 1: rgba (92،158،82،0.76) (في موضع 0٪)
• اللون 2: rgba (0،10،4،0.76) (عند نسبة 50٪)

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

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

مثال التدرج البيضاوي الثاني

يضع المثال الثاني الكثير من الخطوط الدائرية الدقيقة عبر التدرج اللوني.

له لونان. الأول هو rgba (92،158،82،0.76) في الموضع 34 نقطة. والثاني هو rgba (0،10،4،0.76) في الموضع 39pt.

• اللون 1: rgba (92،158،82،0.76) (في 34 نقطة)
• اللون 2: rgba (0،10،4،0.76) (عند 39 نقطة)

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

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

مثال التدرج البيضاوي الثالث

يضع المثال الثالث الكثير من أنصاف الدوائر داخل التدرج اللوني.

هذا واحد لونين. الأول هو rgba (32،68،35،0.73) عند موضع 34vmin. والثاني هو rgba (0،10،4،0.76) في موضع 39vmin.

• اللون 1: rgba (32،68،35،0.73) (عند وضع 34vmin)
• اللون 2: rgba (0،10،4،0.76) (في وضع 39vmin)

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

• نوع التدرج: بيضاوي الشكل
• الاتجاه: الأعلى
• كرر: نعم
• الوحدة: منفذ العرض الأدنى
• وضع التدرج فوق صورة الخلفية: نعم

نوع التدرج المخروطي

يعرض نوع التدرج المخروطي التدرج اللوني في شكل مخروطي كما لو أن المخروط يُرى من الأعلى.

أول مثال على التدرج المخروطي

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

له لونان. الأول هو rgba (92،158،82،0.76) عند موضع 0٪. والثاني هو rgba (0،10،4،0.76) في موقف 50 ٪.

• اللون 1: rgba (92،158،82،0.76) (في موضع 0٪)
• اللون 2: rgba (0،10،4،0.76) (عند نسبة 50٪)

قم بتغيير نوع التدرج إلى المخروطي. اضبط الاتجاه على 221deg. قم بتوسيط الموضع واجعله لا يتكرر . ضع التدرج فوق الصورة.

• نوع التدرج: مخروطي
• الاتجاه: 221 درجة
• المنصب: المركز
• كرر: لا
• وضع التدرج فوق صورة الخلفية: نعم

مثال التدرج المخروطي الثاني

هذا المثال مشابه للمثال السابق ، لكنه يضع الخط من المركز إلى أعلى.

هذا واحد له أربعة ألوان. الأول هو rgba (20،40،20،0.76) في موضع 7٪. اللون 2 هو rgba (30،73،25،0.68) في موضع 24٪. اللون 3 هو rgba (103،132،30،0.68) عند 65٪. أما اللون الرابع فهو rgba (38،86،26،0.68) في موضع 85٪.

• اللون 1: rgba (20،40،20،0.76) (في موضع 7٪)
• اللون 2: rgba (30،73،25،0.68) (في موضع 24٪)
• اللون 3: rgba (103،132،30،0.68) (في موقف 65٪)
• اللون 4: rgba (38،86،26،0.68) (عند 85٪ موضع)

اضبط نوع التدرج على المخروطي والاتجاه عند 0 درجة. مركز الموقف . اجعله لا يكرر وضعه فوق الصورة.

• نوع التدرج: مخروطي
• الاتجاه: 0 درجة
• المنصب: المركز
• كرر: لا
• وضع التدرج فوق صورة الخلفية: نعم

مثال التدرج المخروطي الثالث

يضع مثالنا الأخير سلسلة من الخطوط من المركز العلوي للتدرج إلى الخارج في كل الاتجاهات.

هذا واحد لونين. الأول هو rgba (30،73،25،0.68) عند 5deg. والثاني هو rgba (20،40،20،0.76) عند موضع 7deg.

• اللون 1: rgba (30،73،25،0.68) (عند موضع 5deg)
• اللون 2: rgba (20،40،20،0.76) (عند موضع 7deg)

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

• نوع التدرج: مخروطي
• الاتجاه: 221 درجة
• المركز: الأعلى
• كرر: نعم
• وضع التدرج فوق صورة الخلفية: نعم

خواطر ختامية

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

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