سایدبار شناور چسبنده در المنتور، در این مقاله از سایت کنترل وب، یک ساید بار ساده رو بدون هیچ افزونه ای و فقط به کمک المنتور پرو، به یک سایدبار شناور چسبنده در المنتور تبدیل می کنیم. منظورمون از یک سایدبار شناور چسبنده در المنتور، اینه که سایدبار مورد نظر علاوه بر اینکه خاصیت چسبندگی به المان های مختلف صفحه( مثل هدر) رو داره، میتونه تا قسمت دلخواهی از سایت این خاصیت چسبندگی و ثابت بودن بودن رو حفظ کنه و از یه جایی به بعد، همراه با بقیه المان های صفحه اسکرول بشه و به پایین بره.
بنابراین با داشتن یک سایدبار شناور چسبنده در المنتور، می تونیم کاری کنیم که سایدبار روی قسمت هایی که میخوایم( مثل فوتر صفحه ) نیاد و جایی که لازم نیست به صورت ثابت قرار نگیره و جلوی المان دیگه رو نگیره و انقدر چسب نباشه!!! اینجوری میتونین تجربه کاربری بهتری رو هم برای کاربران سایتتون به وجود بیارید.
به طور کلی استفاده از سایدبار ها ( یا همون نوارهای کنار صفحه) در صفحات سایت خیلی کاربرد داره. زمانی که میخوایم کاربر سایتمون همیشه به محتواهایی از قسمت های مختلف سایت دسترسی داشته باشن سایدبار ها میتونن اینکار رو در یک صفحه برامون انجام بدن. مخصوصا اگر این محتوا، محتوایی باشه که می خوایم کاربرمون با کلیک کردن روی اون ترغیب به مشاهده محتوا هایی بشه که برامون مهمترن. حالا این محتوا میتونه تبلیغات، مقالات مرتبط تر به مقالمون، دوره ها و .. باشه. حالا که انقدر سایدبار ها میتونن کاربردی باشن، چقدر بهتر که بتونیم رو اونها کنترل داشته باشیم و یک سایدبار ساده رو به یک سایدبار شناور چسبنده در المنتور تبدیل کنیم.بزنیم بریم کارو شروع کنیم!
برای شروع ساخت سایدبار شناور چسبنده در المنتور، باید به ستونی که سایدبار در اون طراحی شده، کلاس سی اس اسی اختصاص بدیم تا بتونیم با استفاده از سلکتورهای سی اس اس (selector)، روی اونها کنترل داشته باشیم.
بنابراین در ستونی که سایدبار توی اون قرار گرفته شده،با کلیک راست روی ستون ویرایش ستون رو میزنیم. در قسمت پیشرفته، کلاس های css ، یک اسم دلخواه اختصاص بدیم تا بتونیم با سلکتور های css به اون دسترسی داشته باشیم. اگر دقیقا میخواین از کد ما استفاده کنین، مقدار sticky-section-wrapper رو قرار بدین.
در روش ساخت سایدبار شناور چسبنده در المنتور بدون افزونه، سایدبار مد نظر سایدباریه که محتوای اون درون یک بخش داخلی ساخته شدن. بنابراین توی قدم بعدی، دقیقا مثل قدم قبلی آموزش، در قسمت ویرایش بخش داخلی(بخش داخلی که درون ستون سایدبار قرار گرفته)،مثل مرحله قبل، کلاس css مربوط به خودش رو تنظیم میکنیم. برای اینکار مقدار sticky-section رو قرار میدیم.
حالا توی قدم بعدی باید کد های سی اس اس رو به اولین بخش داخلی که توی ستون سایدبارمون قرار دادیم، اختصاص بدیم. توجه کنین که توی این روش سایدبار طراحی شده توی یک ستون طراحی میشه و همه محتویات این سایدبار، توی یک بخش داخلی طراحی میشن. حالا توی این بخش داخلی میتونه محتویات و المان های دیگر المنتور و یا بخش داخلی دیگه ای قرار بگیره. بنابراین حواستون باشه که منظورمون در اینجا از بخش داخلی موردنظر که باید کد سی اس اس به اون اختصاص داده باشه، بخش داخلی اولی هست که داخل ستون قرار داده شده. حالا که این بخش رو شناسایی کردین،در قسمت ویرایش اون بخش داخلی، از قسمت پیشرفته، سی اس اس سفارشی(custom css)، کد های سی اس اسی که در ادامه براتون قرار میدیم رو بذارین.
امیدوارم که تونسته باشین از این آموزش نهایت استفاده رو داشته باشین و لذن ببرید و بتونین سایدبار های سایتتون رو جذاب تر کنین و با اینکار تاثیر بیشتری رو روی مخاطب خودتون داشته باشین وبتونین تجربه رابط کاربری بهتری رو به کاربران سایتتون هدیه بدین.
قطعه کد سی اس اس:
.sticky-section-wrapper .elementor-widget-wrap
{
display: block !important;
}
.sticky-section-wrapper .sticky-section
{
position: sticky;
top:0;
}
14 پاسخ
سلام
در سایت من قسمت بخش داخلی نداره چیکار باید بکنم بنظرتون؟
سلام. ویجت بخش داخلی از جمله ویجت هایی هست که در المنتور رایگان هم وجود داره. مطمین بشین که نسخه المنتور به اخرین نسخه آپدیت هست. اگر مشکلتون حل نشد احتمالا ایراد از تداخل افزونه های سایتتون هست.
بخش داخلی داره در آن یکی از ستون ها ولی این ستون من چون داخلش عکس و دکمه هست بخش داخلی نداره
راهکار چی هست بنظرتون؟
این قابلیت روی المان بخش داخلی وجود داره، توی طراحیتون می تونین قسمت هایی که گفتین رو در یک بخش داخلی طراحی کنید. اگر نیاز بود که یک بخش داخلی رو داخل دیگری بندازین آموزشش توی پیج اینستامون هست. اگر در طراحیتون امکان استفاده از بخش داخلی وجود نداشت، می تونین از افزونه استفاده کنین. افزونه JetSticky For Elementor و یا Elementor Extras این قایلیت رو براتون فراهم می کنن. اگر باز مشکل حل نشد تصویری از موردی که قصد طراحی دارین رو دایرکت پیج اینستاگرام بفرستین تا بررسی کنیم.
دمت گرم
خیلی خوب بود
خیلی خوشحالیم که مورد استفاده قرار گرفت دوست عزیز
سلام من تو قسمت خود المنتور کار میکنه ولی روی سایت کد عمل نمیکنه
سلام
ممکنه در سایت محتوا کش شده باشه و به شما محتوای کش شده قبلی رو نشون میده. کش مرورگر رو پاک کنین احتمالا مشکل حل بشه.
دمت گرم عالی بود این آموزش خیلی دنبالش بودم
خوشحالیم که مورد استفاده قرار گرفت دوست عزیز
عالی داداش دمت گرم
خیلی وقته دنبال همچین چیزی بودم
خوشحالیم که مورد استفاده قرار گرفت دوست عزیز
مرسی از آموزش خوبتون
مشکلم راحت توی چند ثانیه حل شد.
خوشحالیم که مورد استفادتون قرار گرفت