آموزش طراحی اسلایدر جذاب با المنتور 😍
بهترین صفحه ساز وردپرس در حال حاضر المنتور هست و قدرت بالای این صفحه ساز باعث شده هر طرحی رو شما قادر باشید پیاده سازی کنید که در آموزش طراحی اسلایدر جذاب با المنتور به شما صفر تا صد طراحی این بخش جذاب را آموزش خواهیم داد.
این طراحی کاملا رسپانسیو هست و بدون نیاز به هاور برای نمایش قابلیت میباشد. این ویژگی از این بابت حائز اهمیت هست که در طرح هایی که وابسته به هاور موس می باشد فقط در نمایش دسکتاپ جذاب هست و در حالت موبایل کارآیی ندارند. ولی این آموزش برای تمام دستگاه ها حالت نمایش جذاب دارد.
برای پیاده سازی این طرح ابتدا یک برگه ایجاد میکنیم.
سپس یک بخش داخلی ایجاد میکنیم. و در آن سه ابزار پر کاربرد المنتور یعنی تصویر، آیکن جعبه و دکمه را قرار میدهیم. تمام طرح ما با همین سه ابزار المنتور فقط پیاده سازی می شود.(شما کافی ست افزونه المنتور و المنتور پرو را نصب داشته باشید.)
بعد از با استفاده از تنظیماتی نظیر تب پیشرفته و استایل میتوانیم طرح فوق را پیاده سازی کنیم. که در ویدئو زیر کامل مراحل را توضیح داده ایم.
در این آموزش از کدهای 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){ before = index == 0 ? slide.length – 1 : index – 1 slide.removeClass(‘current before after’) if( slide.length – 1 == index ){ sliding(‘load’) $(‘.sliding’).on(‘mouseover’, function(){ }) </script> |
برای دانلود تمپلیت المنتور این طرح میتونید داخل کانال تلگرام مراجعه بفرمایید
https://t.me/EhsanGhasimi_ir
خیلی طراحی زیبایی هست فقط وقتی به کانتینر تبدیل میکنیم همه چی بهم میریزه
سلام و درود وقت بخیر جناب بینام – میخواین فایل تمپلیت المنتوری ش رو در حالت کانتینر قرار بدم.
سلام من این کد های رو کپی میکنم هامان هام رو هاید میکنه و نمایش نمیده
سلام و درود متوجه منظورتون نشدم.