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

آموزش ساخت اسلایدر عمودی خلاقانه با المنتور – توی دنیای طراحی سایت، استفاده از المان‌های جذاب و به روز می‌تونه سایتت رو از بقیه متمایز کنه و تجربه کاربری (UX) رو به طرز چشمگیری بهبود بده. یکی از این المان‌های فوق‌العاده که می‌تونه سایتت رو شیک‌تر و حرفه‌ای‌تر نشون بده، اسلایدر یا کروسل هست. این ابزار نه تنها سایتتو زیبا و جذاب می‌کنه، بلکه باعث میشه کاربرها بیشتر با محتوای سایتت تعامل داشته باشن و توجهشون به چیزهایی که می‌خوای نشون بدی جلب بشه.

توی این مقاله می‌خوام بهت آموزش بدم چطور می‌تونی فقط با استفاده از افزونه المنتور، یه اسلایدر عمودی خلاقانه بسازی که نه تنها سایتت رو شیک‌تر کنه، بلکه تجربه‌ای جذاب و متفاوت برای کاربرات فراهم کنه. با این کار می‌تونی باعث بشی که کاربرها بیشتر تو سایتت بمونن و محتوای جذاب رو دنبال کنن. 😍

اگه مشتاقی برای یه آموزش خاص دیگه، پس تا پایان این مقاله همراه من باش، تا گام به گام این اسلایدر فوق‌العاده رو بسازیم!

اسلایدر یا کروسل (Carousel) چیه؟ 📸

اسلایدر یا کروسل (Carousel) یکی از ابزارهای محبوب در طراحی وب‌سایت‌هاست که به کمک اون میتونی محتوای مختلف مثل تصویر، متن‌ یا حتی ویدیو رو به صورت چرخشی و در قالب اسلاید نمایش بدی. این ابزار بیشتر برای نمایش محتوایی مثل گالری‌ تصاویر، پست ها یا حتی محصولات استفاده میشه.

× ✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD

عملکرد اسلایدر به این صورته که کاربر می‌تونه با کلیک کردن روی دکمه‌های جلو و عقب، بین اسلایدها جابجا بشه یا حتی می‌تونه این تغییرات رو به صورت خودکار مشاهده کنه.

کروسل یا اسلایدر یه ویژگی فوق‌العاده برای طراحی سایت به حساب میاد چون باعث میشه محتوای شما به صورت جذاب و تعاملی به نمایش دربیاد و توجه کاربران رو جلب کنه. علاوه بر این، اسلایدرها می‌تونن فضای بیشتری رو برای نمایش محتوای مختلف فراهم کنن بدون اینکه فضای زیادی از صفحه رو اشغال کنن.

این ابزار معمولاً به دو صورت افقی یا عمودی طراحی میشه، و می‌تونی با استفاده از افزونه‌هایی مثل المنتور، به راحتی اون رو به سایتت اضافه کنی.

مراحل ساخت اسلایدر عمودی خلاقانه با المنتور 👨‍💻

خب، حالا که با ویژگی‌هاش آشنا شدیم، وقتشه که دست به کار بشیم و اسلایدر رو بسازیم. برای ساخت این اسلایدر مشابه تصویر زیر مراحل رو به دقت دنبال کن.

• نصب المنتور: اولین قدم اینه که افزونه المنتور رو نصب کنی. این افزونه بهت اجازه میده که صفحات سایت رو به راحتی و بدون نیاز به کدنویسی طراحی کنی.
• سفارشی سازی برگه المنتور: حالا که المنتور رو نصب کردم، میرم سراغ تنظیمات صفحه. برای این کار، روی آیکون چرخ‌دنده در نوار بالای المنتور کلیک می‌کنم. بعد از این که وارد تنظیمات شدم، طرح‌بندی رو روی Canvas قرار میدم. این کار باعث میشه که هدر و فوتر سایت مخفی بشه و من بتونم تمرکز کامل رو روی طراحی خود صفحه بذارم. اینجوری فضای کارم بیشتر میشه و راحت‌تر می‌تونم جزئیات رو تنظیم کنم. 🙌

• تنظیم رنگ پس‌زمینه صفحه: برای اینکه طراحی و اسلایدر بیشتر به چشم بیاد و جلوه خاص‌تری داشته باشه، من رنگ پس‌زمینه رو یه رنگ تیره انتخاب کردم. برای تنظیم رنگ پس‌زمینه، کافیه بری به تب استایل در المنتور، سپس از بخش نوع پس‌زمینه، گزینه کلاسیک رو انتخاب کنی. بعد هم کد رنگ #002751 رو پیست کن. این رنگ تیره باعث میشه محتوای صفحه بیشتر برجسته بشه و طراحی کلی خیلی حرفه‌ای‌تر به نظر بیاد. ✨

• ایجاد بخش جدید: روی آیکون + در وسط صفحه میزنم و یک بخش دو ستونه ایجاد میکنم.

• طراحی ستون سمت راست: توی این ستون قراره یه هدینگ جذاب و یه تصویر قرار بدم تا بتونم به مخاطب توضیح بدم درباره محتوایی که اسلایدر نمایش میده. اینطوری هم محتوای من بیشتر جلب توجه می‌کنه، هم اسلایدرم برای کاربرها قابل فهم‌تر میشه. 📸 چون هدف اصلی من طراحی اسلایدر عمودی هست، پس سریعاً از ستون سمت راست عبور می‌کنم و طراحی اون رو انجام می‌دم تا خیلی وقت تلف نشه و تمرکز رو بیشتر روی اسلایدر بذارم. 💡

• طراحی ستون سمت چپ (ستون شامل اسلایدر عمودی): خب، حالا می‌رسیم به اصل داستان! 😎 یعنی طراحی اسلایدر عمودی. من قراره این اسلایدر رو برای نمایش اعضای تیم رایا وردپرس به همراه پیچ اینستاگرام هر کدومشون طراحی کنم. برای این کار، به چندتا المان نیاز دارم: اول از همه یه ویجت تصویر برای نمایش عکس‌ها، یه ویجت سربرگ و متن برای توضیحات کوتاه، و در نهایت یه ویجت دکمه برای هدایت کاربرها به پیچ اینستاگرام هرکدوم از اعضا. 🔥

1️⃣اول از همه، از قسمت سمت راست پنل المنتور، ویجت بخش داخلی رو می‌کشم و توی ستون سمت چپ برگه المنتور رها می‌کنم.

2️⃣ ویجت تصویر رو به ستون سمت چپ و داخل قسمت بخش داخلی اضافه می‌کنم. بعد روی ویرایش تصویر کلیک می‌کنم و از کتابخانه وردپرس تصویر مورد نظر رو انتخاب می‌کنم. اینطوری تصویر دقیقاً همونطور که می‌خوام، نمایش داده میشه. 📸

حالا میرم به تب استایل ویجت تصویر و طول و عرض رو روی 110 پیکسل تنظیم می‌کنم. بعد از اون، گزینه Object Fit رو روی حالت Cover قرار میدم تا تصویر به طور کامل و با بهترین حالت ممکن در فضای اختصاصی خودش جا بشه. 📏✨

3️⃣در این مرحله، روی ویرایش بخش داخلی ستون سمت چپ کلیک سپس از قسمت طرح‌بندی، گزینه جعبه‌ای رو انتخاب می‌کنم و عرض بخش رو روی 470 پیکسل تنظیم می‌کنم.

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

4️⃣ ویجت کادر تصویر یا Image Box رو از قسمت ابزارک‌های المنتور جستجو می‌کنم. بعد درست زیر ویجت تصویر، داخل بخش داخلی یا Inner Section ستون سمت چپ رها می‌کنم. چون من به تصویر داخل این ویجت احتیاج ندارم، تصویرش رو حذف می‌کنم تا فقط المان‌های مورد نظر رو داشته باشم. سپس متن رو با نام کاربر و توضیحات رو با سمت یا نقش کاربر تنظیم می‌کنم تا اطلاعات درست نمایش داده بشه. ✨

بعد از انجام مراحل قبلی، ویجت دکمه (Button) رو درست زیر ویجت کادر تصویر اضافه می‌کنم. بعد متن دکمه رو می‌زنم و لینک مورد نظر رو هم تنظیم می‌کنم تا کاربر به راحتی بتونه به صفحه هدف بره. 🔗

روی ویجت اولم در ستون سمت چپ که همون تصویر پروفایل بود کلیک می‌کنم و میرم به تب استایل. بعد انحنای حاشیه رو روی 100 پیکسل تنظیم می‌کنم تا تصویرم به صورت دایره‌ای نمایش داده بشه و ظاهرش جذاب‌تر بشه. 🔵✨ همچنین، نوع حاشیه رو به یکپارچه با ضخامت 5 پیکسل تنظیم می‌کنم و رنگش رو سفید انتخاب می‌کنم. بعد یه سایه ملایم با شفافیت rgba(0, 0, 0, 0.18) بهش اضافه می‌کنم تا جلوه بهتری پیدا کنه. 🌟

در گام بعدی، روی ویجت دوم که همون کادر تصویر بود در ستون سمت چپ کلیک می‌کنم. سپس فونت سربرگ (سعید) رو روی 20 پیکسل و فونت توضیحات ( پشتیبانی رایا وردپرس ) رو روی 18 پیکسل تنظیم می‌کنم و رنگ متن‌ها رو مشکی انتخاب می‌کنم تا همه چیز واضح و خوانا بشه. 🖤

مجدداً روی ویجت تصویر در ستون سمت چپ کلیک می‌کنم، میرم به تب پیشرفته و عرضش رو روی در متن تنظیم می‌کنم. 🎯

همینکارو واسه ویجت کادر تصویر و دکمه هم انجامش میدم 🙂

روی ستون داخل ستون سمت چپ کلیک می‌کنم و میرم به تب پیشرفته. از اونجا فاصله داخلی رو از همه جهات روی 0 تنظیم می‌کنم تا همه چیز مرتب و هم‌راستا بشه. 🔧 بعد میرم به تب استایل و حاشیه رو روی 50 پیکسل تنظیم می‌کنم تا لبه‌های ستون گرد و زیبا بشه. ✨

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

طراحی باکس اولین عضو تیم تموم شد. حالا روی این بخش کلیک می‌کنم و گزینه داپلیکیت یا تکثیر رو می‌زنم. بعد از اون، تصویر و محتوا رو تغییر میدم.

در قدم بعدی، روی ستون سمت چپ که شامل همه باکس‌ها هست کلیک میکنم تا بخش ویرایش باز بشه. بعد میرم به تب پیشرفته و در قسمت کلاس CSS، کلاس sliding رو به ستون اختصاص میدم. 🛠️ به پایین صفحه اسکرول میکنم و تو بخش کد CSS سفارشی کد زیرو میزنم:

selector{
    --change-duration: 0.75s;
    height: 320px;
}
selector .elementor-inner-section{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
selector .elementor-container{
    opacity: 0;
    transform: translateY(-100%) scale(0.5);
}
.anim selector .elementor-container{
    transition: all var(--change-duration) ease-in-out;
}
selector .after .elementor-container{
    opacity: 0.4;
    transform: translateY(100%) scale(0.7);
}
.anim selector .after .elementor-container{
    animation: enter var(--change-duration) ease-in-out;
}
selector .before .elementor-container{
    opacity: 0.4;
    transform: translateY(-100%) scale(0.7);
}
selector .current .elementor-container{
    opacity: 1;
    transform: none;
}
selector .before,
selector .after{
    z-index: 1;
}
selector .current{
    z-index: 2;
}

@keyframes enter {
  0%{
    opacity: 0;
    transform: translateY(100%) scale(0.5);
  }
  100%{
    opacity: 0.4;
    transform: translateY(100%) scale(0.7);
  }
}

وقتی کد رو پیست می‌کنی، المان‌های ستون سمت چپ مخفی میشن. نگران نباش، این کاملاً طبیعی هست و جزئی از کاره! 😎✨

برای اینکه اسلایدر عمودی به درستی نمایش داده بشه و کار کنه، باید کد جاوااسکریپت رو به صفحه اضافه کنم. برای این کار، از قسمت سمت راست ابزارک‌های المنتور، ویجت HTML رو پیدا میکنم و در ستون سمت چپ قرارش میدم . بعد کد زیر رو توی این ویجت میزارم: 👇

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery,
    intervalDuration = 3

$(document).ready(function(){
    
var slide = $('.sliding .elementor-inner-section'),
    index = 0,
    before, after,
    slidePause = false
    
function sliding(call = null){
    
    if(!call){
        if(slidePause) return
        $('body').addClass('anim')
    }
    
    before = index == 0 ? slide.length - 1 : index - 1
    after = index == slide.length - 1 ? 0 : index + 1
    
    slide.removeClass('current before after')
    slide.eq(index).addClass('current')
    slide.eq(before).addClass('before')
    slide.eq(after).addClass('after')

    
    if( slide.length - 1 == index ){
        index = 0
    }else{
        index++
    }
}

sliding('load')
setInterval(sliding, intervalDuration*1000)

$('.sliding').on('mouseover', function(){
    slidePause = true
})
$('.sliding').on('mouseout', function(){
    slidePause = false
})
    
})

</script>

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

هورا! کار تموم شد و حالا یه اسلایدر عمودی فوق‌العاده برای سایتت طراحی کردی. از اینکه تا پایان این آموزش با من همراه بودی، بی‌نهایت سپاسگذارم😊