Divi: نحوه استفاده از گزینه Gradient Repeat برای ایجاد الگوهای پس زمینه سفارشی

آیا می خواهید با استفاده از گزینه Gradient Repeat، الگوهای پس زمینه سفارشی ایجاد کنید DIVI ?

گزینه های پس زمینه از DIVI راه های زیادی برای ایجاد الگوهای پس زمینه ارائه می دهد. حتی می توانید الگوهای پس زمینه را فقط با استفاده از گرادیان ایجاد کنید. گزینه Gradient Repeat این کار را ساده و آسان می کند.

در این مقاله نحوه استفاده از گزینه Gradient Repeat را خواهیم دید DIVI برای ایجاد الگوهای پس زمینه سفارشی

بیایید شروع.

همچنین ببینید: Divi: نحوه ایجاد یک فرم تماس که پس از کلیک روی یک دکمه ظاهر می شود

تکرار گرادیان چیست

گزینه Gradient Repeat یک الگو بر اساس Gradient Stops ایجاد می کند. استاپ های گرادیان اندازه گیری هایی هستند که تعیین می کنند رنگ ها کجا ظاهر می شوند و در شیب متوقف می شوند. DIVI و Gradient Builder آن از این توقف ها برای ایجاد الگو استفاده می کنند.

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

Le Gradient Builder سپس آن را تکرار می کند تا صفحه ای که الگو را ایجاد می کند پر شود. این گزینه را می توان به هر بخش، ردیف، ستون یا ماژول اضافه کرد و می توان آنها را با هم استفاده کرد.

گزینه Background Gradient را فعال کنید

برای فعال کردن گزینه تکرار گرادیان، تنظیمات بخش را با کلیک کردن روی نماد چرخ دنده آن باز کنید. همچنین با سطر، ستون و ماژول ها.

حرکت به زمینه . برگه را انتخاب کنید زمینه شیب و بر روی کلیک کنید اضافه کردن گرادیان پس‌زمینه.

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

اکنون گرادیان تکرار می‌شود و یک الگو بر اساس توقف‌های گرادیان و سایر تنظیمات گرادیان شما، مانند واحد گرادیان، ایجاد می‌کند.

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

واحد گرادیان واحد اندازه گیری است. این مشخص می‌کند که اعداد توقف گرادیان روی نوار گرادیان نشان‌دهنده چه چیزی است، که تعیین می‌کند چگونه توقف‌های گرادیان اندازه‌گیری می‌شوند. این روی الگوی ایجاد شده توسط گزینه تکرار تاثیر می گذارد.

مولد گرادیان پس زمینه Divi 15 واحد ارائه می دهد. بیایید به نمونه ای از چهار گزینه محبوب نگاه کنیم. همانطور که در مثال های خود خواهیم دید، نتیجه بسته به تعداد توقف های گرادیان و تنظیمات شما تغییر خواهد کرد.

درصد (درصد)

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

پیکسل (px)

Pixels تعداد پیکسل ها را برای هر توقف گرادیان اندازه گیری می کند. این به گرادیان الگوی کوچکتری نسبت به سایر انواع واحد می دهد. جابجایی موقعیت اولین یا آخرین رنگ موقعیت هر رنگ را تغییر می دهد.

ارتفاع پنجره (vh)

Viewport ناحیه ای از پنجره مرورگر است که قابل مشاهده است. ارتفاع و عرض آن به طور جداگانه اندازه گیری می شود. ارتفاع پنجره از توقف های گرادیان برای اندازه گیری درصد ارتفاع اندازه پنجره استفاده می کند. تنظیم موقعیت اولین یا آخرین رنگ روی همه رنگ ها تاثیر می گذارد.

عرض پنجره (vw)

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

نمونه هایی از استفاده از گزینه "تکرار گرادیان".

دفعات بازدید: Divi: چگونه یک تبلت با محتوای تیزر قابل پیمایش ایجاد کنیم

برای مثال های خود، از بخش Call-to-Action صفحه اصلی سایت استفاده می کنیم بسته چیدمان طب سوزنی رایگان موجود در Divi.

باید تنظیماتی را در ستون اول بخش انجام دهیم. آنها را باز کنید پارامترهای خط با کلیک بر روی نماد چرخ دنده آن.

سپس را انتخاب کنید نماد چرخ دنده برای ستون اول

گرادیان ستون یک

ستون اول شیب پس زمینه خود را دارد. بخشی از چیدمان است. ما آن را تغییر نخواهیم داد. ما از همین گرادیان در چهار مثال خود استفاده خواهیم کرد. در اینجا تنظیماتی که در صورت نیاز به آنها وجود دارد آورده شده است.

• توقف های گرادیان:
  • 0px: #f4d5b8
  • 100 پیکسل: rgba (244,213,184,0)

تنظیمات گرادیان

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

فاصله

فاصله را در سمت چپ ستون اضافه می کنیم. به برگه دسترسی پیدا کنید طرح، به فاصله و انتخاب کنید نماد تبلت برای باز کردن گزینه های دستگاه

اضافه کردن 5% صفحه سمت چپ برای تب های دسکتاپ و تبلت. برگه تلفن را انتخاب کنید و بالشتک سمت چپ را حذف کنید. بالا و راست را در تنظیمات فعلی خود رها کنید.

• لایه
  • بالا: 180 پیکسل
  • سمت چپ: 5%
  • سمت چپ: 80 پیکسل

مثال یک

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

این یکی دارای سه ایستگاه گرادیان است.

• توقف های گرادیان:
  • 4px: #fff6ee
  • 9 پیکسل: #ede3dc
  • 14 پیکسل: #e8ded7

از تنظیمات زیر استفاده کنید.

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

مثال دوم

مثال دوم ما یک الگوی تکراری مورب با خطوط بزرگتر ایجاد می کند.

این یکی دارای سه ایستگاه گرادیان است.

• توقف های گرادیان:
  • 4px: #fff6ee
  • 43 پیکسل: #ede3dc
  • 50 پیکسل: #e8ded7

برای تنظیمات گرادیان،

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

مثال سه

مثال سوم ما یک الگوی دایره ای تکرار شونده با دایره های متوسط ​​ایجاد می کند.

این یکی دارای سه ایستگاه گرادیان است.

• گرادیان متوقف می شود
  • 4px: #fff6ee
  • 7 پیکسل: #e8ded7
  • 8 پیکسل: #ede3dc

تنظیمات گرادیان زیر را اعمال کنید

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

به عنوان مثال 4

مثال چهارم ما یک الگوی دایره ای با دایره های بزرگ ایجاد می کند.

این یکی دارای سه ایستگاه گرادیان است.

• توقف های گرادیان:
  • 4px: #fff6ee
  • 23 پیکسل: #e8ded7
  • 31 پیکسل: #ede3dc

برای تنظیمات گرادیان، به صورت زیر تغییر دهید:

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

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

نتیجه

این نگاه ما به نحوه استفاده از گزینه است تکرار گرادیان از Divi برای ایجاد پس زمینه های سفارشی. بسیاری از تنظیمات در تنظیمات گرادیان بر طراحی گرادیان تأثیر می گذارد.

Gradient Repeat با تمام این ترفندها به خوبی کار می کند تا به راحتی الگوهای پس زمینه سفارشی جالبی ایجاد کند.

توصیه می‌کنیم نمونه‌هایی را که در اینجا ارائه کرده‌ایم امتحان کنید و تغییراتی ایجاد کنید تا ببینید که چگونه گرادینت‌ها تحت تأثیر قرار می‌گیرند و شیب‌های پس‌زمینه سفارشی خود را ایجاد کنید.

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

همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

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

...