در نسخه‌های قبلی Divi، افزودن یک همپوشانی گرادیان به تصویر پس‌زمینه اختلاف منظر یک گزینه داخلی نبود. اما با گزینه‌های پس‌زمینه جدید Divi (و Gradient Builder)، می‌توانید به راحتی پس‌زمینه‌های اختلاف منظر زیبایی را با پوشش‌های گرادیان بی‌شمار ایجاد کنید.

در این آموزش، ما به شما نشان خواهیم داد که چگونه از گزینه های پس زمینه Divi برای اضافه کردن یک همپوشانی گرادیان رنگ که با استفاده از متد True و CSS Parallax در یک تصویر پس زمینه ترکیب می شود، استفاده کنید.

یک نگاه یواشکی

در اینجا نگاهی گذرا به طرح‌های پس‌زمینه‌ای که در این آموزش خواهیم ساخت، آورده شده است.

این مورد اول دارای یک پوشش گرادیان با حالت ترکیب رنگ است که با استفاده از روش True Parallax روی تصویر پس‌زمینه اعمال می‌شود.

و در اینجا همان طراحی با استفاده از روش CSS Parallax است. توجه داشته باشید که گرادیان به تصویر پس‌زمینه ثابت/متصل می‌ماند، به طوری که مانند بخشی از تصویر واقعی به نظر برسد، نه فقط یک لایه.

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

مفهوم

ایده اصلی این طراحی شامل دو مرحله است:

1. با استفاده از ابزار gradient maker یک گرادیان پس‌زمینه برای یک بخش ایجاد کنید و مطمئن شوید که گرادیان را بالای تصویر پس‌زمینه قرار دهید.

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

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

طرح بندی را به صورت رایگان دانلود کنید

برای دستیابی به طرح های این آموزش، ابتدا باید آن را از طریق دکمه زیر دانلود کنید. من دارم برنده میشم
برای دسترسی به دانلود، باید با استفاده از فرم زیر در لیست ایمیل Divi Daily ما مشترک شوید. در حد نو
مشترک، هر دوشنبه چیزهای Divi بیشتری و بسته طرح بندی Divi رایگان دریافت خواهید کرد! اگر در حال حاضر فعال هستید
لیست، فقط آدرس ایمیل خود را در زیر وارد کنید و روی دانلود کلیک کنید. شما “دوباره مشترک” نخواهید شد یا ایمیل های اضافی دریافت نمی کنید.

برای وارد کردن طرح بندی برگه به ​​کتابخانه Divi خود، موارد زیر را انجام دهید:

1. به کتابخانه Divi بروید.
2. روی دکمه Import در بالای صفحه کلیک کنید.
3. در پنجره قابل حمل، تب import را انتخاب کنید
4. فایل مورد نظر را برای دانلود از رایانه خود انتخاب کنید (مطمئن شوید که ابتدا فایل را از حالت فشرده خارج کرده و از فایل JSON استفاده کنید).
5. سپس روی دکمه import کلیک کنید.

پس از انجام، طرح برگه در Divi Builder در دسترس خواهد بود.

بریم سراغ آموزش، درسته؟

آنچه برای شروع نیاز دارید

برای شروع، باید موارد زیر را انجام دهید:

1. اگر قبلا این کار را نکرده اید، تم Divi را نصب و فعال کنید.
2. یک صفحه وردپرس جدید ایجاد کنید و از Divi Builder برای ویرایش صفحه در قسمت جلو (سازنده بصری) استفاده کنید.
3. گزینه «ساخت از ابتدا» را انتخاب کنید.
4. حالا شما یک بوم خالی برای شروع طراحی در Divi دارید!

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

1. یک خط پر و متن سرصفحه ایجاد کنید

اگرچه برای این آموزش روی طراحی بخش پس‌زمینه تمرکز خواهیم کرد، اما منطقی است که یک ردیف و عنوان padding اضافه کنید تا احساس بهتری نسبت به ظاهر طراحی در یک مورد معمولی داشته باشید.

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

سپس یک ماژول متنی به سطر/ستون اضافه کنید.

تنظیمات متن

تنظیمات ماژول متن را باز کنید. در تب Content، یک عنوان H2 را به محتوای اصلی اضافه کنید.

<h2>Say Hello to Divi</h2>

