منو سایت

  • خانه
  • وبلاگ
  • چگونه ماژول هدر Divi Fullwidth خود را تمام صفحه بسازیم

چگونه ماژول هدر Divi Fullwidth خود را تمام صفحه بسازیم

 تاریخ انتشار :
/
  وبلاگ

هدرهای تمام صفحه بدون در نظر گرفتن اندازه صفحه بازدیدکننده، کل صفحه را اشغال می کنند. این برای جلب توجه کاربران عالی است. همچنین برای سوق دادن آنها به سمت فراخوان شما عالی است. خوشبختانه، ساخت هدر تمام صفحه با ماژول هدر تمام عرض Divi آسان است. در این پست به شما نشان خواهیم داد که چگونه یک هدر با عرض کامل ایجاد کنید، آن را تمام صفحه کنید و به آن استایل دهید. شما می توانید از این روش برای ایجاد یک بخش کاراکتر تمام صفحه سفارشی برای صفحات خود استفاده کنید!

بیا شروع کنیم.

پیش نمایش هدر در تمام صفحه

بیایید پیش نمایشی از آنچه در این آموزش می سازیم را ببینیم.

دسکتاپ

چگونه Divi Fullwidth Header خود را به صورت تمام صفحه بسازیم

تبلت

چگونه Divi Fullwidth Header خود را به صورت تمام صفحه بسازیم

تلفن

چگونه Divi Fullwidth Header خود را به صورت تمام صفحه بسازیم

چرا یک هدر تمام صفحه با ماژول هدر تمام عرض Divi ایجاد کنیم؟

قبل از اینکه درباره نحوه ایجاد یک هدر تمام صفحه صحبت کنیم، اجازه دهید در مورد اینکه چرا کاربران Divi ممکن است آن را بخواهند صحبت کنیم.

یک هدر تمام صفحه، عناصر خاصی را در یک بخش حاوی نمایش می دهد. این بخش این عناصر را در یک چیدمان تمیز ارائه می دهد که چشم نواز و چند وظیفه ای است.

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

دوم، می تواند طراحی جالبی را به کاربر ارائه دهد تا او را در وب سایت نگه دارد. وب سایت ها فقط چند ثانیه فرصت دارند تا توجه بازدیدکنندگان را جلب کنند.

هنگام ایجاد هدر تمام صفحه باید به چند نکته توجه داشته باشید:

  • از شیوه های رایج طراحی برای رنگ ها و فونت ها پیروی کنید. اطمینان حاصل کنید که آنها خوانا و متناسب با موضوع وب سایت شما هستند.
  • طراحی را ساده و تمیز نگه دارید. از تصاویر، پیوندها یا دکمه های زیاد استفاده نکنید. روی چند چیز تمرکز کنید. کمتر، بیشتر است.
  • مطمئن شوید که هدر تمام صفحه پاسخگو باشد. یک هدر تمام صفحه باید عالی به نظر برسد و در تمام اندازه های صفحه به درستی کار کند.

چگونه هدر Divi با عرض کامل را به عنوان یک هدر تمام صفحه تبدیل کنیم

با افزودن یک بخش با عرض کامل به صفحه ای که روی آن کار می کنید شروع کنید. سپس a را اضافه کنید ماژول هدر عرض کامل به بخش عرض کامل

چگونه هدر Divi با عرض کامل را به عنوان یک هدر تمام صفحه تبدیل کنیم

تنظیمات ماژول باز می شود. تب Design را انتخاب کنید. گزینه فراخوانی شده را فعال کنید آن را تمام صفحه کنید.

چگونه هدر Divi با عرض کامل را به عنوان یک هدر تمام صفحه تبدیل کنیم

اکنون یک هدر تمام صفحه داریم. خیلی ساده است.

نماد اسکرول پایین را در هدر تمام صفحه فعال کنید

نماد اسکرول پایین را در هدر تمام صفحه فعال کنید

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

در تنظیمات ماژول، بخشی به نام 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 پیکسل

چگونه ماژول هدر Divi Fullwidth خود را تمام صفحه بسازیم

سپس تغییر دهید فونت از اینتر و وزن بولد.

تنظیمات ماژول هدر تمام صفحه

نماد دلخواه خود را انتخاب کنید. رنگ را به سیاه تغییر دهید، محل قرارگیری دکمه را در سمت چپ قرار دهید و نماد نمایش فقط روی ماوس را برای دکمه دو غیرفعال کنید.

  • نماد: انتخاب شما
  • رنگ نماد: #000000
  • مکان نماد دکمه دو: سمت چپ
  • نمایش نماد فقط در حالت شناور برای دکمه دو: خیر

چگونه ماژول هدر Divi Fullwidth خود را تمام صفحه بسازیم

در نهایت به سمت پایین اسکرول کنید تا دکمه دو را انتخاب کنید پد تنظیمات. برای دسکتاپ از 20 پیکسل برای بالا و پایین و 40 پیکسل برای چپ و راست استفاده کنید. در تبلت‌ها، بالشتک بالا و پایین را به 16 پیکسل تغییر دهید. برای گوشی‌ها، بالشتک بالا و پایین را به 12 پیکسل تغییر دهید. ماژول را ببندید و کار خود را ذخیره کنید.

  • پد دسکتاپ: 20 پیکسل بالا و پایین، 40 پیکسل چپ و راست
  • پد تبلت: 16 پیکسل بالا و پایین، 40 پیکسل چپ و راست
  • بالشتک تلفن: 12 پیکسل بالا و پایین، 40 پیکسل چپ و راست

چگونه ماژول هدر Divi Fullwidth خود را تمام صفحه بسازیم

نتایج هدر تمام صفحه

در اینجا هدر تمام عرض ما در دسکتاپ، رایانه لوحی و تلفن به نظر می رسد.

دسکتاپ

چگونه Divi Fullwidth Header خود را به صورت تمام صفحه بسازیم

تبلت

چگونه Divi Fullwidth Header خود را به صورت تمام صفحه بسازیم

تلفن

چگونه Divi Fullwidth Header خود را به صورت تمام صفحه بسازیم

به فکر ایجاد یک هدر تمام صفحه با ماژول هدر تمام عرض Divi پایان دهید

این نگاه ما به نحوه ایجاد هدر تمام صفحه با ماژول هدر Divi Fullwidth است. این فرآیند ساده است و در هر دستگاهی عالی به نظر می رسد. افزودن دکمه اسکرول به پایین تصویری عالی است که به کاربران نشان می دهد که می توانند اسکرول کنند. طراحی هدر تمام صفحه مشابه طراحی بخش قهرمان است. پیروی از چند دستورالعمل ساده می تواند به شما در ایجاد هدرهای تمام صفحه شگفت انگیز با ماژول Divi Fullscreen Header کمک کند.

ما می خواهیم از تو بشنویم. آیا Divi Fullwidth Header خود را تمام صفحه ساختید؟ در نظرات به ما اطلاع دهید.