Divi: مقایسه انواع مختلف گرادیان

آیا می خواهید از Gradient Builder استفاده کنید؟ DIVI اما نمی دانید چه نوع گرادیانی را انتخاب کنید؟

انواع گرادیان بخشی از جدید هستند DIVI Gradient Builder . انواع جدید گرادیان DIVI به شما امکان می دهد شکل ها و رنگ های مختلف را به پس زمینه خود اضافه کنید. 

در این مقاله، ما این نوع گرادینت ها را با هم مقایسه می کنیم و به شما نشان می دهیم که چگونه از آنها برای ایجاد پس زمینه های منحصر به فرد استفاده کنید!

بیایید شروع.

انواع گرادیان Divi چیست؟

Gradient Builder جدید Divi چندین ویژگی گرادیان جدید را اضافه می کند که شامل انواع گرادیان می شود. چهار نوع گرادینت برای انتخاب وجود دارد:

• خطی
• بخشنامه
• بیضوی
• مخروطی

هر یک از انواع، گرادیان را متفاوت نشان می دهد. از آنها برای شکل دادن به گرادیان استفاده می شود تا به صورت یک الگوی رنگی خطی، به صورت دایره، بیضی یا مخروط نمایش داده شود. ما آنها را با جزئیات در مثال های خود خواهیم دید.

انواع گرادیان نیز تحت تأثیر سایر کنترل‌ها قرار می‌گیرند، مانند موقعیت، تکرار یا عدم تکرار، واحد اندازه‌گیری برای نوار پیمایش گرادیان، و قرار گرفتن شیب در بالای پس‌زمینه.

هر تنظیم می تواند تأثیر کوچک یا بزرگی بر شیب داشته باشد. گرادیان می تواند ظریف یا برجسته باشد. تغییرات بزرگ یا کوچک را می توان تنها با یک تنظیم انجام داد.

با در نظر گرفتن این موضوع، اجازه دهید به چند نمونه از گرادیان ها با استفاده از هر یک از انواع گرادیان نگاه کنیم. ما سه نمونه از هر نوع گرادیان را نشان خواهیم داد. 

اولی یک نوع گرادیان استاندارد است که در سرتاسر وب خواهید دید. دو مورد بعدی کمی تجربی تر خواهند بود، فقط برای اینکه ببینیم چه کاری می توان با انواع گرادیان انجام داد.

نمونه هایی از انواع گرادیان

برای نمونه‌های نوع گرادیان، از بخش Hero در صفحه اصلی استفاده می‌کنیم بسته چیدمان تختخواب و صبحانه رایگان موجود در Divi. این بخش قبلاً یک گرادیان دارد، اما ما آن را جایگزین می کنیم و آزمایش هایی را انجام می دهیم. 

می‌توانیم شیب پس‌زمینه اصلی را حذف کنیم یا آن را تغییر دهیم. نتایج یکسان است. برای سادگی، ما آن را اصلاح می کنیم.

ما متن عنوان را از سیاه به سفید سفارشی کردیم.

نوع گرادیان خطی

دفعات بازدید: Divi: نحوه استفاده از ترکیب الگو در تصاویر پس زمینه

گرادیان های خطی، گرادیان را به گونه ای نمایش می دهند که گویی در سراسر صفحه توزیع شده اند.

اولین مثال از نوع گرادیان خطی

در اینجا نگاهی به اولین مثال ما داریم. یک رنگ روشن تر در سمت چپ صفحه نمایش و یک رنگ تیره تر در سمت راست، با یک انتقال صاف بین آنها نمایش داده می شود.

برای ایجاد این مثال، دو رنگ اضافه کنید. THE نخست وزیر rgba (92,158,82,0.76) در موقعیت 0% است. THE دوم rgba(0,10,4,0.76) در موقعیت 97% است.

• توقف های گرادیان:
  • 0٪: rgba (92,158,82,0.76)
  • 97٪: rgba (0,10,4,0.76)

سپس تغییر دهید نوع گرادیان را روی Linear قرار دهید و مقدار را تنظیم کنید جهت بیش از 131 درجه که او تکرار نکن. را تنظیم کنیدوحدت در درصد شیب را بالای تصویر پس زمینه قرار دهید.

