ساخت سربرگ جذاب در المنتور (افکت اسکرول خلاقانه)

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

در این آموزش ، من به شما نشان می دهم که چگونه با استفاده از GSAP و ScrollTrigger (ویژگی های افزونه ای که نصب می کنیم.) اثر “پنهان و ظاهر شدن هدر با اسکرول صفحه” را در المنتور ایجاد کنید. به افزونه Elementor PRO نیازی نیست! فقط کافیست که ادامه آموزش را همراه ما باشید یا ویدئوی آموزشی را مشاهده کنید.

در این آموزش به پیش نیازهایی احتیاج داریم که در زیر لیست این پیش نیاز ها رو برای شما قرار دادیم تا بتوانید همه این افزونه های مورد نیاز را نصب کنید : 

[irinfobox]در این آموزش ما به هیج افزونه پولی یا پریمیومی احتیاج نداریم و فقط کافیست که افزونه های زیر که رایگان هستند را نصب کنید و ادامه آموزش را مشاهده کنید و لذت ببرید.[/irinfobox]

•  افزونه المنتور نسخه رایگان
• افزونه OoohBoi Steroids for Elementor

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

تنظیمات افزونه

بعد از اینکه افزونه “OoohBoi Steroids for Elementor” را نصب کردید در پیشخوان وردپرس گزینه‌ای به نام “Steroids for Elementor” اضافه می‌شود که باید بر روی این گزینه کلیک کنید : 

 سپس به تب و زبانه “Manage JS Libraries”  بیاید و در پایین صفحه گزینه های “GSAP” و “GSAP – SCROLL TRIGGER”  را فعال کنید.

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

ویرایش سربرگ در المنتور

 حالا باید سکشن یا همان بخش اصلی سربرگ را انتخاب کنید ( یعنی همان بخشی که می خواهیم به صورت افکت اسکرول رو نمایش داده شود ) و سپس به تنظیمات پیشرفته افزونه المنتور مراجعه کنید برای این منظور ما در تصویر زیر همه این مراحل را مرحله بندی کرده ایم که می توانید از تصویر زیر استفاده کنید.

سپس در بخش شناسه css عبارت “irelementor-header”  را وارد کنید. با این کار ما یک آیدی و یا شناسه برای سکشن خود انتخاب کردیم.

 اضافه کردن کدهای مورد نظر

 حالا در این مرحله نوبت به می رسد که بخواهیم کدهایی را که آماده کرده ایم را درون المنتور به صورت سفارشی وارد کنیم. برای این منظور در پیشخوان وردپرس به منوی المنتور » Custom Code یا کدهای سفارشی مراجعه کنید.

سپس در صفحه باز شده بر روی دکمه “افزودن کد سفارشی جدید” کلیک کنید.

حالا همانند تصویر بالا عمل کنید و بعد از کپی کردن کدهای زیر در بخش کدها بر روی دکمه انتشار کلیک کنید، سپس در صفحه به صورت پاپ آپ باز میشود بدون هیچ کار اضافی بر روی دکمه “Save And Close”  کلیک کنید.

برای کپی کد ها میتوانید از کدهای زیر استفاده کنید و همه این کدها را کپی کنید و در بخش مورد نظر قرار دهید.

<style>
body:not(.elementor-editor-active) #irelementor-header {
	position: fixed;
  	z-index: 999;
  	width: 100%;
}
</style>
<script>
;( function() {

  // wait until gsap & ScrollTrigger available
  let chck_if_gsap_loaded = setInterval( function() {
    
    if( window.gsap && window.ScrollTrigger ) {
      
      // register scrolTrigger
      gsap.registerPlugin( ScrollTrigger );

      // ... do your thing
      show_hide_header();

      // clear interval
      clearInterval( chck_if_gsap_loaded ); 
      
    }
    
  }, 500 );
  
  function show_hide_header() {
  
    const site_header = document.querySelector( "#irelementor-header" );
    
    const show_hide_header = gsap.from( site_header, {
    
    	yPercent: -100, 
      	duration: 0.25, 
      	ease: "sine.out", 
    
    } ).progress( 1 );
    
    ScrollTrigger.create( {
    
    	start: "top top-=" + 100, 
      	onUpdate: ( self ) => {
        
        	if( self.direction === -1 ) show_hide_header.play();
          	else show_hide_header.reverse();
        
        }
    
    } );
  	
  }
  
} )();
</script>

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

? فیلم آموزشی

نتیجه گیری

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