هدرهای تمام صفحه بدون در نظر گرفتن اندازه صفحه بازدیدکننده، کل صفحه را اشغال می کنند. این برای جلب توجه کاربران عالی است. همچنین برای سوق دادن آنها به سمت فراخوان شما عالی است. خوشبختانه، ساخت هدر تمام صفحه با ماژول هدر تمام عرض Divi آسان است. در این پست به شما نشان خواهیم داد که چگونه یک هدر با عرض کامل ایجاد کنید، آن را تمام صفحه کنید و به آن استایل دهید. شما می توانید از این روش برای ایجاد یک بخش کاراکتر تمام صفحه سفارشی برای صفحات خود استفاده کنید!
بیا شروع کنیم.
پیش نمایش هدر در تمام صفحه
بیایید پیش نمایشی از آنچه در این آموزش می سازیم را ببینیم.
دسکتاپ
تبلت
تلفن
چرا یک هدر تمام صفحه با ماژول هدر تمام عرض Divi ایجاد کنیم؟
قبل از اینکه درباره نحوه ایجاد یک هدر تمام صفحه صحبت کنیم، اجازه دهید در مورد اینکه چرا کاربران Divi ممکن است آن را بخواهند صحبت کنیم.
یک هدر تمام صفحه، عناصر خاصی را در یک بخش حاوی نمایش می دهد. این بخش این عناصر را در یک چیدمان تمیز ارائه می دهد که چشم نواز و چند وظیفه ای است.
اول، این می تواند برای نمایش یک فراخوان برای اقدام استفاده شود که می تواند بازدیدکنندگان را به قیف فروش شما هدایت کند. این مکان عالی برای ذکر یک محصول یا خدمات خاص است.
دوم، می تواند طراحی جالبی را به کاربر ارائه دهد تا او را در وب سایت نگه دارد. وب سایت ها فقط چند ثانیه فرصت دارند تا توجه بازدیدکنندگان را جلب کنند.
هنگام ایجاد هدر تمام صفحه باید به چند نکته توجه داشته باشید:
- از شیوه های رایج طراحی برای رنگ ها و فونت ها پیروی کنید. اطمینان حاصل کنید که آنها خوانا و متناسب با موضوع وب سایت شما هستند.
- طراحی را ساده و تمیز نگه دارید. از تصاویر، پیوندها یا دکمه های زیاد استفاده نکنید. روی چند چیز تمرکز کنید. کمتر، بیشتر است.
- مطمئن شوید که هدر تمام صفحه پاسخگو باشد. یک هدر تمام صفحه باید عالی به نظر برسد و در تمام اندازه های صفحه به درستی کار کند.
چگونه هدر Divi با عرض کامل را به عنوان یک هدر تمام صفحه تبدیل کنیم
با افزودن یک بخش با عرض کامل به صفحه ای که روی آن کار می کنید شروع کنید. سپس a را اضافه کنید ماژول هدر عرض کامل به بخش عرض کامل
تنظیمات ماژول باز می شود. تب Design را انتخاب کنید. گزینه فراخوانی شده را فعال کنید آن را تمام صفحه کنید.
اکنون یک هدر تمام صفحه داریم. خیلی ساده است.
نماد اسکرول پایین را در هدر تمام صفحه فعال کنید
همچنین می‌توانیم دکمه‌ای اضافه کنیم که به کاربر نشان می‌دهد به پایین اسکرول کند. با این حال، ما باید آن را فعال کنیم. این دکمه همیشه در گزینه تمام صفحه قابل مشاهده است. گزینه هدر تمام صفحه همیشه با ارتفاع صفحه بازدیدکننده مطابقت دارد.
در تنظیمات ماژول، بخشی به نام Scroll Down Icon را در زیر گزینه های طرح بندی مشاهده خواهیم کرد. برای فعال سازی روی دکمه کلیک کنید نمایش دکمه اسکرول پایین.
Divi Fullwidth Header نمونه ای از هدر تمام عرض
اکنون که در مورد اینکه چرا می‌خواهیم یک هدر تمام صفحه بسازیم و نحوه انجام کار را دیدیم، بحث کردیم، بیایید به یک مثال نگاه کنیم. من قصد دارم با استفاده از بخش hero در طرح Divi یک هدر با عرض کامل ایجاد کنم.
برای این مثال، من از بخش قهرمان صفحه اصلی در بسته طرح بندی رایگان Photography Studio که در Divi موجود است استفاده می کنم. من این بخش قهرمان را با استفاده از فونت‌ها و رنگ‌های طرح‌بندی سفارشی می‌کنم تا یک هدر تمام عرض منحصر به فرد ایجاد کنم.
تنظیمات ماژول هدر تمام صفحه
در اینجا مراحل مربوط به هر بخش از تنظیمات در ماژول هدر تمام صفحه آورده شده است.
متن
اولین، متن را اضافه کنید که در هدر تمام عرض قابل مشاهده خواهد بود. این شامل عنوان، زیرنویس، محتوا (من از متن ساختگی داخلی Divi برای این کار استفاده خواهم کرد)، و متن دکمه.
- عنوان: استودیو عکاسی دیوی
- زیرنویس: عکاسی
- دکمه 1: شرح مختصری از پروژه
- دکمه 2: برنامه ریزی پروژه
- بدنه: محتوا
تصاویر
بعدی، تصویر را اضافه کنید. این در سمت راست هدر تمام عرض نمایش داده می شود و متن را به سمت چپ منتقل می کند.
- تصویر سربرگ: انتخاب شما
زمینه
به پایین بروید زمینه و رنگ را روی #f6f5ee قرار دهید.
طرح
سپس به تب Design بروید. ایجاد تمام صفحه را فعال کنید.
اسکرول به پایین نماد
سپس فعال کنید اسکرول به پایین نماد. رنگ را برای دسکتاپ و تبلت به سیاه و برای گوشی ها به رنگ سفید تغییر دهید. با تصویری که انتخاب کرده‌ام، آیکون روی تصویر در پایین گوشی‌ها ظاهر می‌شود و این اجازه می‌دهد تا با رنگ‌های تصویر دیده شود. اندازه نماد را به 70 پیکسل برای رایانه های رومیزی، 60 پیکسل برای رایانه های لوحی و 50 پیکسل برای تلفن ها تغییر دهید.
- نمایش دکمه اسکرول پایین: بله
- رنگ نماد: #000000 رومیزی و تبلت، تلفن #ffffff
- اندازه: 70px رومیزی، 60px تبلت، 50px تلفن
متن عنوان
سپس تنظیم خواهیم کرد متن عنوان. متن را روی H1 تنظیم کنید و برای فونت Inter را انتخاب کنید. وزن را روی پررنگ، تراز وسط و رنگ را روی مشکی تنظیم کنید.
- عنوان: H1
- فونت: Inter
- وزن: نیمه مشکی
- تراز: مرکز
- رنگ: #000000
ما از سه اندازه برای فونت اندازه: 75 پیکسل برای دسکتاپ، 40 پیکسل برای تبلت ها و 24 پیکسل برای گوشی ها. ارتفاع خط را به 1.2 em تغییر دهید.
- اندازه: 75px رومیزی، 40px تبلت، 24px تلفن
- ارتفاع خط: 1.2 em
متن اصلی
سپس به پایین اسکرول کنید متن اصلی. Open Sans را برای فونت انتخاب کنید. تراز را به سمت چپ و رنگ را روی سیاه قرار دهید.
- فونت: Open Sans
- تراز: چپ
- رنگ: #000000
نگرش اندازه فونت حداکثر 16 پیکسل برای رایانه های رومیزی، 15 پیکسل برای رایانه های لوحی و 14 پیکسل برای تلفن ها. ارتفاع خط را به 1.8 em تغییر دهید.
- اندازه: دسکتاپ 16 پیکسل، تبلت 15 پیکسل، تلفن 14 پیکسل
- ارتفاع خط: 1.8 میلی متر
متن زیرنویس
سپس به پایین اسکرول کنید متن زیرنویس. فونت را به Inter تغییر دهید. وزن فونت را روی پررنگ، استایل را روی TT، تراز وسط و رنگ را روی #ff5a17 تنظیم کنید.
- فونت: Inter
- وزن: نیمه مشکی
- سبک: TT
- تراز: مرکز
- رنگ: #ff5a17
تغییر دادن اندازه تا 14 پیکسل برای هر سه اندازه صفحه نمایش. فاصله حروف را به 1px و ارتفاع خط را به 1.4em تغییر دهید.
- اندازه: 14 پیکسل
- فاصله بین حروف 1 پیکسل
- ارتفاع خط: 1.8 میلی متر
دکمه یک
سپس به پایین اسکرول کنید دکمه یک و انتخاب کنید از سبک های دکمه سفارشی استفاده کنید. رنگ متن را به سیاه تغییر دهید.
- استفاده از سبک های سفارشی برای دکمه: بله
- اندازه: 20 پیکسل رومیزی، 18 پیکسل تبلت، 16 پیکسل تلفن
- رنگ متن: #000000
تغییر دادن رنگ پس زمینه سفید شده و Border Width و Radius را روی 0px قرار دهید.
- رنگ پس زمینه: #ffffff
- عرض حاشیه تک دکمه: 0 پیکسل
- شعاع حاشیه یک دکمه: 0 پیکسل
تغییر دادن فونت از اینتر و وزن بولد.
سپس نماد دلخواه خود را انتخاب کنید، رنگ را به سیاه تغییر دهید، محل قرارگیری دکمه را در سمت چپ قرار دهید و نمایش نماد فقط روی ماوس را برای دکمه یک غیرفعال کنید.
- نماد: انتخاب شما
- رنگ نماد: #000000
- مکان نماد یک دکمه: سمت چپ
- نمایش نماد فقط در حالت شناور برای دکمه اول: خیر
در نهایت، به دکمه یک بروید پد تنظیمات. ما از Padding های مختلف برای هر اندازه صفحه استفاده خواهیم کرد. برای دسکتاپ از 20 پیکسل برای بالا و پایین و 40 پیکسل برای چپ و راست استفاده کنید. برای تبلت‌ها، بالشتک بالا و پایین را به 16 پیکسل تغییر دهید. در تلفن‌ها، بالشتک بالا و پایین را به 12 پیکسل تغییر دهید. آستر چپ و راست را برای هر سه یکسان بگذارید.
- پد دسکتاپ: 20 پیکسل بالا و پایین، 40 پیکسل چپ و راست
- پد تبلت: 16 پیکسل بالا و پایین، 40 پیکسل چپ و راست
- بالشتک تلفن: 12 پیکسل بالا و پایین، 40 پیکسل چپ و راست
دکمه دو
در نهایت، به پایین بروید دکمه دو. انتخاب کنید از سبک های دکمه سفارشی استفاده کنید. اندازه فونت را برای رایانه های رومیزی 20 پیکسل، برای تبلت ها 19 پیکسل و برای گوشی ها 16 پیکسل تنظیم کنید. رنگ متن را به سفید تغییر دهید.
- استفاده از سبک های سفارشی برای دکمه: بله
- اندازه: 20 پیکسل رومیزی، 18 پیکسل تبلت، 16 پیکسل تلفن
- رنگ متن: #ffffff
تغییر دادن رنگ پس زمینه به #ff5a17. Border Width و Radius را روی 0px قرار دهید.
- رنگ پس زمینه: #ff5a17
- عرض هر دو حاشیه دکمه: 0 پیکسل
- شعاع هر دو حاشیه دکمه: 0 پیکسل
سپس تغییر دهید فونت از اینتر و وزن بولد.
نماد دلخواه خود را انتخاب کنید. رنگ را به سیاه تغییر دهید، محل قرارگیری دکمه را در سمت چپ قرار دهید و نماد نمایش فقط روی ماوس را برای دکمه دو غیرفعال کنید.
- نماد: انتخاب شما
- رنگ نماد: #000000
- مکان نماد دکمه دو: سمت چپ
- نمایش نماد فقط در حالت شناور برای دکمه دو: خیر
در نهایت به سمت پایین اسکرول کنید تا دکمه دو را انتخاب کنید پد تنظیمات. برای دسکتاپ از 20 پیکسل برای بالا و پایین و 40 پیکسل برای چپ و راست استفاده کنید. در تبلت‌ها، بالشتک بالا و پایین را به 16 پیکسل تغییر دهید. برای گوشی‌ها، بالشتک بالا و پایین را به 12 پیکسل تغییر دهید. ماژول را ببندید و کار خود را ذخیره کنید.
- پد دسکتاپ: 20 پیکسل بالا و پایین، 40 پیکسل چپ و راست
- پد تبلت: 16 پیکسل بالا و پایین، 40 پیکسل چپ و راست
- بالشتک تلفن: 12 پیکسل بالا و پایین، 40 پیکسل چپ و راست
نتایج هدر تمام صفحه
در اینجا هدر تمام عرض ما در دسکتاپ، رایانه لوحی و تلفن به نظر می رسد.
دسکتاپ
تبلت
تلفن
به فکر ایجاد یک هدر تمام صفحه با ماژول هدر تمام عرض Divi پایان دهید
این نگاه ما به نحوه ایجاد هدر تمام صفحه با ماژول هدر Divi Fullwidth است. این فرآیند ساده است و در هر دستگاهی عالی به نظر می رسد. افزودن دکمه اسکرول به پایین تصویری عالی است که به کاربران نشان می دهد که می توانند اسکرول کنند. طراحی هدر تمام صفحه مشابه طراحی بخش قهرمان است. پیروی از چند دستورالعمل ساده می تواند به شما در ایجاد هدرهای تمام صفحه شگفت انگیز با ماژول Divi Fullscreen Header کمک کند.
ما می خواهیم از تو بشنویم. آیا Divi Fullwidth Header خود را تمام صفحه ساختید؟ در نظرات به ما اطلاع دهید.