وقتی صحبت از ماسک های پس زمینه به میان می آید، کاربران تمایل دارند از نرم افزارهای ویرایش تصویر جدا از آن استفاده کنند DIVI، سپس تصویر را در قسمت آپلود کنید وب سایت که آنها ایجاد می کنند. اگرچه این یک راه بسیار مفید برای سفارشی کردن خود است وب سایت، لزوماً تنها راه حل نیست. شما همچنین می توانید ماسک های پس زمینه را در داخل ایجاد کنید DIVI، ترکیب عناصر مختلف طراحی و گزینه های فیلتر به روش های خلاقانه. این دقیقاً همان کاری است که ما در این پست می خواهیم انجام دهیم! ما کاراکترهای بزرگ را به ماسک های پس زمینه تبدیل می کنیم که در هر اندازه صفحه نمایش عالی به نظر می رسند. امیدواریم این آموزش الهام بخش شما باشد تا طرح های خود را با استفاده از کاراکترهای بزرگ و گزینه های داخلی ایجاد کنید. DIVI.
بیایید برویم
پیش نمایش نمونه
قبل از اینکه به آموزش بپردازیم ، در اینجا انواع پس زمینه هایی است که می توانید با این روش بدست آورید.
تصور
ما با ایجاد یک پس زمینه سیاه با یک حرف که دارای تصویر به عنوان پس زمینه است ، طرح را شروع می کنیم.
یک بخش جدید اضافه کنید
رنگ پسزمینه
بیایید با مثال اول شروع کنیم! یک بخش منظم جدید را به یک صفحه جدید یا موجود اضافه کنید و یک پیش زمینه به این بخش اضافه کنید:
- رنگ پسزمینه: # 000000
فاصله
سپس به تنظیمات فاصله رفته و همه موارد بالشتک پیش فرض بالا و پایین را بردارید.
- پوشش بالا: 0px
- بالشتک پایین: 0px
سرریز
به برگه Advanced بروید و سرریز قسمت را پنهان کنید. این مورد بعداً در این آموزش مهم خواهد شد وقتی ماژول متن حاوی نویسه بزرگ را تغییر مکان دهیم.
- سرریز افقی: پنهان
- سرریز عمودی: پنهان
ردیف 1 اضافه کنید
ساختار ستون
با استفاده از ساختار ستون زیر، اضافه کردن یک ردیف جدید ادامه دهید:
ستون 1 رنگ پس زمینه
بدون افزودن ماژول ، تنظیمات ردیف را باز کرده و یک رنگ پس زمینه به ستون اول اضافه کنید.
- ستون 1 رنگ پس زمینه: # 848484
ستون 1 تصویر پس زمینه
همچنین رنگ زمینه را اضافه کنید. برای ترکیب رنگ پس زمینه و تصویر ، حالت ترکیبی را اعمال خواهیم کرد.
- ترکیب تصویر پس زمینه ستون: ضرب کنید
اندازه
به برگه Design بروید و اجازه دهید ردیف با استفاده از تنظیمات اندازه زیر ، کل عرض صفحه را پر کند:
- از عرض روده ای سفارشی استفاده کنید: بله
- عرض روده: 1
- عرض: 100٪
- حداکثر عرض: 100٪
فاصله
ما همچنین از همه عادت های بالا و پایین در ردیف خلاص می شویم.
- پوشش بالا: 0px
- بالشتک پایین: 0px
ماژول متن را به یک ستون اضافه کنید
یک کاراکتر به قسمت محتوا اضافه کنید
وقت آن رسیده است که ماژول متنی حاوی یک کاراکتر بزرگ را اضافه کنید. حرف "o" را به کادر اضافه کنید محتویات.
رنگ پسزمینه
با رفتن به تنظیمات پس زمینه ادامه دهید و یک رنگ پس زمینه سیاه اضافه کنید.
- رنگ پسزمینه: # 000000
تنظیمات متن
به تب Design بروید و تنظیمات متن را تغییر دهید. توجه کنید که چگونه از مقدار بالایی برای اندازه متن استفاده می کنیم.
- فونت متن: Poppins
- اندازه متن: 100vw
- جهت متن: مرکز
فاصله
سپس به تنظیمات فاصله رفته و مقادیر حاشیه و padding سفارشی را اضافه کنید.
- حاشیه بالایی: -6vw
- بهترین جاذبه: 15vw
- بالشتک پایین: 49vw
فیلترها
وقت آن است که جادو کنید! به تنظیمات فیلتر ماژول دسترسی پیدا کرده و بر این اساس حالت ادغام را تغییر دهید:
- حالت مخلوط: ضرب
- روشنایی: می توانید این مقدار را به دلخواه خود تغییر دهید
خط 2 را اضافه کنید
ساختار ستون
پس از افزودن شخصیت بزرگ خود به طراحی ، می توانید با اضافه کردن ماژول های باقیمانده مورد نظر برای نمایش در بخش ، ترجیحا با اضافه کردن یک خط جدید ادامه دهید:
اندازه
بدون افزودن ماژول ، تنظیمات ردیف را باز کرده و اجازه دهید کل عرض صفحه را اشغال کند.
- از عرض روده ای سفارشی استفاده کنید: بله
- عرض روده: 1
- عرض: 100٪
- حداکثر عرض: 100٪
فاصله
همچنین تمام بالشتک های پیش فرض بالا و پایین را حذف کنید
- پوشش بالا: 0px
- بالشتک پایین: 0px
ماژول متن # 1 را به ستون اضافه کنید
محتوای H1 را اضافه کنید
در این خط جدید می توانید ماژول های دلخواه خود را اضافه کنید. برای بازسازی نمونه دقیق به اشتراک گذاشته شده در پیش نمایش این پست، با اضافه کردن یک ماژول متنی شروع کنید محتویات H1
تنظیمات متن H1
به برگه Design بروید و تنظیمات متن H1 را تغییر دهید.
- فونت عنوان: نمایش Playfair
- وزن فونت: ضخیم
- عنوان متن تراز: مرکز
- رنگ متن عنوان: #ffffff
- عنوان متن اندازه: 6vw
فاصله
با رفتن به تنظیمات فاصله ادامه دهید و اجازه دهید ماژول متن با اضافه کردن یک حاشیه بالای منفی ، کاراکتر بزرگ را همپوشانی کند. ما همچنین اطمینان حاصل می کنیم که فضای چپ و راست ماژول برای اطمینان از پاسخگویی وجود دارد.
- حاشیه بالایی: -47vw
- حاشیه چپ: 1vw
- حاشیه سمت راست: 1vw
ماژول تقسیم را به ستون اضافه کنید
دید
ماژول بعدی که به آن نیاز داریم ، ماژول تقسیم است. مطمئن شوید که گزینه "Show Separator" فعال باشد.
- نمایش تقسیم: بله
کوئلور
بعد به برگه طراحی بروید و رنگ تقسیم را تغییر دهید.
- رنگ: #ffffff
اندازه
همچنین پارامترهای اندازه را تغییر دهید.
- وزن تقسیم: 13px
- عرض: 16٪
- ترتیب ماژول: مرکز
فاصله
همچنین یک حاشیه بالا اضافه کنید تا فضایی بین ماژول متن و ماژول تقسیم ایجاد شود.
- حاشیه بالایی: 16vw
ماژول متن # 2 را به ستون اضافه کنید
اضافه کردن محتوا
ماژول بعدی که نیاز داریم یک ماژول متنی با a است محتویات از پاراگراف
تنظیمات متن
به تنظیمات متن دسترسی داشته باشید و تغییرات زیر را انجام دهید:
- متن فونت: بدون باز کردن
- رنگ متن: #ffffff
- اندازه متن: 1vw (دسک تاپ) ، 2vw (رایانه لوحی) ، 2.5vw (تلفن)
- ارتفاع خط متن: 1.9em
- جهت متن: مرکز
فاصله
مقادیر فاصله سفارشی را نیز اضافه کنید.
- حاشیه بالایی: 3vw
- حاشیه پایین: 3vw (رایانه رومیزی) ، 10vw (رایانه لوحی و تلفن)
- حاشیه سمت چپ: 27vw (دسک تاپ) ، 10vw (رایانه لوحی) ، 8vw (تلفن)
- حاشیه سمت راست: 27vw (دسک تاپ) ، 10vw (رایانه لوحی) ، 8vw (تلفن)
ماژول دکمه را به ستون اضافه کنید
یک کپی اضافه کنید
در ماژول بعدی و آخر ، که یک ماژول دکمه ای است. نسخه ای از انتخاب خود را وارد کنید.
هم ترازی
با تغییر ترازبندی دکمه در برگه طراحی ادامه دهید.
- تنظیم دکمه ها: مرکز
تنظیمات دکمه
به تنظیمات دکمه بروید و دکمه مورد نظر را سفارشی کنید.
- از دکمه های سفارشی برای دکمه استفاده کنید: بله
- اندازه متن دکمه: 1vw (دسک تاپ) ، 2.5vw (رایانه لوحی) ، 3vw (تلفن)
- رنگ متن دکمه: #ffffff
- عرض حاشیه دکمه: 1px
- شعاع مرز دکمه: 0px
- دکمه فونت: بدون باز کردن
- وزن فونت: بسیار پررنگ
- سبک فونت: حروف بزرگ
فاصله
در آخر ، ما نیز حاشیه دلخواه را اضافه می کنیم و مقادیر را پر می کنیم تا به نتیجه مطلوب برسیم.
- حاشیه پایین: 10vw
- چسباندن: 15px
- بالشتک پایین: 15px
- لبه چپ: 50px
- اثاثه یا لوازم داخلی راست: 50px
نتیجه نهایی
این همان چیزی است که تاکنون ساخته ایم.
آخرین افکار
در این مقاله ، ما به شما نشان داده ایم که چگونه از شخصیت های بزرگ برای ایجاد ماسک های زمینه عالی با Divi استفاده کنید. این یک روش عالی برای ایجاد یک طراحی وب سفارشی بدون نیاز به استفاده از نرم افزار ویرایش تصویر است. اگر س anyال یا پیشنهادی دارید ، حتماً در بخش نظرات زیر نظر دهید!