• نوع گرادیان: خطی
• جهت گرادیان: 131 درجه
• تکرار گرادیان: خیر
• واحد گرادیان: درصد
• گرادیان مربع در بالای پس‌زمینه تصویر: بله

مثال دوم از نوع گرادیان خطی

در اینجا نگاهی به دومین نمونه گرادیان خطی داریم. مانند اولی کار می کند، اما یک توقف سخت در سمت چپ دارد، جایی که سایه تیره تری فراگیر می شود.

برای ایجاد این یکی، سه Gradient Stops اضافه کنید. THE نخست وزیر rgba (18,76,41,0.76) در موقعیت 13% است. THE دوم rgba(92,158,82,0.76) در موقعیت 13% است. رنگ 3 rgba(18,76,41,0.76) در موقعیت 34% است.

• توقف های گرادیان:
  • 13٪: rgba (18,76,41,0.76)
  • 13٪: rgba (92,158,82,0.76)
  • 34٪: rgba (18,76,41,0.76)

سپس تنظیم کنید نوع گرادیان را روی Linear قرار دهید و مقدار را تنظیم کنید جهت بیش از 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% است.

• توقف های گرادیان:
  • 13٪: rgba (92,158,82,0.76)
  • 23٪: rgba (92,158,82,0.76)
  • 32٪: rgba (18,76,41,0.76)

تعریف کنید نوع گرادیان به خطی در a جهت 209 درجه متولد شد تکرار نکن و تنظیم کنیدوحدت در درصد شیب را بالای تصویر پس زمینه قرار دهید.

• نوع گرادیان: خطی
• جهت گرادیان: 209 درجه
• تکرار گرادیان: خیر
• واحد گرادیان: درصد
• گرادیان مربع در بالای پس‌زمینه تصویر: بله

نوع گرادیان دایره ای

نوع گرادیان دایره ای با رنگ ها دایره ای ایجاد می کند.

اولین نمونه از نوع گرادیان دایره ای

اولین مثال ما از گرادیان دایره ای یک رنگ روشن در مرکز و یک رنگ تیره تر در لبه ها قرار می دهد.

این یکی 2 رنگ داره THE نخست وزیر rgba (92,158,82,0.76) در موقعیت 0% است. THE دوم rgba(0,10,4,0.76) در موقعیت 62% است.

• توقف های گرادیان:
  • 0٪: rgba (92,158,82,0.76)
  • 62٪: rgba (0,10,4,0.76)

تعریف کنید نوع گرادیان به دایره ای آن را مرکز کنید جهت . مطمئن شوید که او تکرار نکن ، تغییر دادنوحدت درصد و بالای تصویر پس زمینه قرار دهید.

• نوع گرادیان: دایره ای
• موقعیت گرادیان: مرکز
• تکرار گرادیان: خیر
• واحد گرادیان: درصد
• گرادیان مربع در بالای پس‌زمینه تصویر: بله

نمونه دوم از نوع گرادیان دایره ای

این گرادیان یک لبه دایره ای شفاف را در مرکز صفحه نمایش قرار می دهد.

چهار رنگ داره دو رنگ روی هم قرار گرفته اند. THE نخست وزیر rgba (18,76,41,0.76) در موقعیت 13% است. THE دوم rgba(92,158,82,0.76) در موقعیت 33% است. رنگ 3 rgba(92,158,82,0.76) در موقعیت 51% است. رنگ 4 rgba (18,76,41,0.76) است. در موقعیت 51% بالای رنگ 3 قرار می گیرد.

• توقف های گرادیان:
  • 13٪: rgba (18,76,41,0.76)
  • 33٪: rgba (92,158,82,0.76)
  • 51٪: rgba (92,158,82,0.76)
  • 51٪: rgba (18,76,41,0.76)

تعریف کنید نوع شیب را به Circular کنید و آن را قرار دهید جهت در گوشه بالا سمت چپ مطمئن شوید که او تکرار نکن ، تغییر دادن وحدت درصد و بالای تصویر پس زمینه قرار دهید.

• نوع گرادیان: دایره ای
• موقعیت گرادیان: بالا سمت چپ
• تکرار گرادیان: خیر
• واحد گرادیان: درصد
• گرادیان مربع در بالای پس‌زمینه تصویر: بله

نمونه سوم از نوع گرادیان دایره ای

این مثال چندین دایره روشن را در تیره ترین رنگ قرار می دهد که از وسط دایره شروع می شود.

این یکی نیز برای رسیدن به این طرح، دو رنگ را به ترتیب خاصی روی هم چیده است. آنجا برتر رنگ 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% است.

• توقف های گرادیان:
  • 13٪: rgba (18,76,41,0.76)
  • 44٪: rgba (18,76,41,0.76)
  • 44٪: rgba (92,158,82,0.76)
  • 51٪: rgba (92,158,82,0.76)

تغییر دهید نوع گرادیان گرد. قرار دادن جهت در زیر تکرار این یکی. را تنظیم کنیدوحدت درصد را انتخاب کنید و گرادیان را بالای تصویر پس زمینه قرار دهید.

• نوع گرادیان: دایره ای
• موقعیت گرادیان: پایین
• تکرار گرادیان: بله
• واحد گرادیان: درصد
• گرادیان مربع در بالای پس‌زمینه تصویر: بله

نوع گرادیان بیضی

شیب های بیضوی رنگ ها را به شکل بیضی قرار می دهند.

اولین نمونه از نوع گرادیان بیضوی

اولین مثال بیضوی ما یک بیضی رنگ روشن را در مرکز صفحه با رنگ تیره تر در اطراف آن قرار می دهد.

این یکی دو رنگ داره THE نخست وزیر rgba (92,158,82,0.76) در موقعیت 0% است. THE دوم rgba(0,10,4,0.76) در موقعیت 50% است.

• توقف های گرادیان:
  • 0٪: rgba (92,158,82,0.76)
  • 50٪: rgba (0,10,4,0.76)

تغییر دهید نوع گرادیان در یک بیضوی را تعریف کنید جهت در مرکز این یکی را بساز تکرار نکن ، تنظیم کنیدوحدت روی درصد کلیک کنید و آن را بالای تصویر پس زمینه قرار دهید.

• نوع گرادیان: بیضوی
• موقعیت گرادیان: مرکز
• تکرار گرادیان: خیر
• واحد گرادیان: درصد
• گرادیان مربع در بالای پس‌زمینه تصویر: بله

نمونه دوم از نوع شیب بیضوی

مثال دوم ما بسیاری از خطوط دایره ای نازک را در سراسر گرادیان قرار می دهد.

دو رنگ داره THE نخست وزیر rgba (92,158,82,0.76) در موقعیت 34pt است. THE دوم rgba (0,10,4,0.76) در موقعیت 39pt است.

• توقف های گرادیان:
  • 34pt: rgba(92,158,82,0.76)
  • 39pt: rgba(0,10,4,0.76)

تغییر دهید نوع شیب به بیضوی و تنظیم کنید جهت در سمت چپ این یکی را داشته باشید تکرار. تغییر دادنوحدت در امتیاز آن را بالای تصویر پس زمینه قرار دهید.

• نوع گرادیان: بیضوی
• موقعیت گرادیان: سمت چپ
• تکرار گرادیان: بله
• واحد گرادیان: امتیاز (pt)
• گرادیان مربع در بالای پس‌زمینه تصویر: بله

نمونه سوم از نوع شیب بیضوی

مثال سوم ما تعداد زیادی نیم دایره را در گرادیان قرار می دهد.

این یکی دو رنگ داره THE نخست وزیر rgba (32,68,35,0.73) در موقعیت 34vmin است. THE دوم rgba (0,10,4,0.76) در موقعیت 39vmin است.

• توقف های گرادیان:
  • 34vmin: rgba(32، 68، 35، 0.73)
  • 39vmin: rgba(0,10,4,0.76)

تغییر دهید نوع شیب به بیضوی و تنظیم کنید جهت به بالا. این یکی را داشته باشید تکرار. تغییر دادنوحدت در Viewport Minimum. آن را بالای تصویر پس زمینه قرار دهید.

• نوع گرادیان: بیضوی
• موقعیت گرادیان: بالا
• تکرار گرادیان: بله
• واحد گرادیان: Viewport Minimum (vmin)
• گرادیان مربع در بالای پس‌زمینه تصویر: بله

