سلام وقت بخیر
امروز باز اومدیم با یک آموزش دیگر کاربردی و کوتاه ، در این آموزش شما میتوانید با اسکرول کردن سایت المنتوری خود علاوه بر چسبیده یا شناور بودن هدر ( 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;
}
47 پاسخ
سلام، وقتتون بخیر. من روی لوکال هاست کار میکنم. روی دوتا سایت کار میکنم. یکیش حالت sticky روی کانتینرم فعاله و هدرم رو sticky کردم. اما روی سایت دوم، حالت sticky اصلاً توی موشن افکت و هیچ جای دیگه نیست! درواقع حالت sticky فقط روی ویجت هام هست، ولی روی کانتینرم جایی تحت عنوان sticky یا چسبان ندارم! با کمک chatgpt هم چندین حالت رو امتحان کردم، اما موفق نشدم. elementor pro فعاله، کانتینر فعاله، اما خبری از حالت sticky نیست! حتی با کد css هم فعال نشد. overflow هم hidden نیست.
سلام خدمت شما
این مشکل معمولاً وقتی پیش میاد که نسخه المنتور یا المنتور پرو روی اون سایت قدیمیتره یا تنظیم Flexbox Container بهدرستی فعال نشده
چون گزینه Sticky برای کانتینر فقط در نسخههای جدید و وقتی کانتینر فلکس فعال باشه نمایش داده میشه.
اول هر دو سایت رو از نظر نسخه امنتور رایگان و Pro آخر بکن بعد برو به المنتور > تنظیمات > پیشرفته و مطمئن شو Flexbox Container فعاله و کش سایت رو هم پاک کن.
همچنین دقت کن خود کانتینر رو انتخاب کرده باشی (نه ویجت داخلش) و در تب پیشرفته > موشن افکت دنبال چسبندگی بگردی
سلام. وقت بخیر
در ورژن موبایل، وقتی یکی از گزینههای داخل هدر چسبان باز شه، تنظیم فیکس به هم می خوره و سایت از عرض در نمایشگر تکان میخوره. یعنی انگار اندازهش با سربرگ یکی نیست. مشکل از چی می تونه باشه؟
سلام وقت بخیر
این مشکلی که گفتید معمولاً به خاطر اسکرول بار عمودی یا افقی توی ورژن موبایل پیش میاد. وقتی منو باز میشه، مرورگر اسکرول بار اضافه میکنه و باعث میشه عرض سایت یکی دو پیکسل جابهجا بشه و حس تکون خوردن بده. ربطی به کد تغییر لوگو نداره. برای حلش میتونید روی body یا html وقتی منو باز میشه خاصیت overflow:hidden بدید تا صفحه تکون نخوره، یا اینکه به هدرسایت width:100vw رو با دقت استفاده کنید (گاهی 100vw باعث همین پرش میشه، بهتره بهجاش از 100% استفاده کنید).
سلام وقتتون بخیر
چطورمیتونم تنظیم کنم که زمانی که اسکرول میشه به سمت پایین و هدر ثابت میشه ، بکگراند هدر حالت شیشه ای بگیره . یعنی متنهای زیر هدر که داره اسکرول میشه کمی پیدا باشه
سلام این مورد در کد می باشد میتوانید فقط برای شیشه ای کردن از کد زیر استفاده کنید
برای ایجاد افکت شیشهای روی پسزمینه المنتی با کلاس .es، از CSS زیر استفاده کن:
.es {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.3);
}
این کد رو میتونی در بخش سفارشیسازی CSS المنتور یا در سفارشیسازی قالب قرار بدی.
من کد تغییر رنگ منو در حالت استیکی منو رو لازم دارم. از افزونه استیکی هدر استفاده می کنم و فقط میخواستم در حالت اسکرول رنگ منو تغییر کند. کد ارایه شده شما رو داخل کانتینر هدر قرار دادم اما تغییری حاصل نشد
سلام درود بر شما
برای تغییر رنگ آیتمهای منو در حالت اسکرول هنگام استفاده از افزونه Sticky Header، مطمئن شو کلاس elementor-sticky–effects به هدر اضافه میشه؛ اگه نشد، افزونه ممکنه از کلاس دیگهای استفاده کنه. با ابزار Inspect مرورگر کلاس دقیق هدر استیکی رو بررسی کن و بهجای selector در کد، اون کلاس واقعی (مثل .elementor-sticky–effects) رو بذار. همچنین مطمئن باش که کد CSS رو در مکان مناسب (مثل تنظیمات سفارشیسازی قالب یا المنتور) وارد کردید
سلام من از منوی پیشرفته ی پاورپک استفاده کردم
سلکتور هاشو چک کردم و بر اساس اونها کد رو تغییر دادم شد این :
selector.elementor-sticky–effects .elementor-widget-pp-advanced-menu .pp-advanced-menu–main .pp-menu-item{
color:#0000 !important;
}
ولی نمیدونم چرا اعمال نمیشه
کمک میکنید ؟
سلام درود بر شما
مقدار رنگ #0000 نامعتبره اگر منظور شما مشکی است باید از #000 یا black استفاده کنید و ممکن است اولویت استایل پایین باشد. امتحان کنید که سلکتور را دقیقتر بنویسید یا سطح خاصتری از المنت را هدف بگیرید.
کد زیر رو تست بفرمایید :
selector .elementor-sticky-effects
.elementor-widget-pp-advanced-menu
.pp-advanced-menu-main .pp-menu-item {
color: #000 !important;
}
درست شد مشکل از کد رنگ بود که فرمودید
برای اینکه وقتی به پایین اسکرول میشه، هدر نمایش داده نشه و وقتی به بالا اسکرول میشه، هدر ظاهر بشه باید چیکار کرد ؟ با افکت fade in down ظاهر بشه هدر
سلام خدمت شما
برای این کار میتونید از ترکیب position: fixed; همراه با transform و transition در CSS استفاده کنید. یه راه ساده اینه که ابتدا هدر رو مخفی کنید و وقتی کاربر به بالا اسکرول کرد، دوباره نمایش داده بشه. کد زیر رو تست کنید:
header {
position: fixed;
top: -100px;
left: 0;
width: 100%;
background: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out;
}
header.show {
transform: translateY(100px);
}
حالا اسکریپت جاوااسکریپت برای تشخیص اسکرول:
let lastScroll = 0;
const header =
document.querySelector(“header”);
window.addEventListener(“scroll”, () => {
let currentScroll = window.scrollY;
if (currentScroll < lastScroll) { header.classList.add("show"); } else { header.classList.remove("show"); }lastScroll = currentScroll; });
سلام وقت بخیر . من دارم با دموی جواهرات پیرل قالب وودمارت کار میکنم که پس زمینه هدر رو روشن گذاشتم ولی وقتی اسکرول میکنم پس زمینه هدر چسبان سیاه میشه و متن ها ناپدید میشن چطور میتونم پس زمینه هدر چسبان وقتی اسکرول میکنم تغییر بدم که دیگه سیاه نباشه یا اینکه رنگ فونت در زمان اسکرول تغییر کنه . لطفا راهنمایی بفرمایید .
سلام وقت بخیر
احتمالا اشکال از سمت قالب می باشد اما میتوانید با css پی زمینه ای برای آن مشخص کنید
سلام استاد خسته نباشید کد مربوط به تغییر رنگ آیکون روهم بزارید.
سلام ممنونم
برای تغییر رنگ آیکون در هنگام اسکرول میتوانید از کد زیر استفاده کنید. فرض میکنیم که آیکون شما دارای یک کلاس مانند icon-class است:
selector.elementor-sticky–effects .icon-class {
color: #ffffff; /* رنگ آیکون هنگام اسکرول */
transition: color 0.3s ease; /* برای تغییر نرم */
}
selector .icon-class {
color: #000000; /* رنگ پیشفرض آیکون */
}
منونم استاد ولی بعد از اعما با خطای “expected RBRACE at line 8, col 16” مواجه میشم ممنون میشم کمک کنید.
سلام دوست من خطای “expected RBRACE” معمولاً نشان میدهد که یک آکولاد بسته { } در کد شما گم شده یا در جای درستی قرار نگرفته است
سلام ممنون از سایت عالی تون ممنوم میشم اگه این توضیحات رو تصویری آموزش بدید توی قسمت سی اس اسش به مشگل برخوردم
سلام وقت بخیر بله در آپدیت حتما این کار انجام می شود
با سلام
با اینکه خیلی وقت گذاشتم بازم موفق نشدم کاش در همینجا تصویری آن را هم بزارین
هر کاری کردم موقع اسکرول oldlogo محو نمیشه و هر دو هستن
همه 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; }
سلام وقتتون بخیر
بخشید چطور میتونم این تغییرات رو اعمال کنم که هنگام اسکرول کردن ، هدر محو بشه ؟؟؟
سلام وقت بخیر
منظور از محو شدن چیه ؟
سلام برای من ارور میده چیکاربایدبکنم
سلام جناب فدایی عزیز
لطفا خطایی که میده رو اعلام بفرمایید تا راهنمایی کنم خدمتتون .
ممنونم
استاد کاش خودتون این کد گذاشتنو ویدیوئی اموزش میدادید واقعا ادم نمیتونه بدونه چی قراره در بیاد چرا لوگو رو دوتا گذاشتید مستقل کردنش چی هست عنوان هایی که نام میبرید با عناوین المنتور تفاوت دارن و از همه مهمتر نمیدونیم نتیجه قراره چی بشه و این کد رو به بخش قراراه بدیم یا لوگو ها کجا ؟؟؟؟؟؟
سلام وقت بخیر
بزودی آموزش ویدیویی گذاشته خواهد شد .
موفق باشید