هنگام ایجاد هدر جهانی، موارد زیادی وجود دارد که باید در نظر بگیرید. عناصری که در هدر خود قرار می دهید باید به شما کمک کند آخرین بازدید برای پیمایش آسان برای کاهش زمانی که مردم صرف مرور می کنند، بسیاری از طراحان وب هدر بالای ثابتی را انتخاب می کنند که اجازه می دهد آخرین بازدید برای دسترسی فوری به صفحات یا انتشارات دیگر. این واقعاً مفید است، اما هنگام ایجاد یک هدر ثابت، ارتفاع بیشتر نمای شماست آخرین بازدید مشغول است که کمتر از محتویات برای نمایش یکباره اگر برای این فداکاری آماده نیستید، بدانید که مجبور نیستید. شما می توانید از مزایای یک هدر ثابت بهره مند شوید و به هدر کلی خود اجازه دهید زمانی که بازدیدکنندگان به سمت بالا حرکت می کنند نشان داده شود و زمانی که به پایین اسکرول می کنند آن را پنهان می کند. امروز ما شما را با استفاده از Divi's Theme Builder از طریق مخفی کردن و آشکار کردن هدر جهانی خود راهنمایی می کنیم.

بررسی

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

1. به Divi Theme Builder رفته و الگوی جدیدی اضافه کنید

با رفتن به Divi Theme Builder شروع کنید.

شروع به ایجاد یک هدر جهانی

در آنجا ، روی "Add Global Header" کلیک کنید و "Create Global Header" را انتخاب کنید.

2. ایجاد یک هدر جهانی

تنظیمات بخش

رنگ پسزمینه

در داخل ویرایشگر الگو ، متوجه بخشی خواهید شد. این بخش را باز کنید و رنگ پس زمینه آن را تغییر دهید.

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

اندازه

به برگه طراحی بروید و عرض 100٪ را به بخش بعدی خود اختصاص دهید.

• عرض: 100٪

فاصله

همچنین بالشتک سفارشی بالا و پایین را اضافه کنید.

• بالشتک بالایی: 2vw
• بالشتک پایین: 2vw

جعبه سایه

ما همچنین یک سایه ظریف به بخش خود اعمال خواهیم کرد.

• قدرت سایه جعبه مقاومت: 50 پیکسل
• رنگ سایه: rgba (0,0,0,0,08،XNUMX،XNUMX،XNUMX،XNUMX)

شناسه CSS

بعداً در این آموزش ، ما برای ایجاد جلوه پیمایشی به کد سفارشی نیاز خواهیم داشت. برای آماده شدن برای این کار ، یک شناسه CSS به بخش اضافه می کنیم.

• CSS ID: بخش سربرگ جهانی

عنصر اصلی

ما همچنین با افزودن دو خط کد CSS به عنصر اصلی بخش ، این بخش را به یک هدر ثابت تبدیل خواهیم کرد.

position: fixed;top: 0;

صفحه اول Z

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

• فهرست Z: 99999

یک خط جدید اضافه کنید

ساختار ستون

پس از اتمام تمام تنظیمات بخش ، با اضافه کردن ساختار ستون زیر ، یک ردیف جدید به بخش اضافه کنید:

اندازه

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

• از عرض روده ای سفارشی استفاده کنید: بله
• عرض روده: 1
• برابری ارتفاعات ستون: بله
• عرض: 100٪
• حداکثر عرض: 100٪

فاصله

همچنین همه بالشتک های پیش فرض بالا و پایین را بردارید.

• بالشتک بالایی: 0px
• بالشتک پایین: 0px

عنصر اصلی

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

display: flex;align-items: center;

ماژول ردیابی رسانه های اجتماعی را به ستون 2 اضافه کنید

شبکه های اجتماعی را اضافه کنید

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

تنظیم مجدد سبک های فردی رسانه های اجتماعی

با بازنشانی سبک های هر شبکه اجتماعی به سطح فردی ، ادامه دهید.

یک فضای شبکه اجتماعی جداگانه اضافه کنید

همچنین باید تنظیمات مربوط به هر شبکه اجتماعی را به صورت جداگانه باز کرده و padding پایین را در تنظیمات فاصله اضافه کنید.

• بالشتک پایین: 0.5vw

هم ترازی

پس از اینکه به طور جداگانه پد پایین را به هر شبکه اجتماعی اضافه کردید ، به تنظیمات عمومی mod خود برگردید. به برگه طراحی بروید و تراز ماژول را تغییر دهید.

• ترتیب ماژول: مرکز

تنظیمات پیش فرض نماد

همچنین رنگ نماد را در تنظیمات نماد تغییر دهید.

• رنگ نماد: # 000000

تنظیمات نماد شناور را لمس کنید

و رنگ نماد شناور را تغییر دهید.

• رنگ نماد: # c2ab92

مرز

با افزودن حاشیه پایین در تنظیمات حاشیه ، تنظیمات ماژول را کامل کنید.

• عرض مرز پایین: 1px
• رنگ حاشیه پایین: # 000000

ماژول منو را به ستون 2 اضافه کنید

منو را انتخاب کنید

بیایید به ستون بعدی برویم! یک ماژول منو اضافه کنید و یک منو به دلخواه خود انتخاب کنید.

