ماژول هدر عرض کامل Divi دارای ویژگی های بسیاری است که عناصر طراحی جالبی را به هر وب سایت Divi اضافه می کند. یک مثال، توانایی نمایش تصویر پس‌زمینه زمانی است که کاربر روی ماژول قرار می‌گیرد. این یک سطح اضافی از جزئیات را اضافه می کند که اکثر کاربران انتظار آن را ندارند. انجام این کار با Divi آسان است.
در این پست، نحوه نمایش یک تصویر پس‌زمینه در حالت شناور در ماژول هدر Divi Fullwidth خود را خواهیم دید. ما همچنین یک هدر با عرض کامل از ابتدا بر اساس یکی از بسته های طرح بندی رایگان Divi ایجاد خواهیم کرد.
بیا شروع کنیم.
مرور
ابتدا بیایید پیش نمایشی از آنچه در این پست بسازیم را ببینیم. از آنجایی که شناور گزینه‌ای برای گوشی‌ها نیست، وقتی کاربر روی پس‌زمینه ضربه می‌زند، طرح را برای تلفن‌ها اضافه کردم.
دسکتاپ بدون ماوس
دسکتاپ با نگه داشتن ماوس
تلفن بدون نگه داشتن
گوشی با صفحه لمسی
هدر را به عرض کامل تصویر پس‌زمینه در حالت انتظار قرار دهید
ابتدا، اجازه دهید هدر تمام عرضی را که در مثال استفاده خواهیم کرد، بسازیم. بازش کن Divi Theme Builder و کلیک کنید یک پاورقی جهانی اضافه کنید برای ایجاد یک قالب جدید انتخاب کنید یک سربرگ جهانی بسازید برای ساختن آن از ابتدا
سپس a را اضافه کنید بخش عرض کامل و بخش معمولی را حذف کنید.
در نهایت a اضافه کنید ماژول هدر عرض کامل به بخش جدید شما
اکنون می‌توانیم پس‌زمینه آشکار خود را ایجاد کرده و به ماژول استایل دهید. برای این مثال، من از دستورالعمل‌های طراحی از بخش کاراکتر صفحه فرود خدمات مالی رایگان که در Divi موجود است استفاده می‌کنم.
ایجاد تصویر پس زمینه در حالت انتظار
قبل از استایل دادن به ماژول، اجازه دهید با ایجاد تابع آشکارسازی شناور برای ماژول Fullwidth Header شروع کنیم. پس از مشاهده نحوه ایجاد آن و مشاهده نحوه کارکرد آن، بقیه ماژول را مطابق با نمونه پیش نمایش ما استایل می کنیم.
تصویر پس زمینه برای نشان دادن نشانگر ماوس
پس‌زمینه نشان داده شده در حالت انتظار دارای دو عنصر است. اولی رنگ پس زمینه است که به صورت عادی نمایش داده می شود. در صورت تمایل می توانیم از گرادیان یا تصویر نیز استفاده کنیم. دوم عنصری است که وقتی کاربر روی ماژول Fullwidth Header قرار می گیرد نمایش داده می شود. در مورد ما این یک تصویر است، اما به همین راحتی می‌توانیم از رنگ پس‌زمینه یا گرادیان استفاده کنیم.
ابتدا به پایین اسکرول کنید زمینه. در تب Background Color، رنگ را به #f0f3fb تغییر دهید.
- رنگ پس زمینه: #f0f3fb
سپس انتخاب کنید ایالت شناور آیکون. این نماد نشانگر ماوس است. با کلیک بر روی آن، مجموعه ای از برگه ها باز می شود که به ما امکان می دهد بین تنظیمات معمولی انتخاب کنیم و تنظیمات حالت را نگه داریم. انتخاب کنید برگه وضعیت مکان نما برای رفتن به نگه داشتن گزینه ها. سپس انتخاب کنید تب تصویر پس زمینه و تصویر پس زمینه خود را انتخاب کنید. من از تصویر پس زمینه بسته طرح بندی خدمات مالی به نام خدمات مالی-9 استفاده می کنم.
- تصویر پس زمینه وضعیت مکان نما: مالی-خدمات-9
ما اکنون تصویری داریم که وقتی کاربر روی ماژول Fullwidth Header قرار می‌گیرد، نمایان می‌شود. همه گزینه های وضعیت نگه داشتن به این ترتیب کار می کنند.
سبک ماژول هدر با تصویر پس‌زمینه تمام عرض در حالت انتظار
اکنون که تصویر پس‌زمینه خود را در حالت شناور قرار داده‌ایم، به بقیه ماژول استایل می‌دهیم.
ماوس را روی محتوای تصویر پس‌زمینه نگه دارید
بیا شروع کنیم با محتوا برای فیلدها، بدنه و دکمه ها. عنوان، زیرنویس، دکمه یک، دکمه دو و محتوای متن خود را اضافه کنید.
- عنوان: برای آینده مالی خود برنامه ریزی کنید
- زیرنویس: به Divi خوش آمدید
- دکمه اول: شروع کنید
- دکمه دوم: یک پیشنهاد رایگان دریافت کنید
- محتوای اصلی: محتوای شما
طرح بندی تصویر پس زمینه روی ماوس
سپس انتخاب کنید طرح بخش. تغییر دادن هم ترازی لوگو و متن به مرکز.
- هم ترازی لوگو و متن: در مرکز
اسکرول پایین نماد با تصویر پس زمینه
انتخاب کنید نمایش دکمه اسکرول پایین. نماد سوم را انتخاب کرده و رنگ را به #1d4eff تغییر دهید. اندازه پیش فرض را بگذارید.
- نمایش دکمه اسکرول پایین: بله
- نماد: 3rd
- رنگ: #1d4eff
متن عنوان تصویر پس زمینه
سپس به پایین اسکرول کنید متن عنوان. H1 را برای سطح عنوان انتخاب کنید. Montserrat را به عنوان فونت انتخاب کنید، وزن ضربه را تنظیم کنید و تغییر دهید رنگ به #0f1154.
- سطح عنوان: H1
- فونت: مونتسرات
- وزن: نیمه مشکی
- رنگ: #0f1154
تغییر دادن اندازه فونت حداکثر 125 پیکسل برای رایانه های رومیزی، 40 پیکسل برای رایانه های لوحی و 24 پیکسل برای تلفن ها. نگرش ارتفاع خط تا 110 درصد. این یک عنوان بزرگ به ما می دهد که در هر اندازه صفحه نمایش عالی به نظر می رسد.
- اندازه: دسکتاپ 125 پیکسل، تبلت 40 پیکسل، گوشی 24 پیکسل
- ارتفاع خط: 110%
متن متن روی تصویر پس زمینه
سپس به Body text بروید. فونت را به Roboto تغییر دهید، وزن را روی متوسط قرار دهید و رنگ را به #0f1154 تغییر دهید.
- فونت: Roboto
- وزن: متوسط
- رنگ: #0f1154
تغییر دادن اندازه فونت تا 18 پیکسل برای دسکتاپ و تبلت و 14 پیکسل برای گوشی ها. نگرش ارتفاع خط تا 180 درصد این به متن اصلی فضای کافی برای نفس کشیدن می دهد.
- اندازه: 18 پیکسل دسکتاپ و تبلت، گوشی 14 پیکسل
- ارتفاع ردیف: 180%
متن زیرنویس تصویر پس زمینه
سپس به متن زیرنویس. فونت Montserrat را تغییر دهید. وزن را روی پررنگ تنظیم کنید، استایل را به TT تغییر دهید و رنگ را به #1d4eff تغییر دهید.
- فونت: مونتسرات
- وزن: نیمه مشکی
- سبک: TT
- رنگ: #1d4eff
تغییر دادن اندازه فونت حداکثر 16 پیکسل برای رایانه های رومیزی، 14 پیکسل برای رایانه های لوحی و 12 پیکسل برای تلفن ها. تغییر دادن فاصله خطوط به 0.3em و ارتفاع خط تا 1.6em این کار زیرنویس ها را از عنوان و محتوا جدا می کند بدون اینکه فضای زیادی اشغال کند.
- اندازه: دسکتاپ 16 پیکسل، تبلت 14 پیکسل، تلفن 12 پیکسل
- فاصله بین حروف: 0.3 em
- ارتفاع خط: 1.6 میلی متر
دکمه تصویر پس زمینه روی ماوس
سپس به پایین اسکرول کنید تا دکمه یک را فعال کنید از سبک های سفارشی برای دکمه یک استفاده کنید. اندازه متن را به 18 پیکسل تغییر دهید. رنگ متن را به سفید و رنگ پس زمینه را به #1d4eff تغییر دهید.
- از سبک های سفارشی برای دکمه یک استفاده کنید: بله
- اندازه متن: 18 پیکسل
- رنگ متن: #ffffff
- رنگ پس زمینه: #1d4eff
سپس تغییر دهید عرض حاشیه و شعاع به 0 پیکسل. Roboto را برای فونت انتخاب کنید و وزن را روی متوسط قرار دهید.
- عرض: 0 پیکسل
- شعاع: 0 پیکسل
- فونت: Roboto
- وزن: متوسط
به پایین بروید پد برای یک دکمه. 14 پیکسل برای پدهای بالا و پایین و 24 پیکسل برای پدهای راست و چپ اضافه کنید.
- پد: 14 پیکسل بالا و پایین، 24 پیکسل چپ و راست
دکمه تصویر پس زمینه روی ماوس
سپس به پایین اسکرول کنید تا دکمه دو را فعال کنید از سبک های سفارشی برای دکمه دو استفاده کنید. اکثر این تنظیمات مانند Button One هستند. اندازه متن را به 18 پیکسل، رنگ متن را به سفید و رنگ پس زمینه را به #00c9c9 تغییر دهید.
- از سبک های سفارشی برای دکمه دو استفاده کنید: بله
- اندازه متن: 18 پیکسل
- رنگ متن: #ffffff
- رنگ پس زمینه: #00c9c9
سپس تغییر دهید عرض حاشیه و شعاع به 0 پیکسل. Roboto را برای فونت انتخاب کنید و وزن را روی متوسط قرار دهید.
- عرض: 0 پیکسل
- شعاع: 0 پیکسل
- فونت: Roboto
- وزن: متوسط
به پایین بروید دکمه دو پد. 14 پیکسل برای پدهای بالا و پایین و 24 پیکسل برای پدهای راست و چپ اضافه کنید.
- پد: 14 پیکسل بالا و پایین، 24 پیکسل چپ و راست
فاصله بین تصاویر پس زمینه در حالت انتظار
سپس به پایین اسکرول کنید فاصله و 100px Padding را به بالا و پایین اضافه کنید. این کار اندازه هدر را بدون استفاده از گزینه Full Screen در تنظیمات چیدمان به عرض کامل افزایش می دهد. در مثال‌های من، هدر تمام عرض در پایین صفحه جایی که بخش بعدی نمایش داده می‌شود، فضای خالی باقی می‌گذارد. البته در صورت تمایل می توانید به جای پد از تنظیمات تمام صفحه استفاده کنید.
- بالشتک: 100 پیکسل بالا و پایین
سایه جعبه برای تصویر پس زمینه
در نهایت، به پایین بروید سایه جعبه و 6 را انتخاب کنیدهفتم گزینه Box Shadow. این به هدر ظاهر منحصربفردتری می دهد. بستن ماژول Fullwidth Header و تنظیمات خود را ذخیره کنید.
نتایج
دسکتاپ بدون ماوس
دسکتاپ با نگه داشتن ماوس
تلفن بدون نگه داشتن
گوشی با صفحه لمسی
پایان افکار
این برداشت ما از نحوه نمایش تصویر پس‌زمینه در حالت شناور در ماژول هدر Divi Fullwidth است. حالت نگه داشتن تصاویر پس زمینه یک تنظیم ساده است، اما می تواند تاثیر زیادی بر طراحی سایت داشته باشد. این یک راه عالی برای جلب توجه است. اگر می‌خواهید استاپ‌های گرادیان، پوشش‌ها، تغییر تصاویر و موارد دیگر را اضافه کنید، می‌توانید حتی بیشتر در طراحی پیش بروید. توصیه می کنم با تنظیمات چرخش پس زمینه ماژول Divi Fullwidth Header بازی کنید تا ببینید چه چیزی می توانید ایجاد کنید.
ما می خواهیم از تو بشنویم. آیا از تصویر پس‌زمینه شناور در ماژول هدر Divi Fullwidth خود استفاده می‌کنید؟ در نظرات به ما اطلاع دهید.