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

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

لذت بردن!

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

در اینجا نگاهی گذرا به طرح های این آموزش می اندازیم.

مفهوم

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

ابتدا یک ماسک پس زمینه اضافه می کنیم.

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

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

برای دستیابی به طرح های این آموزش، ابتدا باید آن را از طریق دکمه زیر دانلود کنید. من دارم برنده میشم
برای دسترسی به دانلود، باید با استفاده از فرم زیر در لیست ایمیل 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. اندازه برگه و فاصله را اضافه کنید

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

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

• حداقل ارتفاع: 50vw
• پد: 0px بالا، 0px پایین

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

2. گرادیان پس زمینه را ایجاد کنید

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

در زبانه Content، روی زبانه پس‌زمینه گرادیان در زیر گزینه‌های پس‌زمینه کلیک کنید. سپس یک گرادیان مانند این اضافه کنید:

• توقف رنگ 1: #1a2a6c (در 20%)
• توقف رنگ 2: #b21f1f (در 60٪)
• توقف رنگ 2: #fdbb2d (در 100٪)

3. ماسک پس زمینه را ایجاد کنید

اکنون که یک گرادیان رنگ داریم، آماده ایجاد یک ماسک پس زمینه هستیم.

در تب Background Mask موارد زیر را به روز کنید:

• ماسک: شورون
• رنگ ماسک: #000
• تبدیل ماسک: معکوس
• نسبت ماسک: به اسکرین شات مراجعه کنید

4. جداکننده های پس زمینه را به بخش اضافه کنید

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

برای انجام این کار، روی تب Design کلیک کنید و جداکننده های زیر را اضافه کنید:

ابتدا یک جداکننده بالا در زیر تب Top اضافه کنید.

• سبک جداکننده: اسکرین شات را ببینید
• رنگ جداکننده: #000
• ارتفاع تقسیم کننده: 10vw

سپس یک جداکننده پایینی در زیر تب Bottom اضافه کنید.

• سبک جداکننده: اسکرین شات را ببینید
• رنگ جداکننده: #000
• ارتفاع تقسیم کننده: 10vw
• تلنگر تقسیم کننده: چرخش عمودی

نتیجه

اینم امتیاز تا اینجا

گزینه های پس زمینه و تقسیم کننده ها را برای طرح های بیشتر تغییر دهید

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

طرح جایگزین شماره 1

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

برای انجام این کار، تنظیمات تب موجود را باز کنید، روی تب Background Mask کلیک کنید و موارد زیر را به روز کنید:

• تبدیل ماسک: تلنگر عمودی، چرخش
• نسبت ماسک: به اسکرین شات مراجعه کنید

سپس جداکننده های بخش را به صورت زیر به روز کنید:

تقسیم کننده بالا

• سبک جداکننده: اسکرین شات را ببینید
• ارتفاع تقسیم کننده: 13vw

تقسیم کننده پایین

• سبک جداکننده: اسکرین شات را ببینید
• ارتفاع تقسیم کننده: 13vw
• معکوس کردن مرز: غیر فعال کردن

نتیجه

در اینجا نتیجه است.

طراحی جایگزین شماره 2

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

برای انجام این کار، تنظیمات تب موجود را باز کنید، روی تب Background Mask کلیک کنید و موارد زیر را به روز کنید:

• ماسک: راه راه مورب 2
• تبدیل ماسک: تلنگر افقی
• نسبت ماسک: به اسکرین شات مراجعه کنید

سپس جداکننده های بخش را به صورت زیر به روز کنید:

تقسیم کننده بالا

• سبک جداکننده: اسکرین شات را ببینید
• Divider Flip: چرخش افقی

جداکننده پایین

نتیجه

در اینجا نتیجه است.

نتایج نهایی

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

آنها را بررسی کنید!

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

افکار نهایی

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

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

به سلامتی!