آیلین وب

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

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

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

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

توجه: با روشن کردن این گزینه، ویژگی شناور افزونه المنتور پرو غیر فعال خواهد شد.
sticky sidebar aylinweb 1 - آموزش ساخت سایدبار شناور یا چسبنده در المنتور
ساخت سایدبار چسبان با المنتور

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

sticky sidebar aylinweb 2 - آموزش ساخت سایدبار شناور یا چسبنده در المنتور
افزودن بخش داخلی به سایدبار در المنتور

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

sticky sidebar aylinweb 3 - آموزش ساخت سایدبار شناور یا چسبنده در المنتور
ستون کناری شناور در المنتور

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

sticky sidebar 3 - آموزش ساخت سایدبار شناور یا چسبنده در المنتور
شناور کردن ستون کناری در المنتور

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

sticky sidebar aylinweb 4 - آموزش ساخت سایدبار شناور یا چسبنده در المنتور
انجام تنظیمات ستون کناری شناور با المنتور

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

ماندن

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

غیر چسبنده

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

افست

  • افست بالا: فاصله حالت چسبنده از سربرگ هنگام اسکرول
  • افست پایین: فاصله حالت چسبنده از پایین هنگام رسیدن به فوتر
توجه کنید بعد از روشن کردن این گزینه، باید تراز عمودی ستون اصلی، روی گزینه بالا قرار گرفته باشد.
sticky sidebar aylinweb 5 - آموزش ساخت سایدبار شناور یا چسبنده در المنتور
ابزارکهای شناور المنتور

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

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

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

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

4 دیدگاه دربارهٔ «آموزش ساخت سایدبار شناور یا چسبنده در المنتور»

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پیشنهاد میکنیم این مقالات را هم بخوانید
آموزش انتخاب بهترین کلمات کلیدی (Keywords) برای محتوا + فیلم آموزشی

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

آموزش انتخاب بهترین کلمات کلیدی برای سایت و محتوا، موضوع این جلسه

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

هاست ویندوز و هاست لینوکس

قبل از راه اندازی و ساخت سایت با وردپرس  باید حتما قبلش

آموزش ساخت مگامنو در المنتور (رایگان) + 📽فیلم آموزشی

آموزش ساخت مگامنو در المنتور

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

کپی کردن صفحات المنتور به صورت کامل از یک سایت به سایت دیگر + (فیلم آموزشی)

کپی کردن صفحات المنتور به

شاید برای خیلی از شماها پیش اومده که توی طراحی صفحات با

مطالب داغ
اسکرول به بالا