آموزش ساخت سایدبار شناور یا چسبنده در المنتور

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

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

ساخت سایدبار چسبان در المنتور

در مرحله اول ابتدا باید به تنظیمات افزونه Elementor Extras رفته و گزینه Sticky Elements یا المنت های شناور را روشن کنید. با این کار شما المنت های جسبان رو توی المنتور فعال می کنید.

[su_note note_color=”#918762″ text_color=”#fff” radius=”10″]توجه: با روشن کردن این گزینه، ویژگی شناور افزونه المنتور پرو غیر فعال خواهد شد.[/su_note]

خب حالا در این مرحله باید به بخش المنت ها یا المانها Elementor برید و یک بخش داخلی در بالای ابزارک ها قرار دهید با این کار باید همانند تصویر زیر یک بخش داخلی در بالای ستون کناری نمایان شود.

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

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

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

معرفی فیلد های مختلف در بخش تنظیمات شناور

ماندن

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

غیر چسبنده

• موبایل و تبلت: با قرار دادن روی این گزینه، سایدبار در موبایل و تبلت شناور نخواهد بود.
• فقط موبایل: با قرار دادن روی این گزینه، سایدبار فقط در موبایل شناور نخواهد بود.

افست

• افست بالا: فاصله حالت چسبنده از سربرگ هنگام اسکرول
• افست پایین: فاصله حالت چسبنده از پایین هنگام رسیدن به فوتر

[su_note note_color=”#918762″ text_color=”#fff” radius=”10″]توجه کنید بعد از روشن کردن این گزینه، باید تراز عمودی ستون اصلی، روی گزینه بالا قرار گرفته باشد.[/su_note]

خب تموم شد! تا اینحا شما یک سایدبار چسبان در المنتور ایجاد کردید و حالا باید یک پیشنمایش از آنچه ساخته اید مشاهده کنید تا ببینید تمامی مراحل رو به درستی پیش رفتید یا خیر. برای این کار در سمت راست پایین یک آیکون چشم قرار داده، روی این آیکون کلیک کنید تا پیشنمایش صفحه ای که ساخته اید رو مشاده کنید.

باید همانند تصویر متحرک زیر ستون کناری شا هم چسبان نمایش داده بشه در غیر این صورت باید مراحل رو از اول پیش برید تا به تصویر زیر برسید.

[su_note note_color=”#b0ffb9″ text_color=”#000000″ radius=”10″]گر مشکلی در مراحل داشتید و یا سوالی مربوط به این مقاله، میتوانید در دیدگاه های همین مقاله مطرح کنید و پاسخ خودتون رو در کمترین زمان ممکن دریافت کنید.[/su_note]