جستجو برای:
  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ
 
کنترل وب
دسترسی سریع
  • طراحی سایت
  • المنتور
  • وردپرس
  • ووکامرس
0

ورود و ثبت نام

  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ

بلاگ

کنترل وببلاگویدئوسربرگ دوم چسبان در المنتور

سربرگ دوم چسبان در المنتور

https://ctrlweb.ir/wp-content/uploads/2022/05/سربرگ-دوم-چسبان-در-المنتور.mp4

سربرگ دوم چسبان در المنتور، سربرگ ها توی صفحه های هر سایتی از جایگاه ویژه ای برخوردان. سربرگ ها علاوه بر اینکه منوی سایت رو دارن و کاربر رو به قسمت های مختلف سایتمون هدایت می کنن، میتونن اطلاعات برند ما مثل شماره تماس، لوگو و سایر اطلاعات رو با خودشون به همراه داشته باشن. بنابراین ممکنه که نیاز باشه چندین منو رو همزمان در یک صفحه از سایتمون داشته باشیم. بنابراین گاهی اوقات ممکنه که نیاز داشته باشین که علاوه بر  داشتن یک هدر(سربرگ)، سربرگ دومی داشته باشین که هنگام اسکرول کاربر در صفحه تون، از یه جایی به بعد سریرگ اول مخفی بشه و از یه جایی به بعد سربرگ دوم به عنوان هدر صفحه به کاربر نمایش داده باشه. به همین خاطر جالبه که بدونیم با چه ترفندی می تونیم سربرگ دوم چسبان در المنتور رو ایجاد کنیم. توی این مقاله از سایت کنترل وب، میخوایم با استفاده از چند خط کد ساده سی اس اس و المتور پرو، ساخت سربرگ دوم چسبان در المنتور رو آموزش بدیم تا با داشتن  سربرگ دوم چسبان در المنتور، منویی به جز منوی اول رو در هنگام اسکرول صفحه، به کاربر نمایش بدین.

برای ساخت سربرگ دوم چسبان در المنتور در قدم اول، باید دو تا سربرگ خودمونو در دو بخش مجزا زیر هم طراحی کنیم. برای این کار دو بخش(section) زیر هم میسازیم و هر کدوم از  سربرگ ها رو به سلیقه خودمون توی هر کدوم از این بخش ها طراحی می کنیم.

 

سربرگ-دوم-چسبان-در-المنتور-کنترل-وب

 

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

 

2 3

 

برای اینکه میخوایم قابلیت موردنظر رو با استفاده از کد سی اس اس ایجاد کنیم، در این مرحله باید نامی رو به عنوان نام کلاس سی اس اس، به بخش مورد نظر اختصاص بدیم تا در کد سی اس اس که در ادمه براتون قرار میدیم، بتونیم که قابلیت موردنظر رو روی بخش مربوطه اعمال کنیم. برای این کار در منوی ویرایش بخش، در بخش پیشرفته،قسمت کلاس های سی اس اس(css)، مقدار second-header رو اختصاص میدیم.

 

Screenshot 3

 

در قدم بعدی، کد های سی اس اسی که در ادمه براتون قرار می دیم رو، در قسمت پیشرفته، سی اس اس سفارشی(custom css) قرار بدین.

 

Screenshot 4

 

در قدم بعدی برای اینکه منوی دوم حالت چسبنده رو به خودش بگیره ، در قسمت پیشرفته همین بخش منوی دوم، قسمتی به نام موشن افکت(motion effect) وجود داره که در این قسمت یک قابلیتی به نام sticky وجو داره که با تنظیمات اون میتوین کاری کنین که قسمت موردنظر حالت چسبندگی رو به المان های صفحه پیدا کنه. برای اینکه می خوایم در قسمت بالای صفحه سربرگ دوممون نمایش داده بشه، بنابراین این مقدار رو روی Top تنظیم می کنیم.

Screenshot 5

 

 

Screenshot 6

 

در نهایت برای قدم اخر برای تکمیل طراحی، باید کاری کنیم که هدر دوم خاصیت مخفی شوندگی رو پیدا کنه تا وقتی که صفحه رو تا قسمت بالای صفحه اسکرول کردیم،هدر دوم مخفی بشه و فقط هدر اول رو داشته باشیم. برای اینکار در قسمت پیشرفته، در قسمت موشن افکت، قسمتی به نام effects offset وجود داره که با تنظیم اون به مقدار مناسب میتونین کاری کنین که دقیقا در لحظه ای که صفحه به سمت بالا اسکرول میشه و به سربرگ اول می رسیم، سربرگ دوم مخفی بشه.با توجه به طراحی ما، عدد 60px برای این قسمت مناسبه. باید توجه داشته باشین که این عدد باید با عددی که در قسمت top قسمت second-header اومده برابر باشه.

 

Screenshot 7

 

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

به همین راحتی! در چند مرحله تونستیم سربرگ دوم چسبان در المنتور رو به وجود بیاریم.امیدوارم این مطلب براتون مفید بوده باشه و تونسته باشیم یه قدم شما رو به طراحی ایده آل خودتون نزدیک تر کرده باشیم.

قطعه کد سی اس اس:

				
					.second-header{
  top: -60px!important;
  z-index: -1;
  transition: top 0.3s ease,opacity 0.3s ease !important;
  opacity: 0;
  
}

.second-header.elementor-sticky--effects{
 top: 0!important;
 z-index: 1!important;
 opacity: 1;
    
}
    
  
				
			
برای امتیاز به این نوشته کلیک کنید!
[کل: 1 میانگین: 5]
اشتراک گذاری:
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!
مطالب زیر را حتما بخوانید
  • لیست قیمت در المنتور - کنترل وب
    لیست قیمت در المنتور

    13 بازدید

  • z ایندکس در المنتور | کنترل وب
    z ایندکس در المنتور

    15 بازدید

  • تغییر عرض سکشن در المنتور-کنترل وب
    تغییر عرض سکشن در المنتور

    23 بازدید

  • ساخت خط عمودی در المنتور-کنترل وب
    ساخت خط عمودی در المنتور

    33 بازدید

  • ماسک در المنتور-کنترل وب
    ماسک (Mask) در المنتور

    35 بازدید

  • نصب وردپرس روی لوکال هاست (زمپ) - کنترل وب
    نصب وردپرس روی لوکال هاست (زمپ)

    48 بازدید

دیدگاهتان را بنویسید لغو پاسخ

جستجو برای:
دسته‌ها
  • آموزش المنتور
  • آموزش وردپرس
  • مقالات
  • ویدئو
نوشته‌های تازه
  • لیست قیمت در المنتور
  • z ایندکس در المنتور
  • تغییر عرض سکشن در المنتور
  • ساخت خط عمودی در المنتور
  • ماسک (Mask) در المنتور
لوگو کنترل وب

کنترل وب

مرجع آموزش هنر طراحی سایت

کنترل وب

مرجع آموزش هنر طراحی سایت

ما از سال 1398 در زمینه برنامه نویسی و طراحی سایت شروع به کار کردیم و امروز هدف ما این است تا مخاطبین ما بتوانند از زمان تصمیم به شروع یک کسب و کار اینترنتی تا رسیدن به فروش هر آن چیزی را که در این مسیر لذت بخش نیاز دارند به کمک ما در اختیار داشته باشند.

Telegram Instagram

دسترسی سریع

  • آموزش وردپرس
  • آموزش المنتور
  • آموزش ووکامرس
  • آموزش سئو
  • تریک css
  • آموزش وردپرس
  • آموزش المنتور
  • آموزش ووکامرس
  • آموزش سئو
  • تریک css

لینک های پر بازدید

  • ترفند المنتور
  • آموزش رایگان المنتور
  • دوره جامع وردپرس
  • آموزش html-css
  • مینی دوره آموزش وردپرس

جدید ترین آموزشها

لیست قیمت در المنتور

z ایندکس در المنتور

تغییر عرض سکشن در المنتور

ساخت خط عمودی در المنتور

ماسک (Mask) در المنتور

Telegram Instagram

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

لوگو کنترل وب
  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ
  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت