لوگو سایت
جستجو
Close this search box.

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

پخش ویدیو

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

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

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

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

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

مرحله 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

3 دقیقه

امتیاز دهید

[kkstarratings]

اشتراک گذاری

آخرین مقالات

برچسب ها

لینک کوتاه

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

فهرست مطالب

72 پاسخ

  1. وقت بخیر
    برای تغییر رنگ فونت سربرگ، بعد از اسکرول ، از چه کدی می‌تونیم استفاده کنیم؟

  2. سلام من مرحله انجام دادم اموزشتون رو قسمت پریویو خود المنتور نشون میده تغییر رنگ رو ولی روی خود سایت خیر مشکل از چه بابت است ?
    Z INDEX را بیشتر هم کردم اما باز نمایش نمیده

    1. با سلام
      در قسمت تنظیمات المنتور تولید مجدد CSS را بزنید و بررسی کنید.

  3. سلام وقتتون بخیر کد اصلا کار نمیکنه همین چیزی که گذاشتید و گذاشتم ، اصلا کد کار نمیکنه و چیزی به نام section داخل ویرایشگر css نمیشناسه.

    1. با سلام
      بدون هیچ مشکلی داره کار میکنه. دقیا کنید شناسه و کد را به صورت صحیح وارد کرده باشید.

      1. شناسه و کد رو درست وارد کردم ولی کار نمیکنه.

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

        اصلا section داخل ویرایشگر کد نمیشناسه و اون قطعه کد .elementor به بعد تنها کدی که میشناسه background هست

  4. با تشکر از توضیحات کاملی که دادید، فقط 1 سوال پیش میاد، زیر منو ها رو نشون نمیده، چیکارش کنم زیرمنو ها رو هم نشون بده؟
    البته تو قسمت تنظیمات قالب زیرمنو رو نشون میده ولی در صفحات دیگر وب سایت زیرمنو ها رو نشون نمیده.
    ممنون میشم راهنمایی بفرمایید.

    1. با سلام
      دقیقا به چه صورت میشه؟ لطفا یک عکس ارسال کنید.

    1. با سلام
      برای سایه کافیه از تنظیمات المنتور، تب حاشیه را زده و سایه را قرار بدید.

  5. سلام اگه بخوام لوگو توی حالت شفاف تغییر کنه باید چطور این کار رو انجام بدم

  6. سلام.بعد از تنظیمات بخش هدر، صفحه اصلی سایت که میخواهیم هدر درون آن شفاف باشه باید حالت canvas باشه یا حالت دیگری؟چون در حالت canvas هدر رو نشون نمیده و باید دستی یه سکشن قالب به بالا اضافه کنیم و هدرمان را انتخاب کنیم.
    من میخوام دقیقا این حالتی که تو این سایت https://vitabiotics.ir هست بشه ولی نمیشه

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

  8. سلام وقت بخیر، منویی می خوام طراحی کنم که منوی چسبان باشه و زمانی که اسکرول می کنم تغییر حالت بده و به منوی همبرگری تبدیل بشه. امکان این کار وجود داره؟

  9. با سلام
    من قصد دارم که header دو قسمتی داشته باشم که وقتی به سمت پایین میایم قسمت دوم هدر غیب بشه و فقط قسمتی اولی و اصلی باقی بمونه
    لطفا بررسی کنید خیلی مهمه برام

  10. سلام
    من طبق آموزش پیش رفتم ولی متاسفانه نشد
    وقتی کد را وارد می کنم رنگش عوض میشه و اصلا تغییر نمی کند همیشه یک رنگ است

  11. سلام و عرض ادب خواهش میکنم اینو راهنمایی کنید چطور هدرمو مث این سایت کنم https://www.namava.ir
    وقتی که ثابته ایکرول حرکت نکرده سایه مشکی کمرنگ داره و میره بایین هدر بالا میمونه اسکرول میاد بالا هدر دیده میشه دوباره اگر کدی داره لطفا اعلام کنید
    با تشکر

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

  12. سلام خیلی اموزش خوبی بود ممنون. اگر راهنمایی کنید که چطور میشه بعد از اسکرول یه سایه هم به هدر اضافه کنم خیلی ممنون میشم (:

    1. با سلام
      از کد CSS انتها صفحه استفاده کرده و سایه اضافه کنید.

  13. سلام . بعد از اینکه هدر را تعریف کردیم چطور اون را به قالب معرفی کنیم که جایگزین هدر خود قالب بشه. قالب من آسترا هست<

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

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

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

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

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

    سپاس

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

      1. با سلام
        بنده کد زیر رو وارد می کنم ولی ارور میده
        selector.elementor-sticky–effects >.elementor-container{ min-height: 40px; }
        selector > .elementor-container{ transition: min-height 1s ease !important; }

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

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

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

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

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

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

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *