اسلایدر با دکمه عمودی در المنتور، استفاده از تصاویر و لینک ها در صفحات سایتمون خیلی متداول هست. با استفاده از اسلایدر ها در طراحی سایت میتونیم تجربه رابطه کاربری رو خیلی بهبود ببخشیم تا تمامی تصاویر و محتواها به جای اینکه اسکرول بشن و به پایین برن و صفحه ما رو طولانی کنن، با قرار گرفتن داخل یک اسلایدر جذاب، هم اطلاعات رو به کاربر انتقال بدن هم صفحات سایتمون رو جذاب تر کنن .
با این کار تعامل کاربر رو با سایت هم افزایش می دیم. در صفحه ساز المنتور قابلیت ایجاد اسلایدر وجود داره که به راحتی و با چند کلیک خیلی راحت میتونیم اسلایدر های مختلفی رو به صفحمون اضافه کنیم. گاهی اوقات داشتن یک اسلایدر با دکمه عمودی در المنتور میتونه طراحی رو خیلی جذاب تر هم کنه.
با یک آموزش دیگه از سایت کنترل وب همراه باشین تا فقط به کمک چند خط کد ساده و سبک سی اس اس(css) و بدون نیاز به هیچ افزونه جانبی اسلایدر با دکمه عمودی در المنتور رو طراحی کنیم و با داشتن اسلایدر با دکمه عمودی در المنتور نیاز های مختلف طراحیمون رو برطرف کنیم.
توی اسلایدر ها دکمه هایی وجود داره که با استفاده از این دکمه ها می تونیم محتوایی که داخل اسلایدر قرار می گیرن رو تغییر بدیم و نقطه اصلی اسلایدر ها به شمار میان.
توی صفحه ساز المنتور، به صورت پیش فرض دکمه های اسلایدر ها به صورت افقی قرار دارن اما ممکنه که ما نیاز داشته باشیم تا اسلایدر با دکمه عمودی در المنتور رو به صفحه خودمون اضافه کنیم.
استفاده از دکمه های عمودی اسلایدر می تونن که در بعضی از موارد طراحی حس جذاب تری رو به کاربر منتقل کنن و ایجاد حس بهتر در صفحه، باعث میشه تا کاربر بیشتر با صفحه ما تعامل داشته باشه و تمایل به موندن در صفحه در کاربر افزایش پیدا کنه.
به صورت پیشفرض قابلیت تبدیل این اسلایدر ها به اسلایدر با دکمه عمودی در المنتور وجود نداره و برای اینکه ای نوع اسلایدر رو داشته باشیم، یا باید از افزونه های جانبی استفاده کنیم و یا با روشی که توی این مقاله آموزش می بینیم خیلی راحت کار رو جمع کنیم.
استفاده از افزونه های جانبی می تونن نیاز های ما رو برای موارد متعددی بر طرف کنن اما زمانی که فقط از یک قابلیت خیلی کوچک یک افزونه بخوایم استفاده کنیم و به این دلیل افزونه موردنظر رو نصب و استفاده کنیم، این کار باعث سنگین شدن سایت و افت عملکرد سایتمون میشه. پس توی همچین مواردی استفاده از چند خط کد ساده سی اس اس برای استایل دهی و ایجاد قابلیت موردنیاز میتونه خیلی کار راه انداز و عالی باشه!
توی این مورد هم استفاده از چند خط کد ساده خیلی میتونه به طراحی ما کمک کنه. پس بریم سراغ آموزش:
قدم اول در طراحی اسلایدر با دکمه عمودی در المنتور
در قدم اول طراحی باید المان “اسلایدر” رو از بین المان های موجود در المنتور انتخاب کنیم و توی جایی که قصد طراحی اسلایدر رو در اون بخش داریم، این المان رو قرار بدیم. برای اینکار از طریق نوار جست و جو قسمت المان ها می تونیم با جست و جو المان “اسلایدر” به المان موردنظر دسترسی پیدا کنیم.
قدم دوم در طراحی اسلایدر با دکمه عمودی در المنتور:
در قدم بعدی باید به قسمت ویرایش المان اسلایدر بریم و از طریق تب “پیشرفته” و رفتن به گرینه ” css سفارشی” یا “custom css” کد های سی اس اس که در ادمه این مقاله براتون قرار می دیم رو در این قسمت قرار بدین.
در کد های سی اس اس که در ادامه براتون قرار دادیم، با استفاده از تغییر مقدار right میتونین فاصله دکمه های موردنظر رو از سمت راست اسلایدر مشخص کنیم و با توجه به تعداد آیتم هایی که در اسلایدر قرار می می دین می تونین با تغییر در مقدار bottom میزان فاصله دکمه های اسلایدر که الان به شکل عمودی در اومدن رو تعیین کنین.
به همین راحتی و خیلی سریع تونستیم در دو قدم ساده و بدون استفاده از افزونه، این قابلیت رو برای اسلایدر های خودمون در صفحاتمون به وجود بیاریم. امیدواریم که از این آموزش لذت برده باشین و تونسته باشین با استفاده از این آموزش یک قدم دیگر به رویاهای خودتون نزدیک تر بشین!
