وردپرس

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

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

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

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

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

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

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

 

در این آموزش از کدهای 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>

برای دانلود تمپلیت المنتور این طرح میتونید داخل کانال تلگرام مراجعه بفرمایید

https://t.me/EhsanGhasimi_ir

 

0/5 (0 نظر)

دوره آموزش استوری موشن وبینیو

احسان قسیمی

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

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

‫۴ نظرها

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

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

نظرسنجی