آیا تا به حال به این فکر کرده‌اید که چگونه می‌توان اسکرول افقی را در پس‌زمینه وب‌سایت خود با استفاده از المنتور پیاده‌سازی کرد؟ پیمایش عمودی، که یک ویژگی اساسی در وب‌سایت‌ها است، به کاربران اجازه می‌دهد تا به راحتی در میان محتوای یک صفحه حرکت کنند. اما اسکرول افقی، با وجود کمتر رایج بودن، می‌تواند جلوه‌ای منحصربه‌فرد و جذاب به طراحی سایت شما ببخشد. در این مقاله، به بررسی چگونگی ایجاد اسکرول افقی در پس‌زمینه با استفاده از المنتور می‌پردازیم.
اسکرول افقی: یک عنصر طراحی وب متفاوت
اگرچه اسکرول افقی به اندازه اسکرول عمودی متداول نیست، اما می‌تواند در شرایط خاص، مانند نمایش تصاویر بزرگ یا ایجاد یک تجربه کاربری تعاملی، بسیار مفید باشد. این قابلیت، به ویژه برای وب‌سایت‌هایی که می‌خواهند یک کاتالوگ تصویری جذاب یا یک صفحه با المان‌های گرافیکی بزرگ داشته باشند، ایده‌آل است. در این آموزش، ما به شما نشان می‌دهیم که چگونه با چند گام ساده، اسکرول افقی را در پس‌زمینه صفحات المنتوری خود پیاده‌سازی کنید.
گام اول: ایجاد یک بلوک جدید در المنتور
ابتدا وارد ویرایشگر المنتور در وب‌سایت خود شوید. یک صفحه یا نوشته جدید ایجاد کنید و یا صفحه موجود را ویرایش کنید. سپس، با کلیک بر روی دکمه افزودن، یک بلوک جدید انتخاب کنید. این بلوک می‌تواند ساختار ستونی یا سطری داشته باشد، که بسته به نیاز طراحی شما متفاوت خواهد بود.
در مرحله بعد، ساختار ستون‌ها و ردیف‌های مورد نیاز خود را انتخاب کنید. این انتخاب، تعیین‌کننده چیدمان کلی محتوای شما در صفحه خواهد بود.
گام دوم: افزودن عنصر سربرگ
برای شروع، از منوی عناصر المنتور، عنصر سربرگ (Header) را انتخاب کنید. سپس، به بخش پیشرفته (Advanced) بروید و گزینه پس‌زمینه (Background) را انتخاب نمایید.
گام سوم: تنظیمات تصویر پس‌زمینه
در این مرحله، تصویر پس‌زمینه دلخواه خود را بارگذاری کرده و تنظیمات مربوط به نمایش آن را اعمال کنید. این تنظیمات شامل انتخاب اندازه، موقعیت و تکرار تصویر است.
گام چهارم: افزودن کدهای CSS سفارشی
برای فعال‌سازی اسکرول افقی، نیاز به استفاده از کدهای CSS سفارشی داریم. به بخش پیشرفته بروید و تب CSS سفارشی را انتخاب کنید. کد زیر را در این قسمت وارد کنید:
selector {height: 330px !important;}selector:hover {transition: background-position 1.5s linear 0s;background position: center bottom !important;}
با وارد کردن این کد، شما به المنتور دستور می‌دهید که یک اسکرول افقی در پس‌زمینه ایجاد کند. این کدها ارتفاع بلوک را تنظیم کرده و نحوه نمایش تصویر پس‌زمینه را هنگام هاور (hover) تغییر می‌دهند.
توجه: در صورت نیاز به تغییر تنظیمات سربرگ، این بخش را مجدداً به‌روزرسانی کنید.
گام پنجم: مشاهده نتیجه و بررسی اسکرول افقی
پس از انجام مراحل بالا، نتیجه کار خود را بررسی کنید. با اسکرول کردن در صفحه، باید تصویر پس‌زمینه را به‌صورت افقی مشاهده کنید. این ویژگی به وب‌سایت شما جلوه‌ای مدرن و جذاب می‌بخشد.
با این روش ساده، شما می‌توانید یک اسکرول افقی جذاب را به صفحات المنتوری خود اضافه کنید و تجربه کاربری وب‌سایت خود را بهبود بخشید.