Divi: چگونه یک ماسک پس زمینه چسبناک ایجاد کنیم

آیا می خواهید به خود بُعد دیگری بدهید سایت اینترنتی با ماسک پس زمینه DIVI چسبنده؟

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

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

این آموزش ترکیبی از گزینه های چسبنده از DIVI با حالت های ترکیب فیلتر. 

بررسی

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

دفتر

موبایل

یک طرح در Divi ایجاد کنید

یک بخش جدید اضافه کنید

تصویر پس زمینه

با افزودن یک بخش جدید به صفحه ای که روی آن کار می کنید شروع کنید. 

• یک تصویر پس زمینه به انتخاب خود آپلود کنید.
• اندازه تصویر پس زمینه: جلد

فاصله

به برگه طراحی بخش بروید و تنظیمات فاصله پیش‌فرض زیر را حذف کنید:

• بالشتک (بالا و پایین): 0 پیکسل

سرریز می کند

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

• سرریز افقی: پنهان
• سرریز عمودی: پنهان

خط شماره 1 را اضافه کنید

ساختار ستون

با افزودن یک ردیف جدید با استفاده از ساختار ستون زیر ادامه دهید:

اندازه

بدون افزودن ماژول، تنظیمات خط را باز کنید و تنظیمات اندازه را بر اساس آن تغییر دهید:

• عرض: 100%
• حداکثر عرض: 100٪

فاصله

همچنین تمام حاشیه های پیش فرض را حذف کنید.

• بالشتک (بالا و پایین): 0 پیکسل

فیلتر

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

• حالت ترکیبی: صفحه نمایش

شاخص Z

برای اطمینان از باقی ماندن این ردیف در زیر ردیف دومی که به بخش اضافه می کنیم، z-index را در برگه تغییر می دهیم. فناوری.

• Z Index: 9

پارامترهای ستون

سپس تنظیمات ستون را باز می کنیم.

رنگ پس زمینه

از رنگ زمینه کاملا سفید استفاده می کنیم.

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

عنصر اصلی CSS

همچنین یک مقدار ارتفاع به عنصر اصلی در تب اضافه می کنیم فناوری.

height: 100vh;

یک ماژول "متن" به خط اضافه کنید

منطقه محتوا را خالی بگذارید

پس از اتمام تنظیمات ردیف، یک ماژول Text را به ستون آن اضافه کنید. 

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

رنگ پس زمینه

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

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

اندازه

در ادامه به تب دسترسی خواهیم داشت طرح و پارامترهای اندازه را به صورت زیر تغییر دهید:

• عرض:
  • دسکتاپ: 20vw
  • تبلت و تلفن: 70 vw
• قد:
  • دسکتاپ: 30 ولت ساعت
  • تبلت و تلفن: 10vh

فاصله

ما همچنین حاشیه برتر اضافه می کنیم.

• حاشیه (بالا): 3vh

مرز

و ما می خواهیم گوشه های گرد را اضافه کنیم.

• گوشه های گرد: 15 پیکسل

خط 2 را اضافه کنید

ساختار ستون

با افزودن یک ردیف دیگر به بخش با استفاده از ساختار ستون زیر ادامه دهید:

اندازه

تنظیمات خط را باز کنید و تغییرات زیر را در گزینه ها اعمال کنید اندازه گیری ذیل:

• عرض: 100%
• حداکثر عرض: 100٪

شاخص Z

همچنین z-index ردیف را افزایش دهید. این کمک خواهد کرد که اطمینان حاصل شود که محتویات خط بالای خط قبلی باقی می ماند.

• شاخص Z: 12

یک ماژول "متن" به خط اضافه کنید

محتوای H2 را اضافه کنید

وقت آن رسیده است که ماژول ها را اضافه کنید، با اولین ماژول متنی شروع کنید محتویات H2 به انتخاب شما

تنظیمات متن H2

تنظیمات متن H2 را به صورت زیر سفارشی کنید:

• فونت: Playfair Display
• تراز متن: در مرکز
• رنگ متن: #0b3835
• اندازه :
  • دسکتاپ: 150 پیکسل
  • تبلت و تلفن: 45 پیکسل
• ارتفاع خط: 1,2 em

اندازه

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

• حداکثر عرض: 980 پیکسل
• ماژول تراز: مرکز

فاصله

حاشیه بالای منفی را نیز درج کنید.

یک ماژول "Button" به ردیف اضافه کنید

اضافه کردن محتوا به دکمه

ماژول بعدی و آخرین مورد نیاز ما در این ردیف یک ماژول Button است. محتوای دلخواه خود را اضافه کنید.

تراز دکمه

به تب تغییر دهید طرح ماژول را تغییر دهید و تراز دکمه را تغییر دهید.

• تراز دکمه: مرکز

تنظیمات دکمه

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

• استفاده از سبک های سفارشی برای دکمه: بله
• اندازه متن دکمه: 15 پیکسل
• رنگ متن دکمه: #ffffff
• رنگ پس زمینه دکمه: #000000

• عرض حاشیه دکمه: 0 پیکسل
• شعاع حاشیه دکمه: 100 پیکسل

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

فاصله

ما همچنین مقادیر حاشیه و padding سفارشی را به تنظیمات فاصله اضافه می کنیم.

• حاشیه (پایین): 60vh
• بالشتک (بالا و پایین): 15 پیکسل
• بالشتک (چپ و راست): 40 پیکسل

جلوه های چسبنده را اعمال کنید

خط شماره 1 را باز کنید

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

گزینه های چسبنده را اعمال کنید

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

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

گزینه های چسبنده ماژول متن

اکنون که خط Sticky است، می‌توانیم استایل‌ها را در ماژول Text داخل خط اعمال کنیم. تنظیمات ماژول را باز کنید.

اندازه چسبنده

بعد، به تنظیمات اندازه بروید و مقادیر اندازه گیری زیر را اعمال کنید:

• عرض (چسبنده): 80 vw
• ارتفاع (چسبنده): 90vh

زمان انتقال

در نهایت به تب بروید فناوری و مدت زمان انتقال را افزایش دهید.

• مدت زمان انتقال: 500 میلی‌ثانیه

بررسی

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

دفتر

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

موبایل

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

نتیجه

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

به طور خاص، ما به شما نشان داده‌ایم که چگونه تنظیمات فیلتر Divi و گزینه‌های چسبنده را ترکیب کنید.

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

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

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

...