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

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

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

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

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

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

بررسی

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

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

بخش نمونه قهرمان با ماسک و الگوی سفید.

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

با این طراحی در جای خود، می توانید به راحتی ماسک ها و موقعیت ماسک ها را تنها با چند کلیک تغییر دهید!

یک صفحه جدید با Divi Builder ایجاد کنید

از داشبورد وردپرس، به صفحات> افزودن جدید برای ایجاد یک صفحه جدید

عنوانی به آن بدهید که برای شما منطقی باشد و کلیک کنید استفاده کنید DIVI سازنده

سپس روی کلیک کنید شروع به ساختن کنید (از خراش بسازید)

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

چگونه از ماسک‌های Divi و الگوهای پس‌زمینه در بخش قهرمان خود استفاده کنید

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

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

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

2. عنوان و فراخوان به اقدام را اضافه کنید

در ستون سمت چپ (ستون 1)، یک ماژول Text برای عنوان اصلی خود، یک ماژول Text برای متن زیرنویس خود و یک ماژول Button برای دکمه خود اضافه کنید.

3. فاصله عمودی را به بخش اضافه کنید

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

تنظیمات بخش را باز کنید. در برگه طراحی، padding را به صورت زیر به روز کنید:

• لایه گذاری:
  • رومیزی: Top 20vw، Bottom 20vw
  • تبلت: Top 8vw، Bottom 48vw
  • تلفن: Top 8vw، Bottom 70vw

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

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

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

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

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

• توقف های گرادیان:
  • 0%: #3e22ff
  • 100%: واضح
• گرادیان مربع در بالای پس‌زمینه تصویر: بله

5. یک الگوی پس زمینه برای بخش ایجاد کنید

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

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

زیر زبانه الگوهای پس زمینه، موارد زیر را به روز کنید:

• الگوی پس زمینه: تافتی

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

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

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

زیر زبانه ماسک زمینه، موارد زیر را به روز کنید:

• ماسک: لانه زنبوری
• رنگ ماسک: #ffffff
• سایز: جلد

7. موقعیت تصویر پس زمینه را تنظیم کنید

از آنجایی که ما از یک ماسک پس‌زمینه استفاده می‌کنیم، بخشی از تصویر پس‌زمینه ما پوشانده شده است (یا "ماسک شده").

در این مثال، مطمئن خواهیم شد که قسمت پایین سمت راست تصویر بیشتر قابل مشاهده است و برای نمایش ساختمان های بیشتر، آن را کمی به سمت راست حرکت می دهیم.

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

• موقعیت تصویر پس زمینه: پایین سمت راست
• افست تصویر پس زمینه: -4vw

8. از حالت ترکیبی استفاده کنید

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

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

• ترکیب تصویر پس زمینه: ضرب

9. ماسک پس زمینه را برای موبایل تنظیم کنید

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

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

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

زیر زبانه ماسک زمینه، گزینه های پاسخگو را فعال کنید و موارد زیر را به روز کنید:

نسخه تبلت

• تبدیل ماسک: چرخش عمودی، چرخش افقی، چرخش
• نسبت ابعاد ماسک: مربع

نسخه تلفن

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

نتیجه

طرحی را که تاکنون ایجاد کرده‌ایم بررسی کنید.

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

نسخه تبلت

نسخه تلفن

10. یک نسخه تاریک ایجاد کنید

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

سپس رنگ الگو را به مشکی تغییر دهید.

سپس عنوان و متن زیرنویس را به رنگ سفید تغییر دهید. و ممکن است بخواهید رنگ دکمه را نیز به روز کنید.

این همان چیزی است که نسخه تاریک به نظر می رسد.

نتایج نهایی

همچنین ببینید: Divi: چگونه پیوند "بیشتر بخوانید" یک وبلاگ را سفارشی کنیم

در اینجا نگاهی دیگر به نتایج نهایی ما داریم.

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

نتیجه

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

علاوه بر این، می‌توانید ماسک‌ها و الگوها را به هر عنصر Divi اضافه کنید، نه فقط بخش‌ها. بنابراین از آزمایش کردن لذت ببرید!

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

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

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

...