طراحی سربرگ شفاف و چسبنده با المنتور

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print
سربرگ چسبان با المنتور
پخش ویدیو

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

در اینجا قصد داریم نحوه طراحی سربرگ چسبان به همراه افکت شفاف را با استفاده از المنتور آموزش دهیم.

مواردی که در ادامه یاد میگیریم:

  • ایجاد سربرگ شفاف
  • سربرگ چسبان در هنگام اسکرول
  • تغییر رنگ پس زمینه سربرگ در هنگام اسکرول

طراحی سربرگ چسبان با استفاده از المنتور

مرحله 1: برای این کار ابتدا از تب قالب ها در پیشخوان وردپرس گزینه افزودن جدید را بزنید. در مرحله بعد نوع قالب را روی سربرگ قرار داده و دکمه ایجاد را بزنید.

سربرگ چسبان با المنتور

مرحله 2: در این مرحله طراحی سربرگ را انجام داده و طبق آموزش، شرایط نمایش را تنظیم کنید.

بخوانید : چگونه یک سربرگ سفارشی با المنتور بسازیم ؟

مرحله 3: روی بخش اصلی سربرگ کلیک کرده و در تب استایل، رنگ پس زمینه را شفاف کنید.

سربرگ شفاف با المنتور

تب پیشرفته

سپس به مقدار ارتفاع سربرگ، فاصله از پایین به صورت منفی وارد کنید. ما در اینجا ارتفاع سربگ 90 پیکسل هست، باید مقدار -90 پیکسل از پایین فاصله دهیم.

همچنین مقدار z index را روی 999 قرار دهید.

در دامه شک شناسه CSS با مقدار header_stick اورد کنید.

سربرگ شفاف با المنتور

تب موشن افکت

وارد تب موشن افکت شده و گزینه شناور را روی بالا قرار دهید. سپس افکت افست را بر اساس ارتفاع سربرگ خود مقدار دهی کنید. در اینجا ارتفاع سربرگ ما 90 پیکسل هست، افکت افست هم مقدار 90 پیکسل قرار می دهیم.

سربرگ شفاف با المنتور

تب CSS سفارشی

حالا در قسمت CSS سفارسی، کد زیر را قرار داده تا در هنگام اسکرول پس زمینه تغییر رنگ دهد.

کد رنگی خودتان را با مقدار #333 تغییر دهید.

section#header_stick.elementor-sticky--effects {
    background: #333;
}

سربرگ شفاف با المنتور

در نهایت نتیجه به شکل زیر خواهد شد:

نکانت اضافی

تغییر ارتفاع سایز سربرگ، بعد از اسکرول

اگر می خواهید بعد از اینکه اسکرول انجام شد در کنار تغییر رنگ پس زمینه، ارتفاع سربرگ کمتر شود از کد زیر استفاده کنید.

selector.elementor-sticky--effects >.elementor-container{ min-height: 40px; }
selector > .elementor-container{ transition: min-height 1s ease !important; }

امیدواریم که از این آموزش هم به خوبی استفاده کرده باشید. اگر مشکلی در اجرای این آموزش دارید، در بخش نظرات مطرح کنید.

045-microphone

مدرس :
محمدرضا احمدزاده

013-globe

سطح آموزش :
متوسط

035-essay

زمان آموزش :
3 دقیقه

امتیاز دهید

اشتراک گذاری

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email

آخرین مقالات

آخرین محصولات

آخرین محصولات

برچسب ها

لینک کوتاه

https://elementorfa.ir/?p=10524

فهرست مطالب

mahdi
mahdi در 13:43

سلام میخواهم دوتا از آموزش ها رو در یک هدر قرار بدم چطوری میتونم ؟
یکی همین اموزش / یکی منو ( آموزش مخفی کردن/ نمایش دادن سربرگ در اسکرول

پاسخ
المنتور فارسی
المنتور فارسی در 13:47

با سلام
با انجام دادن مرحله به مرحله هر دو آموزش می تونید اجرا کنید.

پاسخ
mahdi
mahdi در 18:19

هردو یک کلاس های مختلفی دارند .
؟

پاسخ
المنتور فارسی
المنتور فارسی در 18:35

از یک کلاس برای هر دو استفاده کنید.

پاسخ
Avatar
امیر حسین معینی فر در 01:16

چگونه میشه کدی داد که لوگوی سایت رو تو اون صفحه که چسبان میشه گذاشت؟

شما فرض کنین منویی که چسبان کردیم توش اصلا لوگویی نیست . ولی اگر بخواییم وقتی چسبان میشه یه لوگو هم توش بیفته.

اون شدنی هست و آیا کدی داره ؟

سپاس

پاسخ
المنتور فارسی
المنتور فارسی در 12:53

برای این کار باید در حالت غیر چسبان هم لوگو قرار داد و فقط با استفاده از CSS مقدار Display:none تعریف کرد و در حالت چسبان Dispaly:block رو قرار داد.

پاسخ
Avatar
امیر حسین معینی فر در 01:10

عزیز اگر موقعی که هدر چسبان میشه و فرض کنین بکگراندش رو مشکی کردیم. چطور فونت هاش رو تغییر بدیم رنگ هاشون رو؟

مثلا رنگ نوشته ایی که تو اون صفحه هستیم؟
و رنگ نوشته یا منویی که میریم روشون

پاسخ
المنتور فارسی
المنتور فارسی در 12:52

با سلام
با استفاده از کد CSS ای که در انتها آموزش قرار گرفته باید رنگ فونت ها رو تغییر بدید.

پاسخ
Avatar
علیرضا در 16:49

سلام
برای کوچک کردن هدر بعد از پیمایش ، کدی که آخر مقاله گذاشتین رو در قسمت css کامل کپی کردن اما کوچک نشد . /http://rahpooyan-hagh.ir
لطفا راهنمایی کنید

پاسخ
المنتور فارسی
المنتور فارسی در 22:21

با سلام
ممکنه ذخیره نشده باشد، چون کدی در سایت نبود.

پاسخ
Avatar
علیرضا در 12:50

از صفحه عکس گرفتم /http://rahpooyan-hagh.ir/elementor-150
می بینید که کد وارد شده اما روی هدر اعمال نشده

پاسخ
المنتور فارسی
المنتور فارسی در 13:01

برای بررسی بهتر می تونید از طریق بخش پشتیبانی تیکت بزنید.

پاسخ
Avatar
علیرضا در 17:11

سلام
اگه بخوام بعد از پیمایش هدرم دو رنگ داشته باشه باید چیکار کنم ؟
با این روشی که گفتین ، هدر فقط یک رنگ داره

پاسخ
المنتور فارسی
المنتور فارسی در 18:53

با سلام
منظور از 2 رنگ چی هست؟ در حالت ثابت و چسبنده؟

پاسخ
Avatar
علیرضا در 20:59

در حالت چسبنده نه ؛ بعد از پیمایش صفحه به پایین که هدر رنگ سیاه میگیره ، میخوام به جای رنگ سیاه از ترکیب دو رنگ 00d1ca # و 06c188 # استفاده کنم .

پاسخ
المنتور فارسی
المنتور فارسی در 21:06

باید با استفاده از CSS Gradient این کارو انجام بدید.

پاسخ
Avatar
علیرضا ناصری در 02:09

اگر بخوام هدر سایتم ابتدا یه شکل و بعد از رسیدن به یه نقطه ای از صفحه تغییر پیدا کنه باید چیکار کنم ؟
مثل صفحه اول سایت گرین وب

پاسخ
المنتور فارسی
المنتور فارسی در 13:07

با سلام
با استفاده از کد CSS این مورد باید انجام شود. انتهای مقاله کد مرطوبه قرار گرفته است.

پاسخ
Avatar
محمد در 21:19

سلام میخوام هدر سایتم مثل این سایت بشه ممکنه راهنماییم کنید لطفا؟https://revolution.themepunch.com/basic-website/

پاسخ
هادی
هادی در 09:38

سلام
من میخوام بعد از اسکرول به غیر از تغییر رنگ پس زمینه، رنگ نوشته ها و عکس لوگو تغییر کنه. راهنمایی میفرمایید

پاسخ
المنتور فارسی
المنتور فارسی در 11:08

با سلام
برای این کار باید طبق آخرین کد داخل صفحه عمل کنید و کد های CSS رو داخل کد قرار دهید.

پاسخ
mahdi
mahdi در 19:07

فقط میخواهم عکس در اول صفحه برزگ باشد ولی در هنگام اسکرول کوچک شود مثل این سایت http://khoshbakht-food.com/

پاسخ
mahdi
mahdi در 19:06

css را اشتباه زده بودم heeader زده بودم درست شد خیلی ممنون بابت اموزش خوب و مفیدتون

پاسخ
المنتور فارسی
المنتور فارسی در 19:07

بسیار عالی، موفق باشید

پاسخ
mahdi
mahdi در 18:40

سلام چرا در بالا شفاف نیست

پاسخ
المنتور فارسی
المنتور فارسی در 18:43

با سلام
در بالا کدام قسمت یعنی ؟

پاسخ
mahdi
mahdi در 18:52

سلام در بالای سایتم که هدر ساختم رنگش با هنگام اسکرول هم یکیه

پاسخ
المنتور فارسی
المنتور فارسی در 18:53

آیا قسمت افست را تنظیم کردید؟ همچنین کد مروبط به حالت رنگی را قرار دادید؟

پاسخ
mahdi
mahdi در 18:56

بله کل این مراحل را رفته ام و رنگ خودم را تنظیم کردم ولی ثابت ( در بالای صفحه ) و هنگام اسکرول رنگش یکی است و من از داخل قسمت رنگ رنگش را شفاف کردم

المنتور فارسی
المنتور فارسی در 18:58

می تونید آدرس سایت رو بدید تا بررسی کنیم.

Avatar
مارال در 21:34

سلام
من میخوام فقط اسکرول میکنم هدر هم که میاد پایین از لحاظ سایز فونت و جانمایی لوگو متفاوت باشه….

پاسخ
المنتور فارسی
المنتور فارسی در 22:03

با سلام
در انتها مقاله کدی برای تغییر سایز ارتفاع سربرگ قرار گرفته و باید سایز فونت و لوگو هم توسط کد CSS تغییر کند.

پاسخ
Avatar
فرشید در 15:01

سلام
من میخوام افکتی که داخل این سایت رو به هدرم بدم:
https://www.elegantthemes.com/layouts/art-design/digital-marketing-landing-page/live-demo
اسمش نمیدونم چیه ولی وقتی اسکرول میکنی هدر خیلی نرم و یه مقداری جمع میشه
با المنتور میشه؟ چطوری؟
سپاس از شما واسه همه چیز…

پاسخ
المنتور فارسی
المنتور فارسی در 15:21

با سلام
کافیه مراحل بالا را انجام داده و در قسمت CSS سفارسی سربرگ، کد زیرا را وارد کنید.


selector.elementor-sticky--effects >.elementor-container{ min-height: 40px; }
selector > .elementor-container{ transition: min-height 1s ease !important; }

میزان ارتفاع سربرگ بعد از اسکرول 40 پیکسل تعیین شده است. می تونید این مقدار را تغییر دهید.

پاسخ
سهیل
سهیل در 22:39

سلام، اگر هدر دوبخشی باشد و بخواهیم فقط یکی قسمت چسبان باشد چی؟

پاسخ
المنتور فارسی
المنتور فارسی در 12:00

با سلام
باید هر بخش را درون یک Section اصلی قرار بدید و فقط یکی از Section ها را به صورت چسبان پیاده سازی کنید.

پاسخ
HAYDRA HIROY
HAYDRA HIROY در 12:12

سلام من این کارو انجام دادم رو وردی سایت تنظیم و سیو کنمش یا کلا هیچی؟

پاسخ
المنتور فارسی
المنتور فارسی در 12:14

با سلام
بله برای نمایش در تمامی سایت باید روی گزینه ورودی سایت تنظیم شود.

پاسخ
Avatar
چریک در 15:14

سلام من افزونه المنتور پرو رو همراه با افزونه های jet blocks – jet blog – jet elements – jet menu – jet tabs – JetEngine کامل نصب کردم ولی وقتی میخام قالب جدید ایجاد کنم قسمت اول که نوع قالب رو انتخاب میکنیم
فقط دو گزینه “صفحه” و بخش(سکشن) میاد برام. امکانش هست یه راهنمایی کنید ممنون میشم

پاسخ
المنتور فارسی
المنتور فارسی در 18:24

با سلام
این مورد فقط و فقط با نصب نبودن افزونه المنتور پرو اتفاق میافته.
نسخه المنتور پرو تون چنده ؟

پاسخ
Avatar
کیوان در 19:26

با سلام
من توی بخش قالب های جدید از منو کشویی که باید انتخاب کنم وقتی باز می کنم هیچی نشون نمیده؟؟؟؟

پاسخ
المنتور فارسی
المنتور فارسی در 19:27

با سلام
هیچ موردی رو نشون نمیده یا فقط سربرگ رو نشون نمیده؟

پاسخ
Avatar
چریک در 15:16

منم دقیقا این مشکل رو دارم با این تفاوت که دو گزینه “صفحه” و “بخش(سکشن)” رو دارم تو منو

پاسخ

نظرات ارزشمند خود را به اشتراک بگذارید

نیاز به کمک دارید؟ پیام دهید