لوگو را دانلود کنید

سپس یک آرم در ماژول بارگذاری کنید.

رنگ پس زمینه را حذف کنید

و رنگ زمینه را بردارید.

وضع

سپس به تب Design بروید و مطمئن شوید که تنظیمات زیر برای طرح اعمال می شوند:

• سبک: محور
• مسیر منوی کشویی: پایین

متن منوی پیش فرض

با تغییر تنظیمات متن منو به شرح زیر ادامه دهید:

• رنگ پیوند فعال: # c2ab92
• فونت منو: Cormorant Garamond
• رنگ متن: # 000000
• اندازه متن منو: 1vw (دسک تاپ) ، 2vw (رایانه لوحی) ، 3vw (تلفن)

متن فهرست شناور را لمس کنید

متن فهرست را در شناور ویرایش کنید.

• رنگ متن منو: # c2ab92

منوی کشویی

سپس رنگ تنظیمات منوی کشویی را در تنظیمات منوی کشویی تغییر دهید.

• رنگ خط منوی کشویی: # 000000

آیکون های

ما همچنین در تنظیمات نماد در حال تغییر رنگ نماد منوی همبرگر هستیم.

• رنگ نماد منوی همبرگر: # 000000

اندازه

با تغییر حداکثر عرض آرم در اندازه های مختلف صفحه در تنظیمات اندازه ادامه دهید.

• حداکثر عرض آرم: 5vw (میز) ، 10vw (رایانه لوحی) ، 13vw (تلفن)

فهرست CSS Link

و تنظیمات ماژول را با اضافه کردن دو خط کد CSS به پیوند منوی ماژول در برگه پیشرفته ، کامل کنید.

padding-bottom: 1vw;border-bottom: 1px solid #000;

ماژول متن را به ستون 3 اضافه کنید

یک کپی اضافه کنید

بیایید به ماژول آخر برویم! در آنجا تنها ماژول مورد نیاز ما یک ماژول متن است.

اضافه کردن یک لینک

این ماژول به عنوان CTA عمل خواهد کرد. پیوند دلخواه خود را اضافه کنید.

• URL پیوند ماژول: #

تنظیمات پیش فرض متن

به برگه طراحی ماژول بروید و متناسب با آن تنظیمات متن را تغییر دهید:

• قلم متن: Cormorant Garamond
• رنگ متن: # 000000
• اندازه متن: 1vw (دسک تاپ) ، 2vw (رایانه لوحی) ، 3vw (تلفن)

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

رنگ متن را در حالت شناور تغییر دهید.

• رنگ متن: # c2ab92

اندازه

با تغییر پارامترهای اندازه ماژول در اندازه های مختلف صفحه ادامه دهید.

• عرض: 12vw (دسک تاپ) ، 18vw (رایانه لوحی) ، 22vw (تلفن)
• ترتیب ماژول: مرکز

فاصله

و در تنظیمات فاصله مقداری بالشتک پایین اضافه کنید.

• بالشتک پایین: 0.5vw

مرز

با افزودن حاشیه پایین ، پارامترهای ماژول را کامل کنید.

• عرض مرز پایین: 1px
• رنگ حاشیه پایین: # 000000

ماژول کد را به ستون 2 اضافه کنید

کد JQuery و CSS را وارد کنید

هنگامی که به حالتهای مختلف در حالت ردیف رسیدید ، زمان آن فرا رسیده است که اثر آشکار / پنهان اتفاق بیفتد. برای این کار باید کد سفارشی را به یک ماژول کد اضافه کنیم که در ستون 2 قرار خواهیم داد. این کد در هر بخشی که اضافه کنید کار خواهد کرد ، صرف نظر از اینکه هدر یا ماژول ها را چگونه طراحی می کنید. که استفاده می کنید ، فقط مطمئن شوید که شناسه CSS را به بخش خود اضافه کرده اید. همانطور که در صفحه چاپ زیر نشان داده شده ، کد JQuery را بین برچسب های اسکریپت و کد CSS را بین برچسب های سبک قرار دهید.

jQuery(function($){ var topPosition = $(window).scrollTop(); $(window).scroll(function() {var scrollMovement = $(window).scrollTop();if(scrollMovement > topPosition) {$('#global-header-section').slideUp();} else {$('#global-header-section').slideDown();}topPosition = scrollMovement;}); });

main-content{margin-top: 7vw;}

3. تغییرات ژنراتور را ذخیره کرده و نتیجه را نمایش دهید

پس از تکمیل هدر سراسری، تمام تغییرات را ذخیره کرده و نتیجه را در خود مشاهده کنید وب سایت!

بررسی

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

آخرین افکار

در این مقاله ، ما به شما نشان داده ایم که چگونه Global Header خود را هنگام پیمایش به بالا نشان داده و هنگام پیمایش به پایین آن را پنهان کنید. این یک روش محبوب و م toثر برای کمک به بازدیدکنندگان شما است که بدون گرفتن بخشی از ارتفاع پنجره آنها ، به راحتی حرکت می کنند. همچنین می توانید فایل JSON را به صورت رایگان بارگیری کنید! اگر س anyال یا پیشنهادی دارید ، در صورت تمایل در قسمت نظرات زیر نظر دهید.