سئو فاکس | سئو سایت – سئو وب سایت – SEOFox.ir

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

بیایید شروع کنیم.

پیش نمایش ماسک الگوی پس زمینه

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

ماسک الگوی پس زمینه مثال اول

ماسک مثال دوم

ماسک مثال سه

نحوه ایجاد یک ماسک پس زمینه

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

ابتدا تنظیمات قسمتی را که می خواهید ماسک پس زمینه اضافه کنید باز کنید.

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

در مرحله بعد، باید یک الگوی پس زمینه انتخاب کنید و اندازه و مکان آن را تنظیم کنید. تب Background Pattern را انتخاب کرده و روی Add Background Pattern کلیک کنید .

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

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

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

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

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

چگونه یک ماسک الگوی پس زمینه ظریف ایجاد کنیم

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

رنگ های همسان را انتخاب کنید

رنگ هایی را برای الگوها و ماسک های خود انتخاب کنید که تفاوت چندانی با رنگ پس زمینه بخش نداشته باشد. رنگ ها نباید کنتراست بالایی با یکدیگر داشته باشند. رنگ ها باید به اندازه کافی متفاوت باشند تا نقاب و الگوها را ببینند، اما نه آنقدر که غلبه کنند. از همان رنگ برای الگو و پس زمینه استفاده کنید و سپس یک رنگ روشن تر یا تیره تر برای ماسک انتخاب کنید.

برای خوانایی تنظیم کنید

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

اندازه های مختلف الگو را امتحان کنید

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

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

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

نمونه های ماسک الگوی پس زمینه ظریف

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

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

ماسک الگوی پس زمینه مثال اول

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

رنگ پس زمینه

برای اولین مثال، ما از رنگ پس‌زمینه اصلی این طرح‌بندی - #1d1d25 استفاده می‌کنیم. ما همچنین رنگ اصلی دکمه - #4c594c را حفظ خواهیم کرد

• رنگ پس زمینه: #1d1d25
• رنگ دکمه: #4c594c

الگوی پس زمینه

تب Background Pattern را انتخاب کرده و Diagonal Stripes 2 را انتخاب کنید . رنگ الگو را به #383838 تغییر دهید.

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

ماسک پس زمینه

سپس، تب Background Mask را انتخاب کنید. Caret را انتخاب کرده و رنگ را روی #383838 قرار دهید.

• نقاب: گاری
• رنگ ماسک: #383838

در زیر Mask Color، گزینه Transform horizontal و Aspect Ratio پرتره را انتخاب کنید . تنظیمات بخش را ببندید و کار خود را ذخیره کنید.

• تبدیل: افقی
• نسبت تصویر: بلند (پرتره)

ماسک الگوی پس زمینه مثال دوم

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

رنگ پس زمینه

تنظیمات بخش را باز کنید . مطمئن شوید که در تب Background Color هستید و رنگ پس زمینه را به #483c56 تغییر دهید .

• رنگ پس زمینه: #483c56

الگوی پس زمینه

سپس، تب Background Pattern را انتخاب کرده و Tufted را برای Background Pattern انتخاب کنید. رنگ الگو را به #635c84 تغییر دهید.

• الگوی پس زمینه: تافتی
• رنگ الگو: #635c84

بعد، اندازه سفارشی را انتخاب کنید . با این کار مجموعه دیگری از گزینه ها باز می شود. Width را به 10vw تغییر دهید.

• اندازه: اندازه سفارشی
• عرض: 10vw
• مبدا تکرار الگو: بالا سمت چپ
• الگوی تکرار: تکرار

ماسک پس زمینه

اکنون زمان آن است که ماسک پس زمینه خود را تنظیم کنیم. تب Background Mask را انتخاب کرده و Mask با نام Arch را انتخاب کنید. رنگ آن را به #67557a تغییر دهید.

• ماسک: قوس
• رنگ ماسک: #67557a

سپس گزینه های Transform آن را روی Horizontal، Vertical و Rotate قرار دهید. برای نسبت ابعاد ، گزینه عریض یا افقی را انتخاب کنید. تنظیمات بخش را ببندید.

• تبدیل: افقی، عمودی و چرخشی
• نسبت تصویر: عریض (منظره)

دکمه

در نهایت اجازه دهید دکمه CTA را در این قسمت هیرو تنظیم کنیم. ما می خواهیم آن را با طراحی ترکیب کنیم، اما همچنین می خواهیم که برجسته باشد. تنظیمات دکمه را باز کنید . ما فقط باید رنگ پس زمینه را تغییر دهیم. ممکن است رنگی مشابه پس زمینه داشته باشد، اما به اندازه ای متفاوت باشد که در صفحه گم نشود. ما با رنگ روشن تر برای پس زمینه پیش می رویم. رنگ متن را یکسان می گذاریم.

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

• رنگ پس زمینه دکمه: #8b4dc1

ماسک الگوی پس زمینه مثال سه

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

رنگ پس زمینه

ابتدا تنظیمات بخش را باز کنید . با انتخاب تب Background Color رنگ پس زمینه را به #497762 تغییر دهید.

• رنگ پس زمینه: #497762

الگوی پس زمینه

سپس، تب Background Pattern را انتخاب کرده، Squares را انتخاب کرده و رنگ را به #3a604e تغییر دهید. مربع ها را اندازه اصلی خود می گذاریم و ماسک را روی اکثر آنها می زنیم.

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

ماسک پس زمینه

سپس، تب Background Mask را انتخاب کنید. خطوط مورب را برای ماسک انتخاب کنید و رنگ را به #3a604e تغییر دهید.

• ماسک: خطوط مورب
• رنگ ماسک: #3a604e

سپس، Transform را روی Horizontal قرار دهید و گزینه عریض یا افقی را برای نسبت ابعاد انتخاب کنید . Size را روی Cover و Mask Position را روی Top Center قرار دهید. تنظیمات بخش را ببندید.

• تبدیل: افقی
• نسبت تصویر: عریض (منظره)
• سایز: جلد
• موقعیت ماسک: مرکز بالا

دکمه

در نهایت تنظیمات دکمه را باز کرده و تب design را انتخاب کنید. به پایین اسکرول کنید و رنگ پس زمینه دکمه را به #61a380 تغییر دهید. تنظیمات ماژول را ببندید و کار خود را ذخیره کنید.

• رنگ پس زمینه دکمه: #61a380

نتایج ماسک الگوی پس زمینه

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

ماسک الگوی پس زمینه مثال یک نتیجه

ماسک مثال دو نتیجه

ماسک مثال سه نتیجه

پایان دادن به افکار

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

ما می خواهیم از تو بشنویم. آیا ماسک های الگوی پس زمینه ظریف خود را برای پس زمینه های Divi خود ایجاد می کنید؟ تجربیات خود را در نظرات با ما در میان بگذارید.