Divi: مقارنة بين أنواع مختلفة من التدرجات

هل ترغب في استخدام منشئ التدرج من Divi لكنك لا تعرف أي نوع من التدرج تختار؟

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

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

دعونا نبدأ.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

لإنشاء هذا المثال ، أضف لونين. ال رئيس الوزراء هو rgba (92,158,82,0.76،0،XNUMX،XNUMX) في موضع XNUMX٪. ال ثان هو rgba (0,10,4,0.76،97،XNUMX،XNUMX) في الموضع XNUMX٪.

• توقفات متدرجة:
  • 0٪: رجبا (92,158,82,0.76،XNUMX،XNUMX،XNUMX)
  • 97٪: رجبا (0,10,4,0.76،XNUMX،XNUMX،XNUMX)

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

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

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

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

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

• توقفات متدرجة:
  • 13٪: رجبا (18,76,41,0.76،XNUMX،XNUMX،XNUMX)
  • 13٪: رجبا (92,158,82,0.76،XNUMX،XNUMX،XNUMX)
  • 34٪: رجبا (18,76,41,0.76،XNUMX،XNUMX،XNUMX)

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

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

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

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

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

• توقفات متدرجة:
  • 13٪: رجبا (92,158,82,0.76،XNUMX،XNUMX،XNUMX)
  • 23٪: رجبا (92,158,82,0.76،XNUMX،XNUMX،XNUMX)
  • 32٪: رجبا (18,76,41,0.76،XNUMX،XNUMX،XNUMX)

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

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

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

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

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

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

هذا واحد له لونان. ال رئيس الوزراء هو rgba (92,158,82,0.76،0،XNUMX،XNUMX) في موضع XNUMX٪. ال ثان هو rgba (0,10,4,0.76،62،XNUMX،XNUMX) في الموضع XNUMX٪.

• توقفات متدرجة:
  • 0٪: رجبا (92,158,82,0.76،XNUMX،XNUMX،XNUMX)
  • 62٪: رجبا (0,10,4,0.76،XNUMX،XNUMX،XNUMX)

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

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

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

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

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

• توقفات متدرجة:
  • 13٪: رجبا (18,76,41,0.76،XNUMX،XNUMX،XNUMX)
  • 33٪: رجبا (92,158,82,0.76،XNUMX،XNUMX،XNUMX)
  • 51٪: رجبا (92,158,82,0.76،XNUMX،XNUMX،XNUMX)
  • 51٪: رجبا (18,76,41,0.76،XNUMX،XNUMX،XNUMX)

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

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

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

يضع هذا المثال عدة دوائر ضوئية في أحلك لون ، بدءًا من منتصف الدائرة.

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

• توقفات متدرجة:
  • 13٪: رجبا (18,76,41,0.76،XNUMX،XNUMX،XNUMX)
  • 44٪: رجبا (18,76,41,0.76،XNUMX،XNUMX،XNUMX)
  • 44٪: رجبا (92,158,82,0.76،XNUMX،XNUMX،XNUMX)
  • 51٪: رجبا (92,158,82,0.76،XNUMX،XNUMX،XNUMX)

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

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

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

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

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

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

هذا واحد له لونان. ال رئيس الوزراء هو rgba (92,158,82,0.76،0،XNUMX،XNUMX) في موضع XNUMX٪. ال ثان هو rgba (0,10,4,0.76،50،XNUMX،XNUMX) في الموضع XNUMX٪.

• توقفات متدرجة:
  • 0٪: رجبا (92,158,82,0.76،XNUMX،XNUMX،XNUMX)
  • 50٪: رجبا (0,10,4,0.76،XNUMX،XNUMX،XNUMX)

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

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

المثال الثاني لنوع التدرج الإهليلجي

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

له لونان. ال رئيس الوزراء هو rgba (92,158,82,0.76،34،XNUMX،XNUMX) في المركز XNUMX نقطة. ال ثان هو rgba (0,10,4,0.76،39،XNUMX،XNUMX) في الموضع XNUMXpt.

• توقفات متدرجة:
  • 34pt: rgba (92,158,82,0.76،XNUMX،XNUMX،XNUMX)
  • 39pt: rgba (0,10,4,0.76،XNUMX،XNUMX،XNUMX)

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

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

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

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

هذا واحد له لونان. ال رئيس الوزراء هو rgba (32,68,35,0.73،34،XNUMX،XNUMX) في الموضع XNUMXvmin. ال ثان هو rgba (0,10,4,0.76،39،XNUMX،XNUMX) في الموضع XNUMXvmin.

• توقفات متدرجة:
  • 34vmin: rgba (32، 68، 35، 0.73)
  • 39vmin: rgba (0,10,4,0.76،XNUMX،XNUMX،XNUMX)

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

• نوع التدرج: بيضاوي الشكل
• موقف التدرج: أعلى
• كرر التدرج: نعم
• وحدة التدرج: Viewport Minimum (vmin)
• مربع التدرج فوق صورة الخلفية: نعم

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

أنظر أيضا: Divi: كيفية إنشاء انتقالات خلفية بين العناصر

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

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

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

له لونان. ال رئيس الوزراء هو rgba (92,158,82,0.76،0،XNUMX،XNUMX) في موضع XNUMX٪. ال ثان هو rgba (0,10,4,0.76،50،XNUMX،XNUMX) في الموضع XNUMX٪.

• توقفات متدرجة:
  • 0٪: رجبا (92,158,82,0.76،XNUMX،XNUMX،XNUMX)
  • 50٪: rgba (0,10,4,0.76،XNUMX،XNUMX،XNUMX)

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

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

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

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

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

• توقفات متدرجة:
  • 7٪: رجبا (20,40,20,0.76،XNUMX،XNUMX،XNUMX)
  • 24٪: rgba (30,73,25,0.68،XNUMX،XNUMX،XNUMX)
  • 65٪: رجبا (103,132,30,0.68،XNUMX،XNUMX،XNUMX)
  • 85٪: رجبا (38,86,26,0.68،XNUMX،XNUMX،XNUMX)

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

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

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

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

هذا واحد له لونان. ال رئيس الوزراء هو rgba (30,73,25,0.68،5،XNUMX،XNUMX) عند XNUMXdeg. ال ثان هو rgba (20,40,20,0.76،7،XNUMX،XNUMX) عند موضع XNUMXdeg.

• توقفات متدرجة:
  • 5deg: rgba (30,73,25,0.68،XNUMX،XNUMX،XNUMX)
  • 7deg: rgba (20,40,20,0.76،XNUMX،XNUMX،XNUMX)

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

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

تحميل DIVI Now !!!

وفي الختام

هذه هي نظرتنا إلى مقارنة أنواع التدرج في Divi's Gradient Builder. 

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

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

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

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

لا تتردد في الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...