Divi: از تنظیمات ماسک پس‌زمینه و گزینه‌های تبدیل الگو استفاده کنید

آیا می خواهید تنظیمات ماسک پس زمینه و گزینه های تبدیل الگو را با هم ترکیب کنید DIVI برای ایجاد پس زمینه منحصر به فرد؟

طرح‌های پس‌زمینه راهی عالی برای ارائه شما هستند وب سایت استعداد بصری و متمایز شدن از جمعیت. تنظیمات جدید Background Mask و Pattern Transform از DIVI را می توان به روش های مختلفی برای ایجاد این الگوهای پس زمینه ترکیب کرد.

در این مقاله نحوه استفاده از پس‌زمینه ماسک و تنظیمات تبدیل الگو را خواهیم دید DIVI برای ایجاد پس زمینه های جالب برای چیدمان های خود DIVI.

بیایید شروع.

بررسی

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

دفعات بازدید: Divi: نحوه استفاده از افکت های سایه و شناور برای ایجاد محتوای تعاملی

به عنوان مثال 1

نسخه 1 روی دسکتاپ

نسخه 1 روی گوشی

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

نسخه 2 روی دسکتاپ

نسخه 2 روی گوشی

به عنوان مثال 2

نسخه 1 روی دسکتاپ

نسخه 1 روی گوشی

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

نسخه 2 روی دسکتاپ

نسخه 2 روی گوشی

به عنوان مثال 3

نسخه 1 روی دسکتاپ

نسخه 1 در تلفن

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

نسخه 2 روی دسکتاپ

نسخه 2 روی گوشی

ماسک پس‌زمینه Divi و گزینه‌های تبدیل الگو

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

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

نحوه عملکرد تنظیمات تبدیل ماسک و الگوی Divi

الگوی زیر زیگ زاگ با تنظیمات پیش فرض است.

ماسک پس‌زمینه Divi و گزینه‌های تبدیل الگو

ماسک لایه وبلاگ را در تصویر زیر اضافه می کنیم. بیایید از آنها برای نشان دادن نحوه عملکرد تنظیمات Background Mask و Pattern Transform استفاده کنیم.

تلنگر افقی

این معکوس افقی است. تنظیمات تبدیل را هم روی الگو و هم روی ماسک اعمال کردیم.

چرخش عمودی

این تلنگر عمودی برای الگو و ماسک است.

چرخش

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

معکوس

این مثال Invert را برای الگو و ماسک نشان می دهد.

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

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

این الگو را می چرخاند و ماسک را معکوس می کند.

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

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

نمونه هایی از ماسک پس زمینه و تنظیمات تبدیل الگو

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

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

در اینجا مروری بر بخش مورد نظر است. از رنگ پس زمینه استفاده می کند: #92a5ab.

پس زمینه: #92a5ab

نمونه هایی از ماسک پس زمینه و تنظیمات تبدیل الگو

ماسک پس زمینه و پارامترهای تبدیل الگو مثال 1

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

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

تنظیمات بخش را باز کنید، به پایین بروید زمینه و تب را انتخاب کنید الگوی پس زمینه. Tufted را برای الگوی پس‌زمینه و Inverting را برای تغییر الگو انتخاب کنید.

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

ماسک پس زمینه

برگه را انتخاب کنید ماسک زمینه و انتخاب کنید قوس برای ماسک پس زمینه رنگ ماسک را به #616d72 تغییر دهید و تبدیل mask را روی Invert قرار دهید. این اولین نسخه کمان ما را با تافت کامل می کند.

ماسک پس زمینه: قوس
رنگ ماسک: #616d72
Mask Transform: Invert

مثال 1 نسخه 2

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

تبدیل ماسک: تلنگر افقی، تلنگر عمودی

ماسک پس زمینه و پارامترهای تبدیل الگو مثال 2

