طراحی سربرگ چسبنده با المنتور

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

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

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

مواردی که در ادامه یاد میگیریم:

  • ایجاد سربرگ شفاف
  • انیمیشن های انتقال با استفاده از CSS
  • تغییر ارتفاع سربرگ هنگام اسکرول

طراحی سربرگ چسبان با استفاده از المنتور

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

 

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

مرحله 2: در این مرحله طراحی سربرگ را انجام داده و طبق آموزش، شرایط نمایش را تنظیم کنید.

بخوانید : چگونه یک سربرگ سفارشی با المنتور بسازیم ؟

مرحله 3: روی بخش اصلی راست کلیک کرده و به تب پیشرفته بروید.

 

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

 

تب پیشرفته

موشن افکت

شناور: برای چسبان بودن سربرگ یکی از گزینه های بالا و پایین را انتخاب کنید.

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

افست: تنظیم تعداد پیکسل هایی قبل از چسبان شدن سربرگ.

افکت افست: تنظیم تعداد پیکسل هایی قبل از نمیاش انیمیشن اسکرول

توجه : افکت افست فقط زمانی که از CSS سفارشی استفاده کرده باشید نمایش داده می شود.

CSS سفارشی

افزودن CSS سفارشی در تب پیشرفته. در زیر نمونه ای از پس زمینه، سربرگ شفاف و ارتفاع با انیمیشن را مشاهده می کنید.

selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important }

selector{ transition: background-color 4s ease !important; }

selector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }

selector > .elementor-container{ transition: min-height 1s ease !important; }

 

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

 

نظرات ارزشمند خود را به اشتراک بگذارید

هفت − دو =

امتیاز دهید

طراحی سربرگ چسبنده با المنتور
5 (100%) 1 vote
اشتراک گذاری در facebook
اشتراک گذاری در telegram
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در whatsapp
اشتراک گذاری در pinterest

آخرین محصولات

نیاز به کمک دارید؟ پیام دهید