در قسمت طراحی، گزینه های عنوان و حداکثر عرض را به صورت زیر به روز کنید:

• قلم عنوان 2: اینتر
• عنوان 2 وزن قلم: پررنگ
• رنگ متن عنوان 2: #fff
• عنوان 2 اندازه متن: 8vw
• ارتفاع خط سرصفحه 2: ​​1.2 em
• سایه متن عنوان 2: تصویر صفحه را ببینید
• قدرت تاری سایه متن عنوان 2: 0.28 em
• رنگ سایه متن عنوان 2: #10076d

تنظیمات سفارش

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

تنظیمات صف را باز کنید. در تب Design موارد زیر را به روز کنید:

• عرض: 100%
• حداکثر عرض: 80vw

• آستر: 15vw بالا، 15vw پایین

2. پس زمینه گرادیان برای بخش طراحی کنید

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

تنظیمات گرادیان پس زمینه

تنظیمات بخش را باز کنید. در تب Content، زبانه Gradient را در زیر گزینه های Background انتخاب کنید و گزینه های Gradient را به صورت زیر به روز کنید:

• توقف گرادیان 1: #0094ff (در 0٪)
• توقف گرادیان 2: #ff00c7 (در 25٪)
• Gradient Stop 3: #0094ff (در 50%)
• توقف گرادیان 4: #ff00c7 (در 75٪)
• Gradient Stop 5: #0094ff (در 100%)

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

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

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

تنظیمات تصویر پس زمینه

در حالی که در قسمت گزینه های پس زمینه هستید، تب Background Image را انتخاب کنید و یک تصویر پس زمینه آپلود کنید. به روز رسانی به شرح زیر است:

• استفاده از اثر اختلاف منظر: بله
• روش اختلاف منظر: اختلاف منظر واقعی
• ترکیب تصویر پس زمینه: رنگی

چرا حالت ترکیب رنگ؟

حالت ترکیب رنگ، نسخه خاکستری تصویر را با رنگ‌های (رنگ و اشباع) گرادیان ترکیب می‌کند. این امر کیفیت بصری تصویر را با یک طرح رنگ کاملاً جدید حفظ می کند.

4. یک ماسک پس زمینه اضافه کنید (چرا که نه؟)

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

تنظیمات ماسک پس زمینه

در حالی که در تب گزینه های پس زمینه هستید، تب Background Mask را انتخاب کنید و موارد زیر را به روز کنید:

• ماسک: تیغه
• Mask Transform: Flip Horizontal، Flip
• اندازه ماسک: اندازه سفارشی
• عرض ماسک: 72vw
• موقعیت ماسک: بالا سمت راست

5. مقداری فضای اسکرول موقت برای آزمایش اضافه کنید

قبل از اینکه نتایج نهایی را بررسی کنیم، باید مقداری فضا در بالا و پایین برگه خود اضافه کنیم تا فضای کافی برای اسکرول داشته باشیم تا اثر اختلاف منظر را در عمل مشاهده کنیم. برای این کار کافیست فیلد زیر را به قسمت اضافه کنید:

• میدان: 80 ولت ساعت بالا، 80 ولت ساعت پایین

هنگام اضافه کردن بخش به صفحه خود، حتماً این فاصله را حذف کنید.

نتایج نهایی

بیایید نگاهی به نتیجه نهایی در یک صفحه زنده بیندازیم.

و در اینجا همان طراحی با استفاده از روش CSS Parallax است. توجه داشته باشید که گرادیان به تصویر پس‌زمینه ثابت/متصل می‌ماند، به طوری که مانند بخشی از تصویر واقعی به نظر برسد، نه فقط یک لایه.

استفاده از روکش گرادیان بدون حالت ترکیبی

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

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

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

در اینجا یک نمونه از آنچه که شبیه است.

شیب های بیشتری را امتحان کنید!

Gradient Builder می‌تواند رنگ‌ها و انواع گرادیان‌های بیشتری ایجاد کند که می‌توانید از آن‌ها برای برجسته کردن طرح‌های پس‌زمینه لایه‌ای استفاده کنید. برای گزینه های طراحی پس زمینه گرادیان بیشتر، می توانید دموهای زنده ما را بررسی کنید.

افکار نهایی

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

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

مشتاقانه منتظر شنیدن نظرات شما هستم.

به سلامتی!