آیا می خواهید ماژول Divi Fullwidth Header را به صورت تمام صفحه نمایش دهید؟
هدرهای تمام صفحه، بدون توجه به اندازه صفحه، کل صفحه را اشغال می کنند بازدید کننده. این برای جلب توجه کاربران عالی است. خوشبختانه، ایجاد یک هدر تمام صفحه با ماژول آسان است سربرگ Fullwidth از دیوی
در این مقاله به شما نشان خواهیم داد که چگونه یک هدر با عرض کامل ایجاد کنید، آن را سفارشی کنید و به صورت تمام صفحه نمایش دهید. می توانید از این روش برای ایجاد هر بخش قهرمان تمام صفحه برای صفحات خود استفاده کنید.
بیایید شروع.
بررسی
بیایید پیش نمایشی از آنچه در این آموزش طراحی خواهیم کرد را ببینیم.
دفتر
قرص
تلفن
چگونه هدر Divi Fullwidth خود را به یک سربرگ تمام صفحه تبدیل کنید
با افزودن یک بخش با عرض کامل به صفحه ای که روی آن کار می کنید شروع کنید.
سپس a را اضافه کنید ماژول هدر تمام عرض به بخش تمام عرض
تنظیمات ماژول باز می شود. برگه را انتخاب کنید طرح. گزینه فراخوانی شده را فعال کنید تمام صفحه بسازید
اکنون یک هدر تمام صفحه داریم. به همین سادگی.
نماد اسکرول را فعال کنید
همچنین می توانیم دکمه ای اضافه کنیم که به کاربر می گوید به پایین اسکرول کند. با این حال، ما باید آن را فعال کنیم. این دکمه همیشه در گزینه تمام صفحه قابل مشاهده است. گزینه هدر تمام صفحه همیشه با ارتفاع صفحه نمایش مطابقت دارد بازدید کننده.
- نمایش دکمه اسکرول پایین: بله
مثال هدر تمام صفحه Divi Fullwidth
پارامترهای ماژول هدر کامل
در اینجا مراحل مربوط به هر بخش از تنظیمات ماژول Fullwidth Header آمده است.
همچنین بخوانید: Divi: نحوه ترکیب ماسک های پس زمینه و جداکننده ها
متن
تمام ابتدا متن را اضافه کنید که در هدر تمام عرض قابل مشاهده خواهد بود. این شامل عنوان، زیرنویس، محتویات و متن دکمه
- عنوان: ایجاد وبلاگ شما با دیوی
- زیرنویس: Blogpascher
- بارون شماره 1: خلاصه
- دکمه شماره 2: برنامه ریزی
- بدنه: (پیش‌فرض)
تصاویر
اختصاصی، اضافه کردن تصویر. این در سمت راست هدر تمام عرض نمایش داده می شود و متن را به سمت چپ منتقل می کند.
- تصویر سربرگ: انتخاب شما
زمینه
حرکت به زمینه و رنگ را روی #f6f5ee قرار دهید.
- رنگ پس زمینه: #f6f5ee
وضع
سپس به تب Design بروید.
- ساخت تمام صفحه: بله
اسکرول به پایین نماد
- نمایش دکمه اسکرول پایین: بله
- رنگ نماد اسکرول به پایین: #000000 (رومیزی و رایانه لوحی)، #ffffff (تلفن)
- اندازه نماد اسکرول پایین: 70 پیکسل (رومیزی)، 60 پیکسل (تبلت)، 50 پیکسل (تلفن)
متن عنوان
در مرحله بعد ما را تنظیم می کنیم متن عنوان.
- سطح عنوان: H1
- فونت: Inter
- وزن قلم: پررنگ
- تراز متن: مرکز
- رنگ متن: #000000
- اندازه متن عنوان: 75 پیکسل (رومیزی)، 40 پیکسل (تبلت)، 24 پیکسل (تلفن)
- ارتفاع خط عنوان: 1.2 میلی متر
متن توضیحات
سپس به پایین اسکرول کنید متن بدنه.
- فونت: Open Sans
- تراز: چپ
- رنگ: #000000
- اندازه متن: 16 پیکسل (رومیزی)، 15 پیکسل (تبلت)، 14 پیکسل (تلفن)
- ارتفاع خط: 1.8 میلی متر
عنوان فرعی
سپس به پایین اسکرول کنید متن زیرنویس.
- فونت: Inter
- وزن قلم: پررنگ
- سبک: TT
- تراز: مرکز
- رنگ: #ff5a17
- اندازه: 14 پیکسل
- فاصله حروف: 1 پیکسل
- ارتفاع خط: 1.8 میلی متر
دکمه شماره 1
سپس به پایین اسکرول کنید دکمه یک.
- استفاده از سبک های سفارشی برای دکمه: بله
- اندازه متن: 20 پیکسل (رومیزی)، 18 پیکسل (تبلت)، 16 پیکسل (تلفن)
- رنگ متن: #000000
- رنگ پس زمینه: #ffffff
- عرض حاشیه: 0 پیکسل
- شعاع حاشیه: 0 پیکسل
- فونت: Inter
- وزن قلم: پررنگ
- نماد: انتخاب شما
- رنگ نماد: #000000
- مکان: درست
- فقط نمایش نماد در حالت شناور برای دکمه یک: خیر
در نهایت، به سمت پایین به گزینه ها بروید دکمه یک بالشتک.
- لایه گذاری:
- رومیزی: 20 پیکسل (بالا و پایین)، 40 پیکسل (چپ و راست)
- تبلت: 16 پیکسل (بالا و پایین)، 40 پیکسل (چپ و راست)
- تلفن: 12 پیکسل (بالا و پایین)، 40 پیکسل (چپ و راست)
دکمه شماره 2
در نهایت، به پایین بروید دکمه دو.
- از سبک های سفارشی برای دکمه دو استفاده کنید: بله
- اندازه متن: 20 پیکسل (رومیزی)، 18 پیکسل (تبلت)، 16 پیکسل (تلفن)
- رنگ متن: #ffffff
- رنگ پس زمینه: #ff5a17
- عرض حاشیه: 0 پیکسل
- شعاع حاشیه: 0 پیکسل
- فونت: Inter
- وزن قلم: پررنگ
نماد مورد علاقه خود را انتخاب کنید.
- نماد: انتخاب شما
- رنگ نماد: #000000
- مکان: سمت چپ
- فقط نمایش نماد در حالت شناور برای دکمه دو: خیر
در نهایت به سمت گزینه ها به پایین بروید دکمه دو بالشتک.
- لایه گذاری:
- رومیزی: 20 پیکسل (بالا و پایین)، 40 پیکسل (چپ و راست)
- تبلت: 16 پیکسل (بالا و پایین)، 40 پیکسل (چپ و راست)
- تلفن: 12 پیکسل (بالا و پایین)، 40 پیکسل (چپ و راست)
نتایج نهایی
این همان چیزی است که هدر تمام عرض ما در رایانه‌های رومیزی، تبلت‌ها و تلفن‌ها به نظر می‌رسد.
همچنین می توانید مشورت کنید: Divi: نحوه استفاده از افکت های سایه و شناور برای ایجاد محتوای تعاملی
دفتر
قرص
تلفن
اکنون DIVI را دانلود کنید!!!
نتیجه
در اینجا نگاه ما به نحوه ایجاد یک سربرگ Fullwidth با ماژول Divi Fullwidth Header است.
این فرآیند ساده است و در هر دستگاهی عالی به نظر می رسد. اضافه کردن دکمه رفته پایین تصویری عالی است که به کاربران می گوید می توانند اسکرول کنند.
طراحی هدر تمام صفحه مشابه طراحی بخش Hero است. پیروی از چند دستورالعمل ساده می تواند به شما در ایجاد هدرهای تمام صفحه شگفت انگیز با ماژول Fullwidth Header Divi کمک کند.
امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی Divi باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد
همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