نوع گرادیان مخروطی

همچنین ببینید: Divi: نحوه ایجاد انتقال پس‌زمینه بین عناصر

نوع گرادیان مخروطی، گرادیان را به صورت مخروطی نشان می‌دهد که گویی مخروط از بالا مشاهده می‌شود.

اولین نمونه از نوع گرادیان مخروطی

این مثال یک خط مورب از مرکز شیب به سمت چپ با رنگ روشن در یک طرف و رنگ تیره در سمت دیگر قرار می دهد.

دو رنگ داره THE نخست وزیر rgba (92,158,82,0.76) در موقعیت 0% است. THE دوم rgba(0,10,4,0.76) در موقعیت 50% است.

• توقف های گرادیان:
  • 0٪: rgba (92,158,82,0.76)
  • 50٪: rgba (0,10,4,0.76)

تغییر دهید نوع گرادیان مخروطی را تنظیم کنید جهت بیش از 221 درجه مرکز آن موقعیت et تکرارش نکن . گرادیان را در بالای تصویر قرار دهید.

• نوع گرادیان: مخروطی
• جهت گرادیان: 221 درجه
• موقعیت: مرکز
• تکرار گرادیان: خیر
• گرادیان مربع در بالای پس‌زمینه تصویر: بله

نمونه دوم از نوع گرادیان مخروطی

این مثال مشابه نمونه قبلی است، اما خط مرکزی را قرار می دهد.

این یکی چهار رنگ داره THE نخست وزیر 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% است.

• توقف های گرادیان:
  • 7٪: rgba (20,40,20,0.76)
  • 24٪: rgba (30,73,25,0.68)
  • 65٪: rgba (103,132,30,0.68)
  • 85٪: rgba (38,86,26,0.68)

تعریف کنید نوع گرادیان روی مخروطی و جهت تا 0 درجه آن را مرکز کنید موقعیت . متولد شد تکرار نکن و آن را در بالای تصویر قرار دهید.

• نوع گرادیان: مخروطی
• جهت گرادیان: 0 درجه
• موقعیت: مرکز
• تکرار گرادیان: خیر
• گرادیان مربع در بالای پس‌زمینه تصویر: بله

نمونه سوم از نوع گرادیان مخروطی

مثال آخر ما یک انفجار از خطوط را از مرکز بالای گرادیان به سمت بیرون در همه جهات قرار می دهد.

این یکی دو رنگ داره THE نخست وزیر rgba (30,73,25,0.68،5،XNUMX،XNUMX) در موقعیت XNUMX درجه است. THE دوم rgba (20,40,20,0.76) در موقعیت 7 درجه است.

• توقف های گرادیان:
  • 5 درجه: rgba (30,73,25,0.68)
  • 7 درجه: rgba (20,40,20,0.76)

تنظیم کنید GradientType در مخروطی و جهت حدود 221 درجه قرار دادن موقعیت در بالای صفحه تکرار این یکی و آن را بالای تصویر پس زمینه قرار دهید.

• نوع گرادیان: مخروطی
• جهت گرادیان: 221 درجه
• موقعیت: بالا
• تکرار گرادیان: بله
• گرادیان مربع در بالای پس‌زمینه تصویر: بله

دانلود DIVI در حال حاضر!!!

نتیجه

این نگاه ما به مقایسه انواع گرادیان در Gradient Builder Divi است. 

همانطور که در این مثال ها مشاهده می کنید، تنظیمات ساده هستند، اما هر یک از آنها می تواند تفاوت عمده ای در طراحی گرادیان ایجاد کند. 

برای بهترین نتایج، انواع گرادیان را با جهت ها و موقعیت های مختلف امتحان کنید و گزینه تکرار را روشن یا خاموش کنید تا ببینید چه چیزی می توانید ایجاد کنید.

امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی Divi باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد

همچنین می توانید مشورت کنید منابع مااگر به عناصر بیشتری نیاز دارید تا پروژه های ایجاد سایت های اینترنتی خود را انجام دهید.

دریغ نکنید که با راهنمای ما در این زمینه نیز مشورت کنید ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.

...