سلام وقت بخیر
امروز باز اومدیم با یک آموزش دیگر کاربردی و کوتاه ، در این آموزش شما میتوانید با اسکرول کردن سایت المنتوری خود علاوه بر چسبیده یا شناور بودن هدر ( sticky ) تغییر لوگو هم خواهید داشت.
برای آشنایی با ویجت آیکون سایت المنتور کلیک کنید .
تغییر لوگو در حالت sticky المنتور
خوب در این آموزش نیازی به هیچ پلاگین یا افزونه ای ندارید فقط کافیه المنتور پرو خود را فعال کنید .
نکته مهم اینه اگر افزونه ای مبنی بر sticky یا همان حالت چسبیده یا شناور نصب کردید مثل jet sticky و … غیر فعال کنید و یا گزینه آن را غیر فعال کنید .
مراحل تغییر لوگو در هدر المنتور :
- در ابتدا قالب هدر خود را با صفحه ساز المنتور باز کنید و سپس روی بخش مربوط به هدر کلیک کنید .
- در این قسمت روی تب پیشرفته کلیک کنید و روی حالت شناور را فعال نمایید و روی بالا قرار دهید.
- در offset آن را روی 150px قرار دهید .
- یک عکس دیگر زیر لوگو اصلی اضافه کنید و لوگو جدید را آپلود نمایید و روی تب پیشرفته کلیک کنید در منوی موقعیت یابی ، جایگاه را مستقل کرده و z-index اون رو هم در همان تب در قسمت پیشرفته یکی بالاتر از لوگو اصلی قرار دهید.
- به لوگو اصلی کلاس (.oldlogo) دهید و به لوگو جدید کلاس (.newlogo)
- خوب تموم شد حالا نوبت آن رسیده در قسمت پیشرفته css سفارشی کد زیر را وارد کنید .
کد تغییر لوگو در هدر با اسکرول
/*تغییر رنگ هدر در هنگام اسکرول*/
selector.elementor-sticky--effects{
background-color:#ea5b0c !important;
}
selector{
transition: background-color 3s ease ;
}
/*کد مخفی کردن لوگو اصلی در هنگام اسکرول*/
selector .oldlogo {
display: inline-block;
}
selector.elementor-sticky--effects .oldlogo{
display: none;
}
/*نمایش لوگو جدید*/
selector .newlogo {
display: none;
}
selector.elementor-sticky--effects .newlogo{
display: inline-block
}
/*تغییر رنگ متن در هنگام اسکرول*/
selector.elementor-sticky--effects .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item {
color: #fff;
}
25 پاسخ
همه css سفارشی یکجا بزاریم؟
سلام بله میتوانید
همه جا را زیرورو کردم اموزشی مثل شما ندیدم عالی بود
سلام خیلی خیلی سپاسگزاریم از شما
سلام . کاربردی بود . تشکرررررر
سلام وقت بخیر. اماکنش هست اموزش رو تصویری بزارید نتونستم پیاده سازیش کنم.
سلام وقت بخیر
بله بزودی قرار داده خواهد شد .
سلام و خسته نباشید ممنون از راهنمایی های عالیتون
selector.elementor-sticky–effects .elementor-widget-nav-menu .elementor-nav-menu–main .elementor-item {
color: #fff;
} این کد برای تغییر رنگ متن فهرست اوکی هست . اما اگر در هدر جستوجو اجاکس . سبد خرید هم باشه تغییر کدش به چه شکل هست ؟ ممنونم میشم
سلام وقت بخیر
برای تغییر رنگ متن هدر و آیکون‌های جستجو و سبد خرید هنگام اسکرول، میتوانید از کد زیر استفاده کنید:
.elementor-sticky–effects .elementor-widget-nav-menu .elementor-nav-menu–main .elementor-item,
.elementor-sticky–effects .elementor-woocommerce-cart .elementor-cart-icon,
.elementor-sticky–effects .elementor-woocommerce-search-form .elementor-search-field {
color: #fff !important;
}
این کد به علاوه قسمتی از کدی که شما ارائه دادید، به طور همزمان اعمال شده و رنگ متن آیکون‌های جستجو و سبد خرید نیز در حالت اسکرول تغییر می‌کند. همچنین با استفاده از مشخصه !important، اطمینان حاصل شده که تنها این کد برای تغییر رنگ متن هنگام اسکرول استفاده شود و دیگر کدهای قبلی اعمال نشوند.
سلام در سایت های معروف وردپرسی وقتی اسکرول به سمت پایین میشه منو مخفی میشه و با اسکول به بالا یک منو با سایز کوچیکتر ظاهر میشه تا مخاطب فضای بیشتری دیدن مطالب داشته باشه برای اونها باید چی کار کنیم ؟
سلام وقت بخیر
بله دقیقا با Css و Javascript میتوانیم این کار را انجام بدید که در یک جلسه جدا بزودی قرار داده خواهد شد .
موفق باشید
سلام وقت بخیر، من هدر سایتم مثل دیجی کلا دو قسمتیه، چطور میشه قسمت پایینی مخفی و با اسکرول به بالا ظاهر بشه در حالی که زیر کل هدر سایه داشته باشه؟
دقیقا مثل هدر دیجی کالا
سلام درود بر شما
برای اینکه در حالت اسکرول به سمت بالا هدر شما نمایش داده شود طبق زیر عمل کنید .
1.در سکشن مورد نظر هدر id اون رو stickyheaders قرار بدید.حالت sticky هم تاپ قرار بدید.
2.اسکریپت زیر را در قسمت کدهای سفارشی المنتور قرار بدید که در تمامی صفحات تکرار شود .
document.addEventListener(‘DOMContentLoaded’, function() {
jQuery(function($) {
var mywindow = $(window);
var mypos = mywindow.scrollTop();
let scrolling = false; /* For throlling scroll event */
window.addEventListener(‘scroll’, function() {
scrolling = true;
});
setInterval(() => {
if (scrolling) {
scrolling = false;
if (mypos > 40) {
if (mywindow.scrollTop() > mypos) {
$(‘#stickyheaders’).addClass(‘headerup’);
} else {
$(‘#stickyheaders’).removeClass(‘headerup’);
}
}
mypos = mywindow.scrollTop();
}
}, 300);
});
});
3. css زیر هم در استایل قالب قرار دهید .
#stickyheaders{
transition : transform 0.34s ease;
}
.headerup{
transform: translateY(-110px);
}
موفق باشید
سلام مهندس ، این کدها خطا عمل نمیکنه ، ممنون میشم یکم دقیق تر توضیح بدید تا بتونیم استفاده کنیم
سلام سرکار خانم
بله دقیقا در نسخه اخیر المنتور دیگه این کد ها کار نمیکنند بزودی آموزش آپدیت میشود .
سلام
لطفا آموزشتون ویدیویی باشه.
بزرگوارید
سلام وقت بخیر
بله چشم بزودی قرار خواهیم داد
سلام و درود
چطور میشود بدون سایدبار ، یک المان را چسبان کرد با نقطه شروع و پایان ، با خود المنتور یا المنتور پرو میشه این کار را انجام داد یا باید از افزونه استفاده کرد یا این که باید کلا کد نویسی کرد ، شما چنین افزونه یا آموزشی دارید ، ممنونم
سلام وقت بخیر محمد قریشی عزیز
شما میتوانید با اضافه کردن کلاس به بخش مثلا کلاس titlesticky و بعد استفاده از css زیر این کار را انجام بدید.
body[data-elementor-device-mode=desktop] selector { position: sticky; position: -webkit-sticky; top: 110px; }
سلام وقتتون بخیر
بخشید چطور میتونم این تغییرات رو اعمال کنم که هنگام اسکرول کردن ، هدر محو بشه ؟؟؟
سلام وقت بخیر
منظور از محو شدن چیه ؟
سلام برای من ارور میده چیکاربایدبکنم
سلام جناب فدایی عزیز
لطفا خطایی که میده رو اعلام بفرمایید تا راهنمایی کنم خدمتتون .
ممنونم
استاد کاش خودتون این کد گذاشتنو ویدیوئی اموزش میدادید واقعا ادم نمیتونه بدونه چی قراره در بیاد چرا لوگو رو دوتا گذاشتید مستقل کردنش چی هست عنوان هایی که نام میبرید با عناوین المنتور تفاوت دارن و از همه مهمتر نمیدونیم نتیجه قراره چی بشه و این کد رو به بخش قراراه بدیم یا لوگو ها کجا ؟؟؟؟؟؟
سلام وقت بخیر
بزودی آموزش ویدیویی گذاشته خواهد شد .
موفق باشید