5 ماسک پس‌زمینه و پوشش الگو که می‌توانید روی تصویر پس‌زمینه خود اعمال کنید

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

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

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

بیا شروع کنیم!

آنچه ما ایجاد می کنیم

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

طرح ها ظریف، ساده و در عین حال تاثیرگذار هستند.

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

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

نحوه دانلود و استفاده از طرح بندی ها

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

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

هنگامی که طرح‌بندی‌ها را با موفقیت وارد کردید، در کتابخانه Divi شما قابل مشاهده و برای استفاده در Divi Builder در دسترس خواهند بود.

حالا بریم سر درس!

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

قبل از شروع، ما نیاز داریم:

1. تم Divi را نصب و فعال کنید.
2. یک صفحه جدید ایجاد کنید، آن را منتشر کنید و روی دکمه “Use Divi Builder” کلیک کنید تا صفحه جلویی را با استفاده از Visual Builder ویرایش کنید.
3. گزینه «ساخت از ابتدا» را انتخاب کنید.

اکنون یک بوم خالی برای شروع طراحی داریم!

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

ابتدا بخش کاراکتر را ایجاد می کنیم

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

1. یک ساختار طرح بندی ایجاد کنید

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

2. فاصله Tab را اضافه کنید

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

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

• رومیزی: 400 پیکسل بالا و 400 پیکسل پایین
• تبلت: 200 پیکسل بالا و 200 پیکسل پایین. 25 پیکسل چپ و راست
• تلفن: 50 پیکسل بالا و 50 پیکسل پایین. 25 پیکسل چپ و راست

نحوه طراحی یک کاراکتر بخش شماره 1

بیایید اولین بخش کاراکتر را طراحی کنیم.

1. متن سرصفحه را اضافه کنید

روی نماد خاکستری “+” کلیک کنید تا کتابخانه ماژول ظاهر شود. به متن بروید و برای بارگیری کلیک کنید.

متن عنوان را وارد کنید و سپس در تب Title Text این تنظیمات را پیکربندی کنید:

• خانواده فونت: Work Sans
• رنگ فونت: سفید #ffffff
• اندازه فونت:
  • رومیزی: 3 دقیقه
  • تبلت: 2.2 rem
  • تلفن: 1.4 دقیقه

2. اضافه کردن ماژول دکمه

یک دکمه اضافه کنید و این تنظیمات را پیکربندی کنید:

• زیر قسمت متن بنویسید: بیشتر بدانید
• در برگه Alignment، گزینه: Center را انتخاب کنید
• روی Use custom styles کلیک کنید و سپس پیکربندی کنید:
  • اندازه متن دکمه:
    • دسکتاپ: 20 پیکسل
    • تبلت: 16 پیکسل
    • تلفن: 14 پیکسل
  • رنگ متن دکمه: سفید #ffffff
  • رنگ پس زمینه دکمه: مشکی #1d1d1d
  • عرض قاب دکمه: 0
  • شعاع حاشیه دکمه: 0
  • فاصله حروف دکمه ها: 3pt
  • فونت دکمه: Work Sans
  • سبک قلم دکمه: حروف بزرگ

3. یک تصویر پس زمینه اضافه کنید

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

1. به سوئیچر پس‌زمینه بروید و روی برگه سوم، تب تصویر و سپس روی «افزودن تصویر پس‌زمینه» کلیک کنید.
2. با این کار کتابخانه رسانه شما نمایش داده می شود که در آن می توانید یک عکس را انتخاب کنید یا یک عکس جدید آپلود کنید.
3. هنگامی که عکس شما انتخاب شد، روی دکمه “آپلود تصویر” در گوشه سمت راست پایین کلیک کنید.

4. یک الگوی پس زمینه اضافه کنید

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

• در تب Background، به تب 5، تب Templates بروید و سپس روی “Add Background Template” کلیک کنید.
• Tufted را از منوی کشویی انتخاب کنید و این تنظیمات را پیکربندی کنید:
  • رنگ مدل – rgba(255,255,255,0.31)
  • تبدیل الگو: هیچ
  • اندازه الگو: اندازه واقعی
  • شروع تکرار الگو: بالا سمت چپ
  • الگوی تکرار: تکرار
  • حالت ترکیبی: عادی

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

اکنون که تصویر و مدل پس‌زمینه را تنظیم کردیم، اجازه دهید یک ماسک پس‌زمینه اضافه کنیم.

• در تب Background، به تب 6، تب Mask بروید و روی “Add Background Mask” کلیک کنید.
• Bean را از منوی کشویی انتخاب کنید و این تنظیمات را پیکربندی کنید:
  • رنگ ماسک: rgba(0,0,0,0.36)
  • نسبت ابعاد ماسک: مستطیل افقی
  • اندازه ماسک: کشش تا پر شود

اینجا! اکنون یک بخش کاراکتر با طراحی زیبا دارید.

نحوه طراحی یک کاراکتر بخش شماره 2

حالا بیایید کاراکتر دوم را طراحی کنیم.

1. یک تصویر پس زمینه اضافه کنید و Blend Mode را روی Overlay قرار دهید

تصویر پس زمینه خود را انتخاب کنید، حالت ترکیب را روی Overlay قرار دهید و یک رنگ همپوشانی rgba (10,10,10,0.64) اضافه کنید.

2. یک الگوی پس زمینه اضافه کنید

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

• در تب Background، به تب 5، تب Templates بروید و روی “Add Background Template” کلیک کنید.
• انتخاب کنید تافتی از منوی کشویی و این تنظیمات را پیکربندی کنید:
  • رنگ الگو – rgba(255,255,255,0.09)
  • تبدیل الگو: هیچ
  • اندازه الگو: درپوش
  • شروع تکرار الگو: بالا سمت چپ
  • الگوی تکرار: تکرار
  • حالت ترکیبی: عادی

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

اکنون که تصویر و مدل پس‌زمینه را تنظیم کردیم، اجازه دهید یک ماسک پس‌زمینه اضافه کنیم.

• در تب Background، به تب 6، تب Mask بروید و روی “Add Background Mask” کلیک کنید.
• انتخاب کنید کارت از منوی کشویی و این تنظیمات را پیکربندی کنید:
  • رنگ ماسک: rgba(0,0,0,0.36)
  • تبدیل ماسک: هیچ
  • نسبت ابعاد ماسک: مستطیل افقی
  • اندازه ماسک: کشش تا پر شود
  • حالت ترکیب ماسک: عادی

نحوه طراحی یک شخصیت بخش شماره 3

حالا بیایید بخش سوم شخصیت را طراحی کنیم.

1. یک تصویر پس زمینه اضافه کنید و Blend Mode را روی Overlay قرار دهید

تصویر پس زمینه خود را انتخاب کنید، حالت ترکیب را روی Overlay قرار دهید و یک رنگ همپوشانی rgba (10,10,10,0.39) اضافه کنید.

2. یک الگوی پس زمینه اضافه کنید

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

• در تب Background، به تب 5، تب Templates بروید و روی “Add Background Template” کلیک کنید.
• انتخاب کنید نوارهای مورب 2 از منوی کشویی و این تنظیمات را پیکربندی کنید:
  • رنگ مدل – rgba(0,0,0,0.06)
  • تبدیل الگو: هیچ
  • اندازه الگو: اندازه واقعی
  • شروع تکرار الگو: بالا سمت چپ
  • الگوی تکرار: تکرار
  • حالت ترکیبی: عادی

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

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

• در تب Background، به تب 6، تب Mask بروید و روی “Add Background Mask” کلیک کنید.
• انتخاب کنید مثلثها از منوی کشویی و این تنظیمات را پیکربندی کنید:
  • رنگ ماسک: rgba (10،10،10،0.61)
  • تبدیل الگو: هیچ
  • نسبت ابعاد ماسک: مستطیل افقی
  • اندازه ماسک: کشش تا پر شود
  • حالت ترکیب ماسک: عادی

نحوه طراحی یک شخصیت بخش شماره 4

حال بیایید قسمت چهارم شخصیت را طراحی کنیم.

1. یک تصویر پس زمینه اضافه کنید

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

2. یک الگوی پس زمینه اضافه کنید

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

• در تب Background، به تب 5، تب Templates بروید و روی “Add Background Template” کلیک کنید.
• انتخاب کنید لبخند می زند از منوی کشویی و این تنظیمات را پیکربندی کنید:
  • رنگ مدل – rgba(0,0,0,0.2)
  • تبدیل الگو: هیچ
  • اندازه الگو: درپوش
  • شروع تکرار الگو: بالا سمت چپ
  • الگوی تکرار: تکرار
  • حالت ترکیبی: عادی

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

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

• در تب Background، به تب 6، تب Mask بروید و روی “Add Background Mask” کلیک کنید.
• انتخاب کنید دریاچه گوشه از منوی کشویی و این تنظیمات را پیکربندی کنید:
  • رنگ ماسک: rgba (10،10،10،0.61)
  • تبدیل ماسک: افقی
  • نسبت ماسک: مستطیل افقی
  • اندازه ماسک: درپوش
  • موقعیت ماسک: وسط سمت چپ
  • حالت ترکیب ماسک: عادی

3. تنظیمات صف را پیکربندی کنید

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

• اندازه:
  • عرض: 80%
  • حداکثر عرض: 800 پیکسل
• تراز خط:
  • دسکتاپ: پیش فرض
  • تبلت: مرکز
  • تلفن: مرکز
• فاصله:

نحوه طراحی یک شخصیت بخش شماره 5

حالا بیایید شخصیت پنجم را طراحی کنیم.

1. یک تصویر پس زمینه اضافه کنید

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

2. یک الگوی پس زمینه اضافه کنید

اکنون که یک تصویر پس‌زمینه تنظیم کرده‌ایم، بیایید یک الگوی پس‌زمینه اعمال کنیم.

• در تب Background، به تب 5، تب Templates بروید و روی “Add Background Template” کلیک کنید.
• انتخاب کنید صلیب ها از منوی کشویی و این تنظیمات را پیکربندی کنید:
  • رنگ مدل – #ffffff
  • تبدیل الگو: هیچ
  • اندازه مدل: اندازه سفارشی
  • عرض مدل: 10 پیکسل
  • ارتفاع مدل: 10 پیکسل
  • شروع تکرار الگو: بالا سمت چپ
  • الگوی تکرار: تکرار
  • حالت ترکیبی: معمولی

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

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

• در تب Background، به تب 6، تب Mask بروید و روی “Add Background Mask” کلیک کنید.
• انتخاب کنید قرص های مورب از منوی کشویی و این تنظیمات را پیکربندی کنید:
  • رنگ ماسک: rgba (10،10،10،0.61)
  • تبدیل ماسک: افقی
  • نسبت ماسک: مستطیل افقی
  • اندازه ماسک: درپوش
  • موقعیت ماسک: وسط سمت چپ
  • حالت ترکیب ماسک: عادی

3. تنظیمات صف را پیکربندی کنید

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

• اندازه:
  • عرض: 80%
  • حداکثر عرض: 800 پیکسل
• تراز خط:
  • دسکتاپ: پیش فرض
  • تبلت: مرکز
  • تلفن: مرکز
• فاصله:

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

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

افکار نهایی

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