Divi: چگونه از "Gradient Builder" برای زیباسازی تصاویر خود استفاده کنیم

آیا می خواهید با استفاده از مولد گرادیان به تصاویر خود شکل بدهید؟ DIVI ?

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

با Gradient Builder de DIVI، برای ایجاد اشکال لزوماً نیازی به استفاده از ماسک ندارید. در عوض، شما می توانید استفاده کنید گرادیان متوقف می شود و پارامترهای ایجاد آنها!

در این مقاله خواهیم دید که چگونه با Gradient Builder تصاویر خود را زیبا کنید DIVI به شما کمک می کند طرح های منحصر به فردی را به تصاویر خود اضافه کنید.

بیایید شروع.

بررسی

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

مثال اول - شکل تصویر دایره ای

کامپیوتر رومیزی

با استفاده از مولد گرادیان Divi به تصاویر خود شکل دهید

قرص

تلفن

مثال دوم - شکل تصویر خطی

دفتر

قرص

تلفن

مثال سوم - شکل تصویر بیضوی

کامپیوتر رومیزی

قرص

تلفن

مثال چهارم - شکل تصویر مخروطی

کامپیوتر رومیزی

قرص

تلفن

طراحی چیدمان با Divi

بیایید با ایجاد طرحی که در تمام مثال ها استفاده خواهیم کرد شروع کنیم. این طرح را می توان به عنوان بخش قهرمان استفاده کرد.

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

بخش را سفارشی کنید

ابتدا یک صفحه Divi جدید ایجاد کنید و بخش را سفارشی کنید. تنظیمات بخش را باز کنید و آن را تغییر دهید رنگ پس زمینه #f0f3fb.

پس زمینه: #f0f3fb

سپس به برگه بروید طرح و تنظیمات فاصله را به صورت زیر تغییر دهید:

بالشتک (بالا و پایین): 10%

خط اضافه کنید

سپس a را اضافه کنید خط با ساختار ستون زیر.

به پارامترهای خط، در برگه دسترسی پیدا کنید طرح، به گزینه بروید اندازه گیری و پارامترهای اندازه را تغییر دهید.

از عرض ناودان سفارشی استفاده کنید: بله
حداکثر عرض: 1 پیکسل

تنظیمات ستون اول

در برگه محتوا از ردیف، تنظیمات ستون اول سطر را باز کنید، به تب بروید طرح. فاصله را به صورت زیر تغییر دهید.

بالشتک (چپ و راست): 9% چپ، راست

پارامترهای اولین ماژول متن

سپس a را اضافه کنید ماژول متن به ستون سمت چپ

Sélectionnez سرنویس 4 برای متن محتویات و اضافه کنید محتویات از بدن شما

متن: "به BlogPasCher خوش آمدید"

سپس به تب بروید طرح و تنظیمات عنوان را تغییر دهید.

فونت: مونتسرات
وزن قلم: پررنگ
سبک: TT
رنگ متن: #1d4eff

اندازه متن: رومیزی 16 پیکسل، تبلت 14 پیکسل، تلفن 12 پیکسل
فاصله حروف: 0,3em
ارتفاع خط: 1,6 em

حرکت به فاصله و حاشیه پایین را تغییر دهید.

حاشیه (پایین): 0 پیکسل

پارامترهای ماژول متن دوم

سپس a را اضافه کنید ماژول متن زیر اولی

نوع متن را روی "سرفصل 1" و اضافه کنید محتویات از بدن شما

محتوا: "آینده مالی خود را برنامه ریزی کنید"

سپس tab را انتخاب کنید طرح و گزینه های عنوان را اصلاح کنید.

فونت: مونتسرات
وزن قلم: پررنگ
رنگ متن: #0f1154

اندازه: 80px رومیزی، 40px تبلت، 24px تلفن
ارتفاع ردیف: 110%

پارامترهای ماژول متن سوم

سپس a را اضافه کنید ماژول متن زیر دومی

نوع متن را در «پاراگراف» بگذارید و محتوای متنی خود را اضافه کنید.

بدنه: محتوا

سپس به تب بروید تصور و تنظیمات متن را تغییر دهید.

فونت متن: Roboto
وزن قلم: متوسط
رنگ متن: #000000

اندازه متن: 18 پیکسل (رومیزی و تبلت)، 14 پیکسل (تلفن)
ارتفاع خط: 180%

در نهایت، به پایین بروید فاصله و حاشیه پایین را تنظیم کنید. تنظیمات ماژول را ببندید.

حاشیه (پایین): 0 پیکسل

تنظیمات ماژول تصویر

حالا a اضافه کنید ماژول تصویر به ستون سمت راست

اول، حذف تصویر ساختگی با کلیک روی سطل زباله یا نماد تنظیم مجدد بالای تصویر.

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

سپس tab را انتخاب کنید سبک و به فاصله.

حاشیه (رومیزی): -10٪ (بالا)، -30٪ (چپ)، 10٪ (راست)
بالشتک (بالا و پایین): 300 پیکسل

حاشیه (تبلت/تلفن): 0% (بالا)، 0% (چپ و راست)

پد (تلفن): 150 پیکسل (بالا و پایین)

نمونه هایی از تصاویر شکل گرفته با Gradient Builder Divi

مثال اول - شکل دایره ای

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

تنظیمات ماژول Image را باز کنید و به پایین بروید زمینه . انتخاب کنید تب Background Gradient و 6 استاپ گرادیان را تنظیم کنید:

توقف اول: 0٪، #f0f3fb
دوم: 45٪، #f0f3fb
سوم (بالای دوم): 45%, rgba (41,196,169,0)
چهارم: 69%, rgba (250,255,214,0)
پنجم (بالای چهارم): 69٪، #f0f3fb
ششم: 100٪، #f0f3fb

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

مثال دوم - فرم خطی

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

تنظیمات را باز کنید، به پایین بروید زمینه و انتخاب کنیدتب Background Gradient. چهار ایستگاه گرادیان اضافه کنید:

توقف اول: 0٪، #f0f3fb
دوم: 5٪، #f0f3fb
سوم (بالای دوم): 5%, rgba (175,175,175,0)
چهارم: 13%, rgba (41,196,169,0)

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

مثال سوم - شکل بیضوی

این سومین مثال شکل تصویر ما است. این از یک شکل بیضوی استفاده می کند.

تنظیمات ماژول Image را باز کنید و به پایین بروید زمینه . برگه را انتخاب کنید گرادیان زمینه و چهار ایستگاه گرادیان ایجاد کنید:

توقف اول: 0٪، #f0f3fb
دوم: 9٪، #f0f3fb
سوم (بالای دوم): 9%, rgba (175,175,175,0)
چهارم: 21%, rgba (41,196,169,0)

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

مثال چهارم - شکل مخروطی

مثال چهارم ما استفاده می کند "مخروطی" برای ایجاد یک شکل تصویر واحد

تنظیمات ماژول تصویر را باز کنید، به پایین بروید زمینه و تب را انتخاب کنید تصویر پس زمینه. این یکی دارای 5 توقف گرادیان است:

توقف اول: 23٪، #f0f3fb
دوم: 35٪، #f0f3fb
سوم (بالای دوم): 35%, rgba (41,196,169,0)
چهارم: 65%, rgba (250,255,214,0)
پنجم (بالای چهارم): 65٪، #f0f3fb

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

نتایج نهایی

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