وردپرس

آموزش طراحی اسلایدر جذاب با المنتور 😍

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

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

برای پیاده سازی این طرح ابتدا یک برگه ایجاد میکنیم.

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

بعد از با استفاده از تنظیماتی نظیر تب پیشرفته و استایل میتوانیم طرح فوق را پیاده سازی کنیم. که در ویدئو زیر کامل مراحل را توضیح داده ایم.

 

در این آموزش از کدهای css و js استفاده شده است که در پایین برای شما عزیزان قرار داده ام :

کدهای 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);
}
}

کدهای جاوااسکریپت استفاده شده :

جهت مشاهده کدها کلیک بفرمایید

<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>

احسان قسیمی

طراحی سایت در مشهد - سئو و دیجیتال مارکتینگ

نوشته های مشابه

دیدگاهتان را بنویسید

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

دکمه بازگشت به بالا
نظرسنجی