بعد از طراحی سایدبار، یکی از ویژگی هایی که شاید کاربران به آن نیاز داشته باشند، سایدبار شناور یا چسبان می باشد. ما در این آموزش قصد داریم تا با استفاده از افزونه جانبی Elementor Extras بخش سایدبار را به صورت شناور طراحی کنیم.
اگر در سایت خود هنوز سایدبار ایجاد نکرده اید، با استفاده از آموزش طراحی سایدبار با استفاده از المنتور یک سایدبار طراحی کنید و ادامه آموزش را دنبال کنید.
طراحی سایدبار شناور (چسبان) با استفاده از المنتور
در مرحله اول ابتدا به تنظیمات افزونه Elementor Extras رفته و گزینه Sticky Elements یا المنت های شناور را روشن کنید.
توجه: با روشن کردن این گزینه، ویژگی شناور افزونه المنتور پرو غیر فعال خواهد شد.
سپس به ویرایشگر المنتور رفته و در بخش سایدبار یک ویجت داخلی قرار دهید.
حالا باید تمامی ویجت های بخش سایدبار روداخل این بخش داخلی قرار دهید. در مرحله بعد بخش داخلی را به صورت شناور ایجاد می کنیم. به این صورت تمامی ویجت هایی که درون این بخش داخلی قرار بگیرند به صورت شناور خواهند بود.
خب حالا باید به تنظیمات بخش داخلی بریم و در تب پیشرفته، در تنظیمات افزونه Elementor Extras گزینه شناور را روشن کنیم.
بعد از روشن کردن گزینه شناور، تنظیمات را به شکل زیر وارد کنید.
معرفی فیلد های مختلف
ماندن
مادر: فقط در ستون اصلی که قرار دادرد شناور می شود.
بدنه برگه: از بالا تا انتهای صفحه شناور می شود. با روشن بودن این گزینه ممکن سایدبار به زیر فوتر برود.
غیز چسبنده
موبایل و تبلت: با قرار دادن روی این گزینه، سایدبار در موبایل و تبلت شناور نخواهد بود.
فقط موبایل: با قرار دادن روی این گزینه، سایدبار فقط در موبایل شناور نخواهد بود.
افست
افست بالا: فاصله حالت چسبنده از سربرگ هنگام اسکرول
افست پایین: فاصله حالت چسبنده از پایین هنگام رسیدن به فوتر
توجه کنید بعد از روشن کردن این گزینه، باید تراز عمودی ستون اصلی، روی گزینه بالا قرار گرفته باشد.
در نهایت می توانید نمونه طراحی شده با استفاده از افزونه المنتور و افزونه جانبی Elementor Extras را مشاهده کنید.
اگر نیاز به استفاده از قالب آماده این آموزش دارید، می توانید از طریق لینک زیر سایدبار شناور را دانلود و با استفاده از آموزش نحوه ذخیره، درون ریزی و خروجی گرفتن از قالب های المنتور قالب را درون ریزی کنید.
به پایان یکی دیگر از ترفند های المنتور رسیده ایم. امیدوارم که از این آموزش هم به خوبی استفاده کرده باشید. اگر مشکلی در هنگام اجرای این آموزش دارید از طریق بخش نظرات مشکلات خود را مطرح کنید.
