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

Share

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print
سربرگ چسبان با المنتور

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

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

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

  • ایجاد سربرگ شفاف
  • انیمیشن های انتقال با استفاده از 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; }
}

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

 

امتیاز دهید

اشتراک گذاری

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email

آخرین مقالات

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

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

برچسب ها

لینک کوتاه

https://elementorfa.ir/?p=10524

فهرست مطالب

Avatar
چریک در 15:14

سلام من افزونه المنتور پرو رو همراه با افزونه های jet blocks – jet blog – jet elements – jet menu – jet tabs – JetEngine کامل نصب کردم ولی وقتی میخام قالب جدید ایجاد کنم قسمت اول که نوع قالب رو انتخاب میکنیم
فقط دو گزینه “صفحه” و بخش(سکشن) میاد برام. امکانش هست یه راهنمایی کنید ممنون میشم

پاسخ
المنتور فارسی
المنتور فارسی در 18:24

با سلام
این مورد فقط و فقط با نصب نبودن افزونه المنتور پرو اتفاق میافته.
نسخه المنتور پرو تون چنده ؟

پاسخ
Avatar
کیوان در 19:26

با سلام
من توی بخش قالب های جدید از منو کشویی که باید انتخاب کنم وقتی باز می کنم هیچی نشون نمیده؟؟؟؟

پاسخ
المنتور فارسی
المنتور فارسی در 19:27

با سلام
هیچ موردی رو نشون نمیده یا فقط سربرگ رو نشون نمیده؟

پاسخ
Avatar
چریک در 15:16

منم دقیقا این مشکل رو دارم با این تفاوت که دو گزینه “صفحه” و “بخش(سکشن)” رو دارم تو منو

پاسخ

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

4 × یک =

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