تغيير رنگ پس زمینه سایت با اسکرول در المنتور+ فیلم آموزشی
تغيير رنگ پس زمینه سایت با اسکرول در المنتور
توی این پست میخوام بهتون آموزس بدم که چطور میشه با المنتور کاری کرد که وقتی کاربر سایت رو اسکرول میکنه و میاد پایین رنگ پس زمینه سایت تغییر کنه
برای این کار اول باید چند بخش تک ستونه توی صفحه خودتون ایجاد کنید.بعد از اینکه بخش های رو ایجاد کردید باید توی قسمت تنئميات اون و توی تی طرح بندی المنتور باید گزینه ارتفاع رو روی هم اندازه صفحه نمایش تنظیم کنید.
بعد از انجام این کار برای همه بخش ها وارد تب پیشرفته بشید و وی قسمت کلاس های CSS کلمه panel رو وارد کنید.
بعدش توی قسمت
در واقع برای هر بخش قسمت violet تغيير میکنه و رنگی رو که میخواید اون بخش موقع اسکرول نمایش بده اونجا مینویسید:
حالا موقع این رسیده که کد های CSS روی برای برگه خودمون قرار بدیم.برای این کار ابتدا به قسمت تنظمات برگه برید و توی تب پیشرفته و قسمت custome CSS كد های زیر رو قرار بدید:
body {
transition: background-color 1s ease;
}
/* panel styles */
.panel {
/* min height incase content is higher than window height */
min-height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
font-family: sans-serif;
/* outline: 10px solid hotpink; */
/* turn above on to see the edge of panels */
}
/* colours */
.color-violet {
background-color: #7A4EAB;
}
.color-indigo {
background-color: #4332CF;
}
.color-blue {
background-color: #2F8FED;
}
.color-green {
background-color: #4DCF42;
}
.color-yellow {
background-color: #FAEB33;
}
.color-orange {
background-color: #F19031;
}
.color-red {
background-color: #F2293A;
}
بعد از اینکه کدهای CSS رو گذاشتید نوبت به گذاشتن کدهای javascript میرسه
برای گذاشتن کد های javascript اول باید یه المان به انتهای صفحه اضافه کنید.المان HTML رو به صفحه اضافه کنید و توی این المان کد زیر رو وارد کنید:
يادتون باشه به اول این کد تگ <script> و انتهاب اون تگ </script> رو اضافه کنید
jQuery(function( $ ) {
$(window).scroll(function() {
// selectors
var $window = $(window),
$body = $('body'),
$panel = $('.panel');
// Change 33% earlier than scroll position so colour is there when you arrive.
var scroll = $window.scrollTop() + ($window.height() / 3);
$panel.each(function () {
var $this = $(this);
// if position is within range of this panel.
// So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
// Remember we set the scroll to 33% earlier in scroll var.
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
// Remove all classes on body with color-
$body.removeClass(function (index, css) {
return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
});
// Add class of currently active div
$body.addClass('color-' + $(this).data('color'));
}
});
}).scroll();
مطالب زیر را حتما مطالعه کنید
تغییر حساسیت قدرت رمز عبور در ووکامرس هنگام ورود و ثبت نام+فیلم آموزشی
هاست وردپرس چیست؟ انواع هاست و تعریف آنها
قالب وردپرس چیست؟ انواع قالب وردپرس و کاربرد آنها
وردپرس چیست و چه کاربردی دارد؟
بکاپ کامل از سایت وردپرسی با افزونه updraftplus+فیلم آموزشی رایگان
3 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام وقتتون بخیر کلیپ خطای ۴۰۴ میده ممنون میشم مشکلش رو رفع کنید
سلام و درود
چطور میتونم با المنتور رنگ کلی زمینه سایت رو تغییر بدم؟
قالب سایتم 2022 هست و در بخش ( داشبورد _ نمایش _ سفارشی سازی ) سایت این امکان وجود نداره
لازم به توضیحه قبلا قالب سایتم 2021 بود و این امکان در بخش نمایش بود اما در قالب 2022 نیست.
بادرود
کار نکرد! مو به ممو انجام شد مثل فیلم و کدها از صفحه کپی شد. کد اسکریپ هم اضافه شد