وردپرس

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

احسان قسیمی۲ فروردین ۱۴۰۱آخرین به روز رسانی: ۱۲ شهریور ۱۴۰۱
۲۴۱ خواندن این مطلب ۱ دقیقه زمان میبرد
آموزش طراحی اسلایدر جذاب با المنتور | طراحی سایت وبینیو

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

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

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

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

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

 

در این آموزش از کدهای 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>
دوره آموزش استوری موشن وبینیو
احسان قسیمی۲ فروردین ۱۴۰۱آخرین به روز رسانی: ۱۲ شهریور ۱۴۰۱
۲۴۱ خواندن این مطلب ۱ دقیقه زمان میبرد
تصویر احسان قسیمی

احسان قسیمی

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

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

آزمون HTML پایه یازدهم

۵ آذر ۱۴۰۱
سورس گاردین

نحوه فعال سازی سورس گاردین در سی پنل

۲۸ فروردین ۱۴۰۱

راهنمای اصطلاحات گوگل آنالیتیکس

۲۶ مهر ۱۴۰۰

نمایش تاریخ انتشار پست و آپدیت مقاله در وردپرس

۲۲ شهریور ۱۴۰۰

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

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

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