آیا می‌خواهید از ماسک Divi و همپوشانی الگوی پس‌زمینه استفاده کنید؟
با آخرین نسخه ماسک پس زمینه و ویژگی الگوی پس زمینه از Divi، می توانید بخش های قهرمان منحصر به فرد را برای خود ایجاد کنید وب سایت. بخش قهرمان اولین بخش شماست وب سایت و این اولین چیزی است که شما آخرین بازدید قبل از پیمایش خود را ببینید وب سایت، بنابراین مهم است که چشم نواز باشید!
این مقاله به شما نشان می‌دهد که چگونه می‌توانید پنج ماسک پس‌زمینه منحصربه‌فرد و پوشش‌های الگوی ایجاد کنید که می‌توانید روی یک تصویر پس‌زمینه اعمال کنید تا بخش‌های قهرمان واقعاً خیره‌کننده ایجاد کنید.
این آموزش مراحل ضروری مورد نیاز برای ایجاد هر بخش Hero را پوشش می دهد و ابزارهایی را که برای ایجاد یک بخش قهرمان برجسته برای وب سایت خود در عرض چند دقیقه نیاز دارید را در اختیار شما قرار می دهد.
بیایید شروع کنیم!
بررسی
در اینجا مروری سریع از پنج بخش قهرمانی است که امروز در این مقاله ایجاد خواهیم کرد.
اکنون DIVI را دانلود کنید!!!
طرح ها ظریف، ساده و در عین حال تاثیرگذار هستند.
دفعات بازدید: Divi: چگونه از "Gradient Builder" برای زیباسازی تصاویر خود استفاده کنیم
یک صفحه جدید با Divi Builder ایجاد کنید
برای شروع، باید موارد زیر را انجام دهید:
از داشبورد وردپرس، به صفحات> افزودن جدید برای ایجاد یک صفحه جدید
عنوانی به آن بدهید که برای شما منطقی باشد و کلیک کنید از Divi Builder استفاده کنید
سپس روی کلیک کنید شروع به ساختن کنید (از خراش بسازید)
پس از آن یک بوم خالی برای شروع طراحی در دیوی خواهید داشت.
پنج نمونه از پوشش‌های ماسک پس‌زمینه و الگو برای اعمال روی تصویر پس‌زمینه
ابتدا بخش Hero را ایجاد می کنیم
همه طرح‌های نمونه ما از ساختار بخش، ردیف و ستون مشابهی استفاده می‌کنند، بنابراین بیایید اکنون آنها را تنظیم کنیم.
1. یک ساختار طرح بندی ایجاد کنید
یک ردیف به صفحه خود اضافه کنید، سپس روی نماد سبز رنگ "+" کلیک کنید تا ساختار ستون نشان داده شود و اولین ستون، ستون تمام عرض را انتخاب کنید.
2. فاصله بخش ها را اضافه کنید
اکنون که سطر و ستون خود را تعریف کردیم، وقت آن است که مقداری فاصله به بخش اضافه کنیم.
در تب Spacing موارد زیر را به روز کنید:
- رومیزی: 400 پیکسل (بالا و پایین)
- تبلت: 200 پیکسل (بالا و پایین)؛ 25 پیکسل (چپ و راست)
- تلفن: 50 پیکسل (بالا و پایین)؛ 25 پیکسل (چپ و راست)
طراحی بخش قهرمان شماره 1
بیایید اولین بخش Hero را طراحی کنیم.
اکنون DIVI را دانلود کنید!!!
1. متن سرصفحه را اضافه کنید
روی نماد خاکستری "+" کلیک کنید تا کتابخانه ماژول ظاهر شود. به متن بروید و برای بارگیری کلیک کنید.
متن عنوان را وارد کنید، سپس در زیر تب متن سربرگ، این تنظیمات را پیکربندی کنید:
- قلم عنوان: Work Sans
- رنگ متن: سفید #ffffff
- اندازه متن عنوان:
- رومیزی: 3 ام
- تبلت: 2,2 em
- تلفن: 1.4 صبح
2. اضافه کردن ماژول دکمه
یک دکمه اضافه کنید و این تنظیمات را پیکربندی کنید:
- زیر زبانه محتواs: بیشتر بدانید
- زیر زبانه هم ترازی، انتخاب کنید: مرکز
- با کلیک بر روی از سبک های سفارشی برای دکمه استفاده کنید سپس پیکربندی کنید:
- اندازه متن دکمه:
- دسکتاپ: 20 پیکسل
- تبلت: 16 پیکسل
- تلفن: 14 پیکسل
- رنگ متن دکمه: #ffffff
- پس زمینه: #1d1d1d
- پهنای حاشیه دکمه: 0
- شعاع مرزی: 0
- فاصله حروف: 3 امتیاز
- فونت دکمه: بدون کار
- سبک قلم: TT
- اندازه متن دکمه:
3. یک تصویر پس زمینه اضافه کنید
حالا که ما محتویات پیکربندی شده است، زمان شروع طراحی پس زمینه بخش است.
- به ضامن پس‌زمینه بروید و روی تب سوم یعنی تب تصویر کلیک کنید، سپس روی «افزودن تصویر پس‌زمینه» کلیک کنید.
- با این کار کتابخانه رسانه شما ظاهر می شود، جایی که می توانید یک عکس را انتخاب کنید یا یک عکس جدید آپلود کنید.
- هنگامی که عکس خود را انتخاب کردید، روی دکمه "آپلود تصویر" در گوشه سمت راست پایین کلیک کنید.
4. یک الگوی پس زمینه اضافه کنید
اکنون که تصویر پس زمینه خود را تنظیم کردیم، بیایید یک الگو اضافه کنیم.
- در برگه زمینه، به برگه 5، تب بروید الگوی پیش زمینه، سپس روی "افزودن الگوی پس زمینه" کلیک کنید.
- Sélectionnez کج شده از منوی کشویی و این تنظیمات را پیکربندی کنید:
- رنگ الگو – rgba(255,255,255,0.31)
- تبدیل الگو: هیچ
- اندازه: اندازه واقعی
- مبدا تکرار الگو: بالا پایین
- الگوی تکرار: تکرار
- حالت ترکیبی: عادی
5. ماسک پس زمینه را اضافه کنید
اکنون که تصویر و الگوی پس زمینه خود را تنظیم کردیم، اجازه دهید یک ماسک پس زمینه اضافه کنیم.
- در برگه زمینه، به برگه ششم، تب بروید ماسک زمینه، سپس روی “Add a Background Mask” کلیک کنید.
- Sélectionnez حبوبات از منوی کشویی و این تنظیمات را پیکربندی کنید:
- رنگ ماسک: rgba(0,0,0,0.36)
- نسبت ابعاد ماسک: مستطیل افقی
- اندازه: کشش تا پر شود
بنابراین ! اکنون یک بخش Hero به زیبایی طراحی شده است.
طراحی بخش قهرمان شماره 2
حال بیایید قسمت قهرمان دوم را طراحی کنیم.
1. یک تصویر پس زمینه اضافه کنید و حالت ترکیب را روی Overlay قرار دهید
تصویر پس زمینه خود را انتخاب کنید، حالت ترکیب را روی Overlay قرار دهید و یک رنگ همپوشانی rgba اضافه کنید (10,10,10,0.64،XNUMX،XNUMX،XNUMX).
2. یک الگوی پس زمینه اضافه کنید
حالا که تصویر پس زمینه را تنظیم کردیم، بیایید یک الگوی پس زمینه اضافه کنیم.
- در تب Background، به تب 5 بروید، تب الگوی پیش زمینه، سپس روی "افزودن الگوی پس زمینه" کلیک کنید.
- Sélectionnez کج شده از منوی کشویی و این تنظیمات را پیکربندی کنید:
- رنگ الگو – rgba(255,255,255,0.09)
- تبدیل الگو: هیچ
- سایز: جلد
- مبدا تکرار الگو: بالا سمت چپ
- الگوی تکرار: تکرار
- حالت ترکیبی: عادی
3. ماسک پس زمینه را اضافه کنید
اکنون که تصویر و الگوی پس زمینه خود را تنظیم کردیم، اجازه دهید یک ماسک پس زمینه اضافه کنیم.
- در برگه زمینه، به برگه ششم، تب بروید ماسک زمینه، سپس روی "افزودن ماسک پس زمینه" کلیک کنید.
- Sélectionnez مراقب باشید از منوی کشویی و این تنظیمات را پیکربندی کنید:
- رنگ ماسک: rgba(0,0,0,0.36)
- تبدیل ماسک: هیچ
- نسبت تصویر: مستطیل افقی
- اندازه ماسک: کشش برای پر کردن
- Mask Blend Mode: عادی
طراحی بخش قهرمان شماره 3
حال بیایید بخش سوم Hero را طراحی کنیم.
1. یک تصویر پس زمینه اضافه کنید و حالت ترکیب را روی Overlay قرار دهید
تصویر پس زمینه خود را انتخاب کنید، حالت ترکیب را روی Overlay قرار دهید و یک رنگ همپوشانی rgba اضافه کنید (10,10,10,0.39،XNUMX،XNUMX،XNUMX).
2. یک الگوی پس زمینه اضافه کنید
اکنون که تصویر پس زمینه خود را تنظیم کرده ایم، بیایید یک الگوی پس زمینه اضافه کنیم.
- در برگه زمینه، به برگه ششم، تب بروید الگوی پیش زمینه، سپس روی "افزودن الگوی پس زمینه" کلیک کنید.
- Sélectionnez راه راه های مورب 2 از منوی کشویی و این تنظیمات را پیکربندی کنید:
- رنگ الگو – rgba(0,0,0,0.06)
- تبدیل الگو: هیچ
- اندازه: اندازه واقعی
- مبدا تکرار الگو: بالا سمت چپ
- الگوی تکرار: تکرار
- حالت ترکیبی: عادی
3. ماسک پس زمینه را اضافه کنید
اکنون که یک تصویر پس‌زمینه و یک الگو اضافه کرده‌ایم، بیایید یک ماسک پس‌زمینه اضافه کنیم.
- در برگه زمینه، به برگه ششم، تب بروید ماسک زمینه، سپس روی "افزودن ماسک پس زمینه" کلیک کنید.
- Sélectionnez مثلث از منوی کشویی و این تنظیمات را پیکربندی کنید:
- رنگ ماسک: rgba (10، 10، 10، 0,61)
- Mask Transform: هیچ
- نسبت تصویر: مستطیل افقی
- اندازه ماسک: کشش برای پر کردن
- Mask Blend Mode: عادی
طراحی بخش قهرمان شماره 4
حال بیایید قسمت چهارم Hero را طراحی کنیم.
1. یک تصویر پس زمینه اضافه کنید
تصویر پس زمینه خود را انتخاب کنید.
2. یک الگوی پس زمینه اضافه کنید
اکنون که تصویر پس زمینه خود را اضافه کرده ایم، بیایید یک الگوی پس زمینه اضافه کنیم.
- در برگه زمینه، به برگه ششم، تب بروید الگوی پیش زمینه، سپس روی "افزودن الگوی پس زمینه" کلیک کنید.
- Sélectionnez لبخند از منوی کشویی و این تنظیمات را پیکربندی کنید:
- رنگ الگو – rgba(0,0,0,0.2)
- تبدیل الگو: هیچ
- سایز: جلد
- تکرار مبدا: بالا سمت چپ
- الگوی تکرار: تکرار
- حالت ترکیب الگو: عادی
3. ماسک پس زمینه را اضافه کنید
اکنون که تصویر و الگوی پس‌زمینه اعمال شده است، اجازه دهید یک ماسک پس‌زمینه اضافه کنیم.
- در برگه زمینه، به برگه ششم، تب بروید ماسک زمینه، سپس روی "افزودن ماسک پس زمینه" کلیک کنید.
- Sélectionnez دریاچه گوشه از منوی کشویی و این تنظیمات را پیکربندی کنید:
- رنگ ماسک: rgba (10، 10، 10، 0,61)
- تبدیل ماسک: افقی
- نسبت تصویر: مستطیل افقی
- سایز: جلد
- موقعیت ماسک: وسط سمت چپ
- حالت مخلوط کن ماسک: معمولی
3. پارامترهای خط را پیکربندی کنید
قبل از رفتن، این بخش Hero دارای سبک های خط منحصر به فرد است. بیایید این را تنظیم کنیم.
- سایز بندی:
- عرض: 80%
- حداکثر عرض: 800 پیکسل
- تراز ردیفی:
- دسکتاپ: پیش فرض
- تبلت: مرکز
- تلفن: مرکز
- حواشی:
- سمت چپ: 20vw
طراحی بخش قهرمان شماره 5
حال بیایید قسمت پنجم قهرمان را طراحی کنیم.
اکنون DIVI را دانلود کنید!!!
1. یک تصویر پس زمینه اضافه کنید
تصویر پس زمینه خود را انتخاب کنید.
2. یک الگو اضافه کنید
اکنون که تصویر پس زمینه خود را تنظیم کرده ایم، بیایید یک الگوی پس زمینه اعمال کنیم.
- در برگه زمینه، به برگه ششم، تب بروید الگوی پیش زمینه، سپس روی "افزودن الگوی پس زمینه" کلیک کنید.
- Sélectionnez عبور از منوی کشویی و این تنظیمات را پیکربندی کنید:
- رنگ الگو – #ffffff
- تبدیل الگو: هیچ
- اندازه: اندازه سفارشی
- عرض الگو: 10 پیکسل
- ارتفاع الگو: 10 پیکسل
- تکرار مبدا: بالا پایین
- الگوی تکرار: تکرار
- حالت ترکیب الگو: عادی
3. ماسک پس زمینه را اضافه کنید
اکنون که یک تصویر پس‌زمینه و الگو اعمال شده‌ایم، بیایید یک ماسک پس‌زمینه اضافه کنیم.
- در برگه زمینه، به برگه ششم، تب بروید ماسک زمینه، سپس روی "افزودن ماسک پس زمینه" کلیک کنید.
- Sélectionnez قرص مورب از منوی کشویی و این تنظیمات را پیکربندی کنید:
- رنگ ماسک: rgba (10، 10، 10، 0,61)
- تبدیل ماسک: افقی
- نسبت تصویر: مستطیل افقی
- سایز: جلد
- موقعیت ماسک: وسط سمت چپ
- Mask Blend Mode: عادی
3. پارامترهای خط را پیکربندی کنید
قبل از رفتن، این بخش Hero نیز دارای سبک های خط منحصر به فرد است. بیایید این را تنظیم کنیم.
- سایز بندی:
- عرض: 80%
- حداکثر عرض: 800 پیکسل
- تراز ردیفی:
- دسکتاپ: پیش فرض
- تبلت: مرکز
- تلفن: مرکز
- فاصله گذاری:
- حاشیه (راست): 18vw
همچنین ببینید: Divi: چگونه ماسک ها و الگوهای پس زمینه را به هدر اضافه کنیم
نتیجه
طراحی یک بخش قهرمان منحصر به فرد و چشم نواز برای وب سایت شما با گزینه های جدید آسان است ماسک پس زمینه و الگو توسط Divi. هر ویژگی گزینه های زیادی دارد که به شما امکان می دهد پس زمینه های واقعا خلاقانه ایجاد کنید.
به علاوه، می توانید الگوها و ماسک های پس زمینه را به هر آیتم Divi Builder اضافه کنید! گزینه های طراحی بی پایان هستند.
امیدواریم این تکنیک مهارت طراحی مفید دیگری را برای پروژه های آینده اضافه کند.
امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی Divi باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد
همچنین می توانید مشورت کنید منابع مااگر به عناصر بیشتری نیاز دارید تا پروژه های ایجاد سایت های اینترنتی خود را انجام دهید.
دریغ نکنید که با راهنمای ما در این زمینه نیز مشورت کنید ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