برای مثال دوم، یک بیضی در مرکز صفحه با یک الگوی داخل بیضی ایجاد می کنیم. در مرحله بعد، محل قرارگیری الگو را تغییر می دهیم. ما همچنین این یکی را برای اندازه های مختلف صفحه نمایش تغییر خواهیم داد.

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

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

پس زمینه الگو: Shippo
تبدیل الگو: معکوس

ماسک پس زمینه

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

ماسک پس زمینه: بیضی
رنگ: #758489
تبدیل ماسک: چرخش افقی، چرخش

تبلت و گوشی

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

تبدیل ماسک: تلنگر افقی، وارونگی

مثال 2 نسخه 2

در مرحله بعد، ما تغییری را برای مثال دوم خود ایجاد می کنیم. ابتدا تب را انتخاب کنید الگوی پیش زمینه و Pattern Color را روی rgba (0,0,0,0.06) قرار دهید.

رنگ الگو: rgba(0,0,0,0.06)

سپس تب را انتخاب کنید ماسک زمینه و Flip Horizontal، Rotate و Invert را برای تبدیل ماسک انتخاب کنید.

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

تبلت و گوشی

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

تبدیل ماسک: تلنگر افقی، وارونگی

ماسک پس زمینه و پارامترهای تبدیل الگو مثال 3

برای مثال سوم ما از تنظیمات تبدیل ماسک و الگو، از یک الگوی لانه زنبوری با ماسک رنگ استفاده خواهیم کرد. ما همچنین یک نسخه موبایل برای این نسخه ایجاد خواهیم کرد.

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

ابتدا تب Device Settings را انتخاب کرده و نماد Device را انتخاب کنید. دفتر. برگه را انتخاب کنید الگوی پیش زمینه و Honeycomb را برای الگوی پس زمینه انتخاب کنید. رنگ را به rgba (0,0,0,0.42) تغییر دهید. برای این یکی ما گزینه ها را ترک می کنیم تبدیل الگو غیر فعال شده است. ما آنها را برای نسخه جایگزین اضافه خواهیم کرد.

الگوی پس زمینه: لانه زنبوری
رنگ الگو: rgba(0,0,0,0.42)
تبدیل الگو: هیچ

ماسک پس زمینه

سپس تب را انتخاب کنید BackgroundMask. را انتخاب کنید نقاشی برای ماسک پس زمینه رنگ را به #697b82 تغییر دهید. برای تبدیل ماسک، Flip Vertical را انتخاب کنید.

ماسک پس زمینه: رنگ
رنگ ماسک: #697b82
تبدیل ماسک: چرخش عمودی

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

اندازه ماسک: جلد
موقعیت ماسک: پایین سمت راست

تبلت و گوشی

سپس tab را انتخاب کنید تبلت و تغییر تبدیل ماسک پس زمینه در تلنگر عمودی و چرخش. این سبک مثال سوم ما را کامل می کند. در مرحله بعد، نسخه جایگزین را ایجاد می کنیم.

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

مثال 3 نسخه 2

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

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

برای الگوی پس زمینه، رنگ الگو را به rgba (0,0,0,0.11) تغییر دهید. تبدیل الگو را به چرخش افقی، چرخش عمودی و چرخش تغییر دهید.

رنگ ماسک: rgba(0,0,0,0.11)
تبدیل ماسک: تلنگر افقی، چرخش عمودی، چرخش

ماسک پس زمینه

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

رنگ ماسک: #ffffff
تبدیل ماسک: تلنگر افقی، تلنگر عمودی، وارونگی

بعد، اندازه ماسک را به پوشش تغییر دهید، سپس مرکز را برای موقعیت ماسک انتخاب کنید.

اندازه ماسک: جلد
موقعیت ماسک: مرکز

تبلت و گوشی

در نهایت tab را انتخاب کنید قرص برای ایجاد نسخه موبایل برگه را انتخاب کنید ماسک پس زمینه و چهار گزینه تبدیل ماسک را انتخاب کنید. این نسخه جایگزین مثال سوم را تکمیل می کند.

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