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

اشتراک گذاری در 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 در 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 پیکسل تعیین شده است. می تونید این مقدار را تغییر دهید.

پاسخ
Avatar
سهیل در 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

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

پاسخ

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